如何为json中的每条记录创建Jquery UI对话框

时间:2013-09-14 10:23:54

标签: jquery json jquery-ui dialog

我必须从数据库中获取数据,并且对于每个记录我想要显示不同的对话框。 我尝试下面的代码,但没有工作......我应该动态创建吗?

我的代码中缺少什么?

 $.getJSON("jsonfile.php", function(json){ 
    $.each(json, function (key, val) {
      $.each(val, function (key, val1) {
             if(key=='rem_doc_deal_ref')
          {
        $('#rem_doc_deal_ref').text(val1);
          }
       $( "#dialog_rem_doc" ).dialog({
       buttons: {
      "Ok!": function() {
       $( this ).dialog( "close" );
       },
      Cancel: function() {
      $( this ).dialog( "close" );
       }
     }
    });
    });
  });
});

这是我的JSON

[{"id":"27","rem_doc_deal_ref":"RH-D-139"},{"id":"43","rem_doc_deal_ref":"RH-D-140"},{"id":"41","rem_doc_deal_ref":"RH-D-144"},{"id":"55","rem_doc_deal_ref":"RH-D-157"},{"id":"33","rem_doc_deal_ref":"RH-D-158"},{"id":"22","rem_doc_deal_ref":"RH-D-233"}}

这是我的HTML

<div id="dialog_rem_doc" title="Reminder Alert" style="display:none;">
    <span id="rem_doc_deal_ref"></span>
</div>

1 个答案:

答案 0 :(得分:0)

以下是动态添加对话框的方法。

$.getJSON("jsonfile.php", function(json){ 
    $.each(json, function (key, val) {
        var deal_ref = val.rem_doc_deal_ref;
        $('<div title="Reminder Alert" style="display: none;">' + deal_ref + '</div>')
            .appendTo('#container').
            .dialog({
                buttons: {
                    "Ok!": function() {
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
    });
});

我遗漏了DIV的id属性,因为它们必须是唯一的。由于这些是动态添加的,我不知道你是否需要ID。如果这样做,您可以通过将key附加到前缀来创建唯一ID。我也省略了<span>;它看起来像是将html放在原始代码中的地方,但现在没有必要。您可以将其添加回要附加的HTML。

请注意,您不需要使用$.each来处理JSON数组中对象的内容。只需按属性名称val.rem_doc_deal_ref访问它们。