0

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

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：在此视图中添加ItemsBtn

  <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>
4

2 回答 2

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
    });
于 2013-08-23T07:52:41.160 回答
1

编辑：我下面的回答是在发布者更新他的原始帖子之前，所以它可能看起来无关紧要。如果有人遇到同样的问题，请尝试阅读评论:)

原帖：

你有“return false;” 在调用此代码之前：

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

它永远不会被调用。

编辑：您需要将选择器更改为 (".ITA")

编辑 2：Nicolae 是对的，把这段代码作为 load 调用的回调。我不明白为什么对话框库不支持 url 作为选项。

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

编辑4：顺便说一句，这行很奇怪： $(this).css('cursor', 'pointer'); 将css样式放在单击按钮之前而不是之后

于 2013-08-23T08:02:53.223 回答