我试图让我的对话框中的项目可选择并在选择时运行更多 ajax答案

【问题标题】：I am trying to get items in my dialog box selectable and on selection run more ajax我试图让我的对话框中的项目可选择并在选择时运行更多 ajax
【发布时间】：2015-06-18 21:26:42
【问题描述】：

我有一个按钮表单搜索，点击它会执行一些 ajax，我将该数据附加到对话框中。我想让这些元素可选择并在选择时打开另一个对话框，该对话框深入了解更多细节。我正在使用 jquery 任何帮助将不胜感激。

html

<div class="row">
 &nbsp; <button onclick="return Search_All_Forms()" type="button" class="btn btn-primary btn-sm">Search Forms</button>
</div>
<div id="dialog" title="Search Forms">

</div>

javascript

function Search_All_Forms() {
  //if (getCookieValue('PAYREG') != '99') {
  $.ajax({
    type: "GET",
    url: baseAzureServiceUrl + "/api/dynamicforms/FormHeader/search",
    //data: { add_userid: getCookieValue('USERID'), empl_id: getCookieValue('EMPLID'), location: getCookieValue('LOCATION'), status: 'STARTED' },
    data: {
      add_userid: 'UJCOCKR'
    },
    dataType: "json",
    success: function(data) {
      $.each(data, function(index, elements) {
        var strTitle = elements.form_title;
        var intFormDatatHeaderID = elements.form_data_header_id;
        // alert(intFormDatatHeaderID);
        var html = '';
        html += '<ul id="selectable">';
        html += '<li>' + strTitle + '</li>';
        html += '</ul>';
        $("#dialog").dialog({
          autoopen: false,
          modal: true,
          draggable: true,
          position: [200, 150],
          dialogClass: "foo",
          show: {
            effect: 'fade',
            duration: 1000
          }
        });
        $(".ui-corner-all").css("background-color", "white");
        //$("#dialog").append(strTitle + "<br>");
        $("#dialog").dialog("open")
        $('#dialog').append(html)
        $('#selectable').selectable();
        //alert(data); 
      })
    }
  })
}

【问题讨论】：

在控制台中遇到任何错误？
不，先生，我不是我实际上得到了我的第一个对话框，其中包含我想要的项目列表我只是不知道如何使它们可选择。这就像向下钻取，他们选择一个按钮，显示他们从该对话框中选择的第一个对话框，然后显示他们从该对话框中选择的另一个对话框，然后他们得到最终结果。
首先，如果您返回了多个可选对象，您应该使用类而不是 ID（如 class='selectable' 而不是 id='selectable'）ID 应该是对页面上的一个元素唯一。这也会将可选函数调用更改为 $('.selectable').selectable();
谢谢你，我会尝试类似的东西

标签： jquery html ajax dialog

【解决方案1】：

我不确定您的确切问题，但是当您将元素附加到文档时，您可以使用event delegation 将事件处理程序附加到这些元素。像这样：

$(document)
     .on("click","#selectable li", function(e){
           $("#dialog").dialog.("open");
     });

自动打开的对话框选项拼写为autoOpen 而不是autoopen。另外：

 $("#dialog").dialog("open"); //<-- wrong order i thing
 $('#dialog').append(html);

应该是：

 $('#dialog').append(html);
 $("#dialog").dialog("open");

如果你离解决问题更近了，请告诉我

【讨论】：

当然还有用.class而不是#id生成元素。忘记了：P

【解决方案2】：

在您的 dialog() 调用之后，您可以使用类似的方法让新的 .selectable 元素在单击时生成它们自己的对话框：

$('.selectable').selectable({
    selected:function(e, ui){
        var eleText = $(ui.selected).text();
        var addText = "";
        switch(eleText){
            case "Test":
                addText = "Here's a brief description of the selected Test element.";
                break;
            case "E2":
                addText = "Here's some more information on the E2 element.";
                break;
        }
        $('<div>').text(addText).dialog();
    }
});

当然，您可以不使用 switch 语句，而是通过 ajax 将元素文本（或 ID，如果您使用它们）传递给服务器，并使用来自响应的信息作为新对话框中的描述 - 但这是真的只有当您不希望信息一开始就放在客户端的 PC 上时（例如，如果有大量文本或图像会减慢对页面的初始调用速度）。

【讨论】：