Question

为什么我的对话框没有弹出？

的jQuery

    $('.ITA').dialog({
    autoOpen: false,
    draggable: true,
    width: 400,
    resizable: false,
    dialogClass: "ui-dialog",
    modal: true,
   // show: { effect: 'fade', duration: 300 }
  });

 $(".AllItemsBtn").on("click", function (e) {
    e.preventDefault();
   // $(this).css('cursor', 'pointer');
    var url = $(this).attr('href');
    alert(url);
    $('.ITA').load(url, function () {
        $('.ITA').dialog("open");

    });
   });

控制器

  public ActionResult GetItemsToAdd()
    {
        var Uid = WebSecurity.GetUserId(User.Identity.Name);

        var UserItems = from i in db.Items
                        where i.user_id == Uid 
                        select i;

        var results = UserItems;

        return PartialView("_AllItemsPartial", UserItems );
    }

VIEW _AllItemPartial：加载到对话框中的视图

@model IEnumerable<Item>

<style>
.ui-dialog,.ui-dialog,.ui-widget, 
.ui-widget-content, .ui-corner-all, 
.ui-draggable, 
.ui-resizable {background-color:#ffd800 !important;

}


</style>

@foreach (var item in Model)
{ 
<ul>
    <li>
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
</ul>
 }

在此视图中查看_ItemPartial：addItemsBtn

  <div id="tradeItem">

 @foreach (var item in Model)
{ 
<ul>
    <li>
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
</ul>


}
</div>

  <a class="AllItemsBtn" id="AllItemsBtn" href='@Url.Action("GetItemsToAdd")' >Add 
 File...</a>

 <div class = "ITA">/*load to this div*/</div>

Answer 1

将您的选择器更改为类，'ITA'是我看到的类，而不是ID

变化

$('#ITA')...

到

$('.ITA')...

编辑：

而不是这个：

$('#ITA').load(url, function () {
    });

尝试添加：

$('.ITA').load(url, function () {
      $('.ITA').dialog("open"); // on success load, try to open the dialog here
    });

Answer 2

编辑：我的回答是在海报更新原始帖子之前，所以看起来似乎无关紧要。如果有人遇到同样的问题，请尝试阅读评论：）

原帖：

你有“回归假”;在你调用这段代码之前：

$('#ITA').dialog({
autoOpen: false,
draggable: true,
width: 'auto',
resizable: false,
dialogClass: "ui-dialog",
modal: true,
show: { effect: 'fade', duration: 300 } });

永远不会被召唤。

编辑：您需要将选择器更改为（“。MA”）

编辑2：Nicolae是对的，将此代码作为回调加载调用。我不明白为什么对话框库不支持url作为选项。

编辑3：您还需要在事件上调用preventDefault（），以便锚标记不会重定向您的浏览器

编辑4：顺便说一下，这条线很奇怪： $（this）.css（'cursor'，'pointer'）;

后点击按钮之前放置css样式

jquery对话框没有显示视图没有404只是空白屏幕mvc 4

2 个答案: