Kai Liu Kai Liu - 1 month ago 6
jQuery Question

Jquery update div content in remote page before loading the page

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.

Answer

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)
});