Jquery update div content in remote page before loading the page

Question

I have a remote page (mypage.html) with a selector in this page. I want to load this page to my bootstrapdialog as the dialog body, but I want to add options dynamically to the selector before loading.

remote page (mypage.html) code:

<form>
  <select id="zoneSelectPicker" class="form-control"
                name="availabilityZone" style="height: 3.0em;">
   </select>
</form>

Then I want to add using jquery

$.get('mypage.html', function(data) {
                $(data).find('#zoneSelectPicker')
                .append(
                    '<option value="us-east-1a">us-east-1a</option');
     BootstrapDialog.show({
        message: $('<div></div>').append($(data))
     });
});

But the options is still empty.

What's the question? If your going to say, why doesn't it work, [have you debugged it](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code)? — Liam, Oct 11 '16 at 13:55
Edited. The question is: I use BootstrapDialog to load mypage.html as dialog body. There is a selector in mypage.html, I want to dynamically add options to that selector. — Kai Liu, Oct 11 '16 at 14:06

score 0 · Accepted Answer · answered Oct 11 '16 at 14:27

data is presumably just a string. You are taking this string and creating a set of dom elements $(data) and manipulating the elements.

You are then taking the same string and creating a new set of dom elements...

var elements = $(data);
elements.find('#zoneSelectPicker').append('<option value="us-east-1a">us-east-1a</option>');

BootstrapDialog.show({
    message: $('<div></div>').append(elements)
});

Jquery update div content in remote page before loading the page

1 Answers1