I’ve installed a jquery plug-in and am trying to integrate it with my successfully-working Search Form.
The search form works using this code:
<form method="get" action="../search.php" name="" />
<table class="table10">
<tr>
<td>
<input type="text" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />
</td>
<td>
<th1><select size="1" name="channel" class="ui-select" /></th>
<option value="">SELECT</option>
<option value="All">All Videos</option>
<option value="1">Channel1</option>
<option value="4">Channel2</option>
</select>
</td>
<td>
<select size="1" name="sub_category" class="ui-select" />
<option value="All">Sub Category</option>
</select>
</td>
<td>
<th1><input type="submit" value="SUBMIT"/>
</td>
</tr>
</form>
and this code:
<script>
$(document).ready(function() {
$("select[name='channel']").change(function() {
var channel_id = $(this).val();
console.log(channel_id);
$("select[name='sub_category']").html("<option value='All'>Sub Category</option>");
$.ajax({
type: "POST",
url: "/ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
}
}
});
});
});
</script>
where you select a category and then that populates the sub-category drop-down for selecting a sub-category.
But when I add in the jquery code around the Form, after selecting a category, the sub-category doesn’t populate. Here’s that jquery code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/select-widget-min.js"></script>
and:
<link rel="stylesheet" href="css/drop-down.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".ui-select").selectWidget({
change : function (changes) {
return changes;
},
effect : "slide",
keyControl : true,
speed : 200,
scrollHeight : 250
});
});
</script>
</head>
Any suggestions of how to get the sub-category list to populate will be appreciated.