Web Analytics Made Easy -
StatCounter Help with getting sub-category jquery drop-down menu to populate - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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 attached image):


    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>
    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]')" />
    	  	</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>
    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 attached image):

    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 jQuery script's author 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

    Code:
    change       : function (changes) {
    return changes;
    },
    and not

    Code:
    .change(function()
    possibly?

    Any additional help will be appreciated.
Working...
X