部分視圖的jQuery對話框不打開模式

Question

我已經構建了一個jQuery對話框來顯示輸入數據的部分視圖。

我已經建立了操作鏈接：

@Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null, new { @class = "addServiceProviderLink" }) 

我有控制作用：

public ActionResult PartialNewCust() 
     { 
     return PartialView(); 
     } 

而且DIV/jQuery代碼：

<div id="AddServiceProvDialog" title="Add Service Provider"></div> 


<script type="text/javascript"> 
var linkObj; 
$(function() { 
    $(".addServiceProviderLink").button(); 

    $('#AddServiceProvDialog').dialog(
    { 
     autoOpen: false, 
     width: 400, 
     resizable: false, 
     modal: true, 
     buttons: 
     { 
      "Add": function() { 
       $("#addProviderForm").submit(); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".addServiceProviderLink").click(function() { 
     linkObj = $(this); 
     var dialogDiv = $('#AddServiceProvDialog'); 
     var viewUrl = linkObj.attr('href'); 
     $.get(viewUrl, function (data) { 
      dialogDiv.html(data); 
      //validation 
      var $form = $("#addProviderForm"); 
      // Unbind existing validation 
      $form.unbind(); 
      $form.data("validator", null); 
      // Check document for changes 
      $.validator.unobtrusive.parse(document); 
      // Re add validation with changes 
      $form.validate($form.data("unobtrusiveValidation").options); 
      //open dialog 
      dialogDiv.dialog('open'); 
      return false; 
     }); 

    }); 

}); 

局部視圖渲染罰款但會打開一個新頁面，並不會作爲模態對話框出現。

我在做什麼錯。

在一個側面說明：我的自動完成代碼也不會被我的jQuery日期時間選擇器工作時...

$(document).ready(function() 
{ 
$(".date").datepicker(); 
} 
); 


$(document).ready(function() { 
$("#CustByName").autocomplete(
    { 
     source: function (request, response) { 
      $.ajax(
      { 
       url: "/Cases/FindByName", type: "GET", dataType: "json", 
       data: { searchText: request.term, maxResults: 10 }, 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.CustomerName, 
          value: item.CustomerName, 
          id: item.CustomerID 
         } 
        }) 
        ); 
       } 
      }); 
     }, 
     minLength: 3 
    }); 

}); 

Answer 1

我的猜測是，你在按鈕的點擊處理程序弄丟了return false聲明，因此默認當你想到的是沒有阻止行爲，並鏈接被簡單地遵循：

$(".addServiceProviderLink").click(function() { 
    ... 
    $.get(viewUrl, function (data) { 
     dialogDiv.html(data); 
     ... 
     dialogDiv.dialog('open'); 

     // this return statement should be in the "click" handler, 
     // not in success callback of the .get() method ! 
     return false; 
    }); 

}); 

你的代碼應該然後是：

$(".addServiceProviderLink").click(function() { 
    ... 
    $.get(viewUrl, function (data) { 
     ... 
    }); 

    // return here to prevent default click behavior 
    return false; 
});