WHy Doesnt This Javascript Function Work

Question

What I'm trying to do here is make one function that does all the functionality for a custom select element. So I made a function that accepts three parameters which are defined in the function itself (see code below for more detail). I'm trying to accomplish the following: I want the parameters to be the IDs of the various elements (the wrapper div for example), and I want those parameters to be dropped in the function. My Code is below. Thanks so much

function createList(ParentDivID,SelectMenuID,ListMenuID) {
            $('#' + ParentDivID + "'");
            $('#' + SelectMenuID + "'");
            $('#' + ListMenuID + "'");
            var options = $("#" + SelectMenuID +'"' ).find("option");

                $(options).each(function(){
                    $(ul).append('<li>' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></li>'); 
                    });
                var ul = '<ul id="' + ListMenuID + "></ul>";
                $('#' + ParentDivID + "'").append(ul).end().children('#' + ListMenuID + "'").hide().click(function(){$(ul).slideToggle();});
                $("#" + SelectMenuID + '"').hide();
        }
        createList(fancySelectLarge,selectWalkerType,walkerTypeLi);

what are fancySelectLarge,selectWalkerType,and walkerTypeLi? Are the variables that contain strings? — Mutt
– Mutt, Commented May 24, 2011 at 16:22
I suspect the issue is related, at least partially, with all those quotes-after-ids. Example: $('#' + ParentDivID + "'") should be $('#' + ParentDivID). — kikito
– kikito, Commented May 24, 2011 at 16:22
is fancySelectLarge a variable containing the id? or is that the actual id ? — Patricia
– Patricia, Commented May 24, 2011 at 16:23
Can you give some more info? What is this supposed to be doing, what is it doing and what is it not doing? Are there any errors? — Jared
– Jared, Commented May 24, 2011 at 16:23

Quentin · Accepted Answer · 2011-05-24 16:22:39Z

7

At a guess, it is probably because your ids don't end in quote characters (which aren't allowed in ids in HTML 4), but you are appending them to the strings you are searching for with jQuery.

answered May 24, 2011 at 16:22

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Mein · Accepted Answer · 2011-05-24 16:29:42Z

5

You only need to do your selectors like this

$('#' + ParentDivID);

Also you need to stop interchanging 's and "s because it is causing you to miss some closing quotes

    function createList(ParentDivID,SelectMenuID,ListMenuID) {
        var options = $('#' + SelectMenuID).find('option');

        $(options).each(function(){
            $(ul).append('<li>' + 
                $(this).text() + '<span class="value">' + 
                $(this).val() + '</span></li>'); 
        });

        var ul = '<ul id="' + ListMenuID + '"></ul>';

        $('#' + ParentDivID).append(ul).end().children('#' + ListMenuID).hide().click(function(){$(ul).slideToggle();});
        $('#' + SelectMenuID).hide();
    }

    createList(fancySelectLarge,selectWalkerType,walkerTypeLi); `

edited May 24, 2011 at 16:29

answered May 24, 2011 at 16:24

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

Comments

Code Maverick · Accepted Answer · 2011-05-24 16:23:53Z

3

You are messing up all of your string concatenations like:

$('#' + ParentDivID + "'"); should be $('#' + ParentDivID);

answered May 24, 2011 at 16:23

Code Maverick

20.5k12 gold badges65 silver badges117 bronze badges

Comments

Richard Dalton · Accepted Answer · 2011-05-24 16:29:45Z

1

It's generally a bit of a mess but I've tried to fix as much as possible.

function createList(ParentDivID,SelectMenuID,ListMenuID) {
        var options = $("#" + SelectMenuID).find("option");
        var ul = $('<ul>', {id: ListMenuID});
        $(options).each(function(){
            ul.append('<li>' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></li>'); 
        });
        $('#' + ParentDivID)
            .append(ul)
            .end()
            .children('#' + ListMenuID)
            .hide()
            .click(function() { ul.slideToggle(); });
        $("#" + SelectMenuID).hide();
}

answered May 24, 2011 at 16:29

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Comments

Michael Berkowski · Accepted Answer · 2011-05-24 16:24:40Z

1

When you call the function, are the three parameters already variables assigned elsewhere in your code? If not, and the are actually the string id attributes, you need to enclose them in quotes.

createList("fancySelectLarge", "selectWalkerType", "walkerTypeLi");

Note: See other valuable responses about the incorrect quoting in $('#' + ParentDivID + "'");

answered May 24, 2011 at 16:24

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Comments

Amy B · Accepted Answer · 2011-05-24 16:22:51Z

0

$(ul) is undefined when execution reaches it, because var ul is only declared a few lines later on. You will also need to use document.body.createElement('ul') instead of putting '<ul ...>' in a string.

Also, the lines $('#' + ParentDivID + "'"); don't do anything.

answered May 24, 2011 at 16:22

Amy B

18k12 gold badges66 silver badges83 bronze badges

Comments

rid · Accepted Answer · 2011-05-24 16:23:09Z

0

You need to define ul before using it. Also, define it as $('<ul.../>') not just '<ul.../>', so that you can create a jQuery element from that definition.

answered May 24, 2011 at 16:23

rid

64k31 gold badges159 silver badges201 bronze badges

Comments

Gijs · Accepted Answer · 2012-11-15 12:40:44Z

0

and you want also try to create the dom element like this

$('<span class="value">') instead of a string value '<span class="value">'.

edited Nov 15, 2012 at 12:40

Gijs

5,2401 gold badge29 silver badges42 bronze badges

answered May 24, 2011 at 16:23

Ben

2781 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

WHy Doesnt This Javascript Function Work

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related