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

Discussion in 'jQuery' started by chrisj, Sep 14, 2016.

  1. #1
    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>
    Code (markup):
    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:

    <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 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;
    },
    Code (markup):
    and not

    .change(function()
    Code (markup):
    possibly?

    Any additional help will be appreciated.
     

    Attached Files:

    chrisj, Sep 14, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You'll basically need to move your existing function within the change option in the selectWidget. Make sure to place the existing function in an if {} condition if you have more selects on the page.
     
    PoPSiCLe, Sep 14, 2016 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your reply.
    This revised code works successfully with the categories & sub-categories, now:

    <script>
    $(document).ready(function(){
    $("select.ui-select").selectWidget({
        change: function(changes) {
    
          var channel_id = changes;
          var Parent = $('select[name=sub_category]').parent();
          Parent.html('');
          Parent.html('<select name="sub_category"><option value="All">Sub Category</option></select>');
    $.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>");
    }
    }
    }
    });
          return changes;
        },
        effect: "slide",
        keyControl: true,
        speed: 200,
        scrollHeight: 250
      });
    });
    </script>
    Code (markup):

    Although the Search Form works successfully (see SearchForm1.png attached),

    when I choose a selection, from the Category drop-down list (see SearchForm2.png attached),

    the look of the sub-category(Optional) section changes (see SearchForm3.png attached).

    The sub-category box(Optional) does not show the jQuery drop-down list/scroll, just the sub-category field box (although it does functionally work successfully).

    Do you have a suggestion/idea to fix this so it keep the same style as the rest of the jQuery drop-down menu?
     

    Attached Files:

    chrisj, Sep 14, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Depending on how it's set up, adding the ui-select class should work - if not, you'll have to initialise the sub-category one as a selectWidget as well - not 100% sure as how to do that, since I've never used selectWidget for this, but it's usually enough to just do .selectWidget(); after the element is made.
     
    PoPSiCLe, Sep 15, 2016 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks for your reply. Greatly appreciated.
    Could you please give me an example of what you mean by "do .selectWidget(); after the element is made"?

    (Or, if there was a way to change the code so only the sub_category gets the scroll/effect, not the Category drop-down, I'd have an interest in that, also).
     
    chrisj, Sep 16, 2016 IP