Help with getting sub-category jquery drop-down menu to populate

[Chrisj]

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" />
        <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>
	  	<select size="1" name="channel" class="ui-select" />
		<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>
		<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 that then populates the sub-category drop-down for selecting a sub-category.

But when I add in the jquery code around the Form, and select 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 type="text/javascript" src="js/select-widget-min.js"></script>

and:

<link rel="stylesheet" href="css/drop-down.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"/></script>
<script type="text/javascript" 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>

So, the Search Form works and the sub-category drop-down populates successfully after a Category is chosen. But when the jquery is added in, the Search Form works except the sub-category drop-down doesn't populate successfully after a Category is chosen. Any suggestions will be greatly appreciated..

[cyberRobot]

Do you have any other JavaScript on the page? If so, does that code stop working also when the jQuery code is present? When a browser comes across a JavaScript error, the rest of the JavaScript code tends to stop working also.

 

Have you looked in your browser's Console to see if it's throwing any JavaScript errors?

[Chrisj]

Thanks for your reply. However, I have some additional information, since I originally posted.

 

As I stated, I have a Search Form on a web page that works successfully, where when a Category is chosen the sub-category drop-down populates successfully after the Category is chosen, that uses 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>

But when a jquery plug-in is added in, the Search Form works except the sub-category drop-down doesn't populate successfully after a Category is chosen, the jQuery script uses uses code:

 

<script>
$(document).ready(function(){
$("select.ui-select").selectWidget({
change       : function (changes) {
return changes;
},
effect       : "slide",
keyControl   : true,
speed        : 200,
scrollHeight : 250
});
});
</script>

So, I was able to contact the script's author (outside USA time zone) and he said this:

 

 

if you are using $(...).change(function(){ // Do something });, ....on this drop-down script change is working only in 

change       : function (changes) {

return changes;

},

 

...look at your view source, there you will find $('select').change();

 

 

So, I'm guessing that I have to somehow combine the two codes, maybe use 

 

change       : function (changes) {
return changes;
},

and not 

 

.change(function()

possibly?

 

Any additional help will be appreciated.

Edited September 13, 2016 by Chrisj