Chrisj Posted September 12, 2016 Share Posted September 12, 2016 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.. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted September 13, 2016 Share Posted September 13, 2016 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? Quote Link to comment Share on other sites More sharing options...
Chrisj Posted September 13, 2016 Author Share Posted September 13, 2016 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.