jQuery Append Not Recognizing Element in jQUery Loaded Partial View

Question

Hopefully this makes sense...

I have a page that loads up a dialog box. The shell of the dialog box actually resides in the HTML of the main page (display:none). In the dialog box I have a partial view loaded up via the following call.

$('.partial').load(url, function (html) { $('.partial')[0].value = html; });

This partial view has two select boxes. When the first one is changed the second should be populated via a .getJason call. That call is below.

$.getJSON(url, function (result) {
    var dropList = $("#select");
    var options = "";
    $.each(result, function () {
        options += '<option value="' + this.ID + '">' + this.Name+'</option>';
    });

    $("#select2").empty().append(options); // doesn't work located on the partial view
    $("#test2").empty().append(options); // works located on main page
});

The .getJason call is called via a function with onChange="populateSecondSelect()" since the partial view is loaded after the page is initially loaded (the .on won't work in this situation).

The problem is the part where I am trying to load the options into the second select. The jQuery .append doesn't recognize the element. I know the calls are working because when I try and load the values in the "Test2" on the main page it works.

How can I get the jQuery to recognize the element to .append on that loaded partial view?

ljfranklin · Accepted Answer · 2013-05-11 02:01:29Z

1

You are correct that normally the on method will not work if the content is loaded at a later time. However, the on method can be attached directly to the document object which allows events to be attached to selectors even if they haven't yet been added to the DOM.

$(document).on("change", "#select", populateSecondSelect);

While this method is needed to bind events to dynamically loaded elements, simply selecting an element and appending html should work as expected. I suspect there may be a problem elsewhere in your code. Try posting a JSFiddle of a more complete example of your code.

answered May 11, 2013 at 2:01

ljfranklin

4803 silver badges12 bronze badges

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

1 Comment

ZombieCode Over a year ago

I changed the code around to work with the $(document).on and got that to work. Thank you. But the fact still remains that the append that fills the second select isn't working. Any thoughts how to modify the function to append with a .on or something similar?

ZombieCode · Accepted Answer · 2013-05-11 06:35:55Z

0

Okay, I have come up with a workaround. The idea is that I need to populate the second select box and since I need to bind it with the docuemnt.on call I used the mousedown on the actual select statement.

$(document).on("mousedown", "#select2", function (){
    if(options != "") {  // that options is "global"
        $(this).empty().append(options);
        options = "";
    }      
});

This totally populates it. Great, Yay! Now, the issue is that the second select choice will show when the first selection is changed. I guess this will have to do. :(

answered May 11, 2013 at 6:35

ZombieCode

1,6583 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

jQuery Append Not Recognizing Element in jQUery Loaded Partial View

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related