使用$ .get加载弹出窗口 - Jquery Mobile

时间:2013-11-28 15:12:41

标签: javascript jquery html css jquery-mobile

我正在尝试从服务器加载一些数据。我有一些链接,当我点击它们时,我希望它们打开正确的相应弹出窗口,其中包含该数据。但弹出窗口只是在页面上显示为格式化文本。如果您查看他们包含<p>标记的代码。 loadPopups函数的结果是它只是将<p>标签打印到页面。没有弹出行为。

这是我获取弹出数据的代码

function loadPopups() {
    $.get("load.php", function(data) {
        data = $.parseJSON(data);
        var str = '';

        for( laxa in data.laxor) {
        var laxaArray = data.laxor[laxa];
        str += '' +
               '<div data-role="popup" id="' + (laxaArray.laxa_id + 'rubrik') + '">' +
               '<p>' + laxaArray.rubrik + '<p>' +
               '</div>' +
               '<div data-role="popup" id="' + (laxaArray.laxa_id + 'beskrivning') + '">' +
               '<p>' + laxaArray.beskrivning + '<p>' +
               '</div>' +
               '';
        }
    //alert('Data loaded');
    $("#popup_containor").html(str).page();
    });
}

然后将其添加到此<div>

<div id="popup_containor">
</div>

当我尝试使用在for循环中为每个弹出窗口指定的相同id显示弹出窗口时

<p><a href="#134rubrik" data-rel="popup">Hej</a><p>

没有发生。弹出窗口只是显示为没有<div data-role="popup">

感谢任何帮助

由于

1 个答案:

答案 0 :(得分:0)

为什么不将逻辑分开?

  1. 首先从服务器获取您想要的任何值。 让我们说var a ='来自服务器的字符串1',b ='字符串2'等等。

  2. 在页面中创建没有数据的功能弹出窗口。

    <a href="#134rubrik" data-rel="popup" data-role="button" data-inline="true">Done</a> <div data-role="popup" id="134rubrik" data-overlay-theme="b"> <p id="serverdata"> </p> </div>

  3. 使用JS或jQuery填充弹出窗口: document.getElementById('serverdata').value= a;