SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Chaining selects modified with Chosen

    I'm trying to chain selects with Chosen and Chained but I'm not sure if I'm implementing .chosen().change() correctly or if the error I'm getting is a bug.

    Here's what I've got:

    Code:
    <select id="Inputfield_date" name="date" data-placeholder="Select event date">
    <option value=""></option>
    <option value="WA">WA</option>
    <option value="QLD">QLD</option>
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="SA">SA</option>
    </select>
    
    <select id="Inputfield_code" name="code" data-placeholder="Response code">
    <option value=""></option>
    <option value="601" class="WA">601</option>
    <option value="602" class="WA">602</option>
    <option value="402" class="QLD">402</option>
    <option value="403" class="QLD">403</option>
    <option value="301" class="VIC">301</option>
    <option value="302" class="VIC">302</option>
    <option value="201" class="NSW">201</option>
    <option value="203" class="NSW">203</option>
    <option value="501" class="SA">501</option>
    </select>
    
    $('#Inputfield_date').chosen().change(function() {
        $("#Inputfield_code").chained("#Inputfield_date");
    });
    which gives me Uncaught RangeError: Maximum call stack size exceeded.

    I also have to show another hidden field if a particular option is chosen and I'm not sure what the correct approach is for that.

    I don't have to use Chained if anyone has a solution that involves that, but I do have to use Chosen, or a script that modifies the look of the select elements to match the design I've been given.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Is there any reason your're putting the association inside a .change callback?

    I would have thought something like this would work:

    Code:
    $('#Inputfield_date').chosen();
    $('#Inputfield_code').chosen();
    $("#Inputfield_code").chained("#Inputfield_date");
    Saying that, I haven't used either of these plugins, so anything is possible.
    If the above doesn't work, let me know and I'll have a closer look.

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Is there any reason your're putting the association inside a .change callback?
    Chained only responds to changes to select elements. Because the select is replaced by Chosen, it's not actually being changed when you choose an option, so it has to fire off an event to Chained to let it know something has changed.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ah ok, well in that case it seems that you need to use chosen:updated
    http://harvesthq.github.io/chosen/#change-update-events

    Here's a demo of it working with the latest versions of both plugins.
    Code:
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
        <link rel="stylesheet" href="chosen.css">
        <style>
          .chosen-select{ width: 210px; }
          label{ display: inline-block; width: 40px; }
          .holder{ margin: 10px 5px; }
        </style>
      </head>
      
      <body>
        <div class="holder">
          <label for="Inputfield_date">Date:</label>
          <select id="Inputfield_date" data-placeholder="Select event date" class="chosen-select">
            <option value=""></option>
            <option value="WA">WA</option>
            <option value="QLD">QLD</option>
            <option value="VIC">VIC</option>
            <option value="NSW">NSW</option>
            <option value="SA">SA</option>
          </select>
        </div>
        
        <div class="holder">
          <label for="Inputfield_code">Code:</label>
          <select id="Inputfield_code" data-placeholder="Response code" class="chosen-select">
            <option value=""></option>
            <option value="601" class="WA">601</option>
            <option value="602" class="WA">602</option>
            <option value="402" class="QLD">402</option>
            <option value="403" class="QLD">403</option>
            <option value="301" class="VIC">301</option>
            <option value="302" class="VIC">302</option>
            <option value="201" class="NSW">201</option>
            <option value="203" class="NSW">203</option>
            <option value="501" class="SA">501</option>
          </select>
        </div>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="chosen.jquery.js" type="text/javascript"></script>
        <script src="http://www.appelsiini.net/projects/chained/jquery.chained.js" type="text/javascript"></script>
        <script type="text/javascript">
          $('.chosen-select').chosen();
          $("#Inputfield_code").chained("#Inputfield_date");
          $("#Inputfield_code").trigger("chosen:updated");
    				
          $("#Inputfield_date").on("change", function(){
            $("#Inputfield_code").trigger("chosen:updated")
          });
        </script>
      </body>
    </html>
    Hope that helps you.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah right, I hadn't noticed the chosen:updated function. Awesome, thanks.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •