SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Allow option value to open 'onclick' from button using chained select

    Hi all,

    I've created a chained select using an excellent plugin by Mika Tuupola - http://www.appelsiini.net/download/jquery.chained.js

    I'm trying to add a simple 'onclick' event to the download button so that it opens up the option value (a linked file) in a new tab - but I cant get anything to work.

    I've stripped it down here - http://jsfiddle.net/valleysboy/cB8yB/
    The page its based on is here - http://www.cypsp.org/information.htm

    Any help would be much appriciated!

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

    You can do it like this:

    Code JavaScript:
    $(document).ready(function() {
      $("#area").chained("#geography");
      $("#download").on("click", function(e){
        e.preventDefault();
        window.open($("#area").val());
      });
    });

    Here's a demo.

    Here's the full code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Chained Select demo</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <form name="monitoring-report" action="" method="get" target="_blank" onsubmit="return validate_form()">                  
          <select name="geography" id="geography">
            <option value="">Choose a geographic level</option>
            <option value="outcomes">Outcomes Level - LGD</option>
            <option value="locality">Locality level - Ward</option>
          </select>
          
          <select name="area" id="area">
            <option selected>Please select a report</option>
            <option value="publications/monitoring/ni/cypsp_northern_ireland_monitoring-2011.pdf" class="outcomes">N.Ireland</option>
            <option value="publications/monitoring/outcome-groups/cypsp_belfast_locality_monitoring-2012.pdf" class="outcomes">Belfast</option>
            <option value="publications/monitoring/outcome-groups/cypsp_northern_locality_monitoring-2012.pdf" class="outcomes">Northern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_south-eastern_locality_monitoring-2012.pdf" class="outcomes">South-Eastern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_southern_locality_monitoring-2012.pdf" class="outcomes">Southern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_western_locality_monitoring-2012.pdf" class="outcomes">Western</option>
            <!--locality reports-->
            <option value="publications/monitoring/outcome-groups/cypsp_belfast_locality_monitoring-2012.pdf" class="locality">Belfast</option>
            <option value="publications/monitoring/outcome-groups/cypsp_northern_locality_monitoring-2010.pdf" class="locality">Northern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_south-eastern_locality_monitoring-2010.pdf" class="locality">South-Eastern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_southern_locality_monitoring-2012.pdf" class="locality">Southern</option>
            <option value="publications/monitoring/outcome-groups/cypsp_western_locality_monitoring-2012.pdf" class="locality">Western</option>
            <option value="publications/monitoring/locality-groups/fermanagh_monitoring-2012.pdf" class="locality">Fermanagh</option>
            <option value="publications/monitoring/locality-groups/south-armagh_monitoring-2012.pdf" class="locality">South Armagh</option>
          </select>
          <input name="download" type="submit" value="Download" class="button info" id="download"/>
        </form>
        
        <script>
          // Chained - jQuery non AJAX(J) chained selects plugin
          (function($) {
            $.fn.chained = function(parent_selector, options) { 
              return this.each(function() {
                var self   = this;
                var backup = $(self).clone();
                $(parent_selector).each(function() {
                  $(this).bind("change", function() {
                    $(self).html(backup.html());
                    var selected = "";
                    $(parent_selector).each(function() {
                      selected += "\\" + $(":selected", this).val();
                    });
                    selected = selected.substr(1);
                    var first = $(parent_selector).first();
                    var selected_first = $(":selected", first).val();
                    $("option", self).each(function() {
                    if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {
                      $(this).remove();
                    }                        
                  });
                  if (1 == $("option", self).size() && $(self).val() === "") {
                    $(self).attr("disabled", "disabled");
                  } else {
                    $(self).removeAttr("disabled");
                  }
                  $(self).trigger("change");
                });
                if ( !$("option:selected", this).length ) {
                  $("option", this).first().attr("selected", "selected");
                }
                $(this).trigger("change");             
              });
            });
          };
          $.fn.chainedTo = $.fn.chained;
          })(jQuery);
          
          $(document).ready(function() {
            $("#area").chained("#geography");
            $("#download").on("click", function(e){
              e.preventDefault();
              window.open($("#area").val());
            });
          });
        </script>
      </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo - Yet again thank you - I must have a confilct though with another js script as its not working on the page I intened it for - i shall track back and test.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    No probs

    If you can post a link, I don't mind taking a look.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really appriciate - http://www.cypsp.org/information.htm

    PS If possible could you help how I debug - using firebug yet still not getting to grips with the js console.

    Chained code possible cause?
    Code:
    <script type="text/javascript">
        $("#area").chained("#geography"); /* or $("#area").chainedTo("#geography"); */
    </script>

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by stephen_ View Post
    Oh right, that was your page. Sorry, you posted that before.

    The problem seems to be on line 332, you have commented out the beginning of a function:

    Code JavaScript:
    <!--function validate_form() {

    which is causing a syntax error.

    Try fixing this and then seeing if that makes a difference.

    Quote Originally Posted by stephen_ View Post
    PS If possible could you help how I debug - using firebug yet still not getting to grips with the js console.
    Sure. Open Firebug, click on "Console" and make sure the "Errors" tab is selected.

    You might also want to check out Chrome for debugging purposes. I wrote a short blog post on how to do this.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all brilliant - okay removed comment from another search form yet now the validate which produces a pop up is activating on the search form we're disucsing above strange?

    I'll keep plugging away - your a big help!

    (Update)

    Took out the whole validation script and still no joy - form is opening up same page in new tab ---- aggghhhhhhhhhh!!!!

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

    The code I mentioned above still seems to be commented out.

    Now when I open Chrome's devTools I see.

    Code:
    Uncaught SyntaxError: Unexpected token } information.htm:343
    Uncaught ReferenceError: report is not defined information.htm:282
    Uncaught ReferenceError: validate_form is not defined information.htm:259
    This is the original error and two new ones.

    On the bright side of things, it seems that the chained select is now working

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry testing locally can't upload directly out to live server until tonight (corporate network)....

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Ah ok. Well, good luck!
    Let me know if you need any more help.

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo i'll post any developments - thanks!

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay got there in THE END!!!!! weird though the only problem seems to be;

    Code:
    onsubmit="return validate_form()
    but when I deleted this the first time it did'nt work???? Very strange but it now works locally - will test on live server and publish.


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
  •