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

JavaScript
1

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.

3

My first suggestion would be that you take the advice repeatedly offered to you elsewhere and start by validating your code. <th1> is not a valid element in any form of HTML I know.

1 Like
4

Thanks for your reply. I have made changes.
Any additional help with how to get the sub-category list to populate will be appreciated.

 <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]')" />
	  	</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>
5

Are you sure your getting the data in your data variable?

6

Thanks for your reply.
Well, 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. So, would that mean that the Form is “getting the data in the data variable” or not? I look forward to any additional guidance.

7

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 (and see the first attached image):

<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 this code (and see the second attached image):

<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 jQuery 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.

1235×125 9.97 KB

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.