Jump to content

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


Chrisj

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by Chrisj
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.