爲什麼我的JQuery-UI選項卡不能正確呈現？

這使我瘋狂。我是JQuery noob，這是我第一次使用它。我已經遵循了jQuery UI的網站的例子，但我的腳本片段給出了一個錯誤：爲什麼我的JQuery-UI選項卡不能正確呈現？

上線$("#tabs").tabs(); 錯誤：0x800a01b6 - 微軟JScript運行時錯誤：對象不支持屬性或方法「標籤」

所以，這就是我在做什麼。我正在開發一個ASP.NET MVC4網絡應用程序。 jQuery的腳本和樣式都在爲站點的默認捆綁，並在我的_Layout.cshtml「母版頁」被渲染，就像這樣：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" /> 
     @Styles.Render("~/Content/css") 
     @Styles.Render("~/Content/themes/base/css") 
     @Scripts.Render("~/bundles/modernizr") 
     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/jqueryui") 
    </head>

這是我的觀點：

@using Tigra.eStore.BusinessLogic.DomainObjects 
@model Tigra.eStore.Storefront.Models.ProductDetailsViewModel 

@{ 
    ViewBag.Title = "Details"; 
} 

<h2>Details</h2> 

<fieldset> 
    <legend>@Model.Product.Name</legend> 
    <div class="display-field"> 
     @Html.DisplayFor(model => model.Product.Name) 
    </div> 
</fieldset> 
<p> 
    @Html.ActionLink("Add to Cart", "Add", "ShoppingCart", new {id = Model.Product.Id}, new {}) 
    @Html.ActionLink("Back to List", "Index") 
</p> 

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

<div class="descriptors"> 
    <div id="tabs"> 
     <ul> 
      @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors) 
      { 
       <li><a href="#[email protected]">@descriptor.Title</a></li> 
      } 
     </ul> 
     @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors) 
     { 
      <div id="[email protected]"> 
       <p>@descriptor.Description</p> 
      </div> 
     } 
    </div> 
</div>

我敢肯定的是jQuery的UI是越來越加載，因爲它在運行時顯示出來，像這樣： Visual Studio shows the loaded scripts

它一定是簡單的東西 - 對不起，如果這是再明顯不過正如我所說，我是小白在這個東西。你能看到我做錯了什麼嗎？

來源

2012-09-16 Tim Long

所有測試的拳頭如果jqueryUI真的被加載：http://stackoverflow.com/a/2263412/617373，第二次檢查是否包含所有需要的JS/CSS，查看源代碼在這個例子http：// jsbin。 com/ocecu5 – Daniel

解決了！。

線索是在我的屏幕剪輯中，你可以看到jquery-1.7.1被加載了兩次。 Microsoft模板項目在_Layout.cshtml頁面的底部呈現jquery包。爲什麼？我不知道 - 但我忽略了它。所以我繼續將它添加到頁面的頂部，以及jquery-ui。看來，第二次渲染的jquery抹去了jquery-ui。

所以我的修復方法是從文件底部附近刪除@Scripts.Render("~/bundles/jquery")行，將我的頂部留下。奇蹟般有效。

現在我想知道爲什麼微軟把它放在底部？有任何想法嗎？

來源

2012-09-16 08:05:16

這裏是：[查詢腳本包含在頁面底部的mvc 4模板]（http://stackoverflow.com/questions/11437063/jquery-script-included-at-bottom-of-page-in- mvc-4-template） – webdeveloper

對於任何其他通過Google等發現的人來說，另一個原因是，如果你從默認的MVC模板創建一個項目，然後從NuGet包管理器更新jquery ui，那麼你會得到一個項目， RegisterBundles中的名稱是'〜/ bundles/jquery-ui'，但傳遞給Scripts.Render函數的包名是'〜/ bundles/jqueryui'（即沒有連字符）。 –

這樣做已經完成了保持性能的考慮。而不是改變立場

@Scripts.Render("~/bundles/jquery")

請按照下面的步驟。

在你的頁面佈局@Scripts後，添加：

@RenderSection("scripts", false)

然後在你看來它

@section scripts{ 
<script type="text/javascript> 
// view scriptt goes here 
</script> 
}

這部分可以來視圖HTML之前或之後，但之後會一直呈現。

來源

2013-08-23 15:46:41 Abhijit

爲什麼我的JQuery-UI選項卡不能正確呈現？

回答

相關問題