Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question selectmenu plugin help

    So I have a drop down that I want to use for a main mavigation and figured there had to be something out there to spruce up the look of the drop down. Sure enough, I found a plugin being developed for eventual inclusion into jQuery UI:
    http://www.filamentgroup.com/lab/jqu...a_html_select/

    I got the plugin to work like a normal drop down would be expected to easily enough, but now I am trying to use a callback to submit the form on selection of the option:

    Code:
    $('#menu').selectmenu({
    	style: 'dropdown',
    	change: function() {
    		$('#category').submit();
    	}
    });
    Here is the dropdown code:
    PHP Code:
    $menu "<div>";
    $menu .= "<form method=\"GET\" action=\"index.php\" id=\"category\">";
    $menu .= "<select name=\"page\" id=\"menu\">";
    $menu .= "<option>Select A Database</option>";
    $menu .= "<option value=\"option1\">Option 1</option>";
    $menu .= "<option value=\"option2\">Option 2</option>";
    $menu .= "<option value=\"option3\">Option 3</option>";
    $menu .= "</select>";
    $menu .= "<input type=\"hidden\" name=\"submit\" value=\"1\" />";
    $menu .= "</form>";
    $menu .= "</div>"
    I set a hidden variable named as submit because my script looks for 'submit' to be set to function, I don't believe this should be throwing anything off. I only did this because I couldn't figure out how to have javascript set the value of 'submit' for me.

    Current Behaviour:
    As is currently coded, the dropdown is transformed appropriately and functions as a dropdown should, so it would seem nothing is broken on the JS side. If I change the option on the dropdown, I get nothing happening - verified by Firebug's console... nothing at all occurs with JS on changing the selection. I tried using $('form').submit(); and $('form:first').submit(); as well to no avail. When I tried 'form:first', Firebug told me that it wasn't valid or recognised or something, so I can tell it sees something to be acted upon at least. Most every other way I tried to set it up broke the javascript.
    Last edited by Gremlyn1; 01-19-2010 at 05:25 PM.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Hey that's a nice plugin. I think I'll use it

    On reading the docs on it, it looks to me like you'd use the change event like this:

    PHP Code:
    $('#menu').change(function(){}); 
    Rather than listing "change" as an option in the selectbox initialization. I'm going to try it and see if it works.

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Fumigator View Post
    Hey that's a nice plugin. I think I'll use it

    On reading the docs on it, it looks to me like you'd use the change event like this:

    PHP Code:
    $('#menu').change(function(){}); 
    Rather than listing "change" as an option in the selectbox initialization. I'm going to try it and see if it works.
    Hmm, hadn't thought of trying it that way, I'll give it a shot too.

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    This worked:

    PHP Code:
    $(function() {

        $(
    '#menu').selectmenu({style:'dropdown'});
        
        $(
    '#menu').change(function() {
            $(
    '#category').submit();
        });
    }); 
    But, you've got to remove that hidden input named "submit"; that overrides the default submit behavior of the form, at least it does in Firefox. I'm not understanding what its purpose is anyway. The form submits fine using the code above.

  • Users who have thanked Fumigator for this post:

    Gremlyn1 (01-20-2010)

  • #5
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Fumigator View Post
    This worked:

    PHP Code:
    $(function() {

        $(
    '#menu').selectmenu({style:'dropdown'});
        
        $(
    '#menu').change(function() {
            $(
    '#category').submit();
        });
    }); 
    But, you've got to remove that hidden input named "submit"; that overrides the default submit behavior of the form, at least it does in Firefox. I'm not understanding what its purpose is anyway. The form submits fine using the code above.
    I need to assign a value to 'submit' for my PHP code to work correctly, I wasn't sure the hidden input would work properly, but can't seem to figure out how to add the value through JS.

  • #6
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    I just changed the PHP to look for the 'page' value being set instead of 'submit', though I would still like to know how to set a value for submit with the .submit() function.

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Way back when I ran into problems naming any form element "submit", never really knew why. So I decided to look into it...

    Turns out the DOM provides a method called "document.form1.submit" that comes along with every form that is defined. If you name an element inside that form "submit", it overrides (clobbers) this submit method, which breaks the normal form submit process we all know and love.

    Some guy explains is pretty well over at stackoverflow:

    http://stackoverflow.com/questions/8...t-break-things

    Bottom line, avoid using the reserved word "submit" when naming elements.

  • #8
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    Very interesting, thanks. I'll just avoid it entirely in the future.


  •  

    Tags for this Thread

    Posting Permissions

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