Question

I have an issue with displaying jquery mobile popup. This is my code for popup, that’s returned from a servlet

 <a href='#popupBasic_1' data-rel='popup'
        style='text-decoration: none; background-color: red; display: block; width: 40px; height: 40px; text-align: center; position: absolute; font-size: 13px; font-weight: bold; color: white'>bill</a>
    <div data-role='popup' id='popupBasic_1'>
        <div style='height: 200px; width: 300px'>
            <div
                style='text-decoration: none; background-color: red; display: block; width: 40px; height: 40px; text-align: center; font-size: 13px; font-weight: bold; color: white'>bill</div>
            <div
                style='text-decoration: none; background-color: blue; display: block; width: 40px; height: 40px; text-align: center; font-size: 13px; font-weight: bold; color: white'>bob</div>
        </div>
    </div>

I’m trying to place it within this div tag in html

<div id="users"></div>

This is my ajax call to replace html

$.get(url).success(function(result) {
            //document.getElementById("users").innerHTML = result;
            $("#users").html("<code>" + result + "</code>");

I’ve tried both cases above and they display both elements inside the popup window on the page instead. If I take this popup code and place it manually within the div tag it works.

Any help is appreciated.

Answer 1

Try this:

$("#users").html(result).trigger("create");

jsFiddle