Currently, I am utilizing backbone.js alongside Mustache as my template engine. Within one of my backbone views, there are various functions in play, with one specifically responsible for rendering a drop-down list populated with items retrieved from a database through an Ajax call. This function expects two parameters: the database table name and the ID of the div where the list will be displayed.
The specific backbone view setup is as follows:
MiscFunctionsView = GenericView.extend({
template: "dropdownList-template.html",
initialize:function(){
this.constructor.__super__.initialize.call(this);
},
drawDropDownList: function(tableName,divId){
this.$el=$("#"+divId);
console.log(this.$el);
var that = this;
$.ajax({
url: this.basePath + "misc.php",
type:"post",
data:{
ac:"ddl",
table_name: tableName
},
success:function(res){
that.handleResponse(res);
}
});
}
});
P.S. In case you require it, the handleResponse() and render() functions are defined within the GenericModel to keep the question concise.
The corresponding HTML page layout is illustrated below:
<form id="searchForm">
<div id="occupation">
</div>
<div id="p-type">
</div>
<div id="a-type">
</div>
</form>
<script type="text/javascript">
$(function(){
var misc = new MiscFunctionsView();
misc.drawDropDownList("occupation","occupation");
misc.drawDropDownList("person_type","p-type");
misc.drawDropDownList("account_type","a-type");
});
</script>
Upon page load, the structure transforms into:
<form id="searchForm">
<div id="ddl">
</div>
<div id="search-results">
<select name="account_type" id="account_type-ddl">
<option value="1">Developer</option>
<option value="2">Free Individual</option>
<option value="3">Premium individual</option>
</select>
<select name="occupation" id="occupation-ddl">
<option value="1">Actor</option>
<option value="2">Director</option>
<option value="3">Producer</option>
</select>
<select name="person_type" id="person_type-ddl">
<option value="1">Established</option>
<option value="2">Upcoming</option>
<option value="3">Corporate</option>
</select>
</div>
<div id="results">
</div>
</form>
Observing that all three drop-down lists render within the same div is worth noting; although each list targets a different div initially, reloading the page could lead to them appearing differently allocated. The correct div is assigned according to the object despite displaying otherwise before the render process.
Suspecting possible causes tied to Ajax behavior, I experimented with async:false within the Ajax call to no avail.
Do you have any thoughts or insights on this matter?