2012-11-05 79 views
2

現在我知道它已被問過,但我似乎無法讓JQUERY對話框工作。jquery對話框在MVC中不起作用

我有一個簡單的例子,我從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" /> 
      <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
      <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> 
      @Styles.Render("~/Content/css") 
      @Scripts.Render("~/bundles/modernizr") 
     </head> 
     <body> 
      <header> 
       <div class="content-wrapper"> 
        <div class="float-left"> 
         <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p> 
        </div> 
        <div class="float-right"> 
         <section id="login"> 
          @Html.Partial("_LoginPartial") 
         </section> 
         <nav> 
          <ul id="menu"> 
           <li>@Html.ActionLink("Home", "Index", "Home")</li> 
           <li>@Html.ActionLink("About", "About", "Home")</li> 
           <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </header> 
      <div id="body"> 
       @RenderSection("featured", required: false) 
       <section class="content-wrapper main-content clear-fix"> 
        @RenderBody() 
       </section> 
      </div> 
      <footer> 
       <div class="content-wrapper"> 
        <div class="float-left"> 
         <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p> 
        </div> 
       </div> 
      </footer> 

      @Scripts.Render("~/bundles/jquery") 
      @RenderSection("scripts", required: false) 
     </body> 
    </html> 

我Index.cshtml頁

<div id="dialog" title="Basic dialog"> 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
    </div> 

<script type="text/javascript"> 
    $(function() { 
     alert("HELLO"); 
    }); 
</script> 

    <script type="text/javascript"> 
     $(function() { 
      $("#dialog").dialog(); 
     }); 
    </script> 

警報彈出,但該對話框並沒有任何想法,爲什麼?

編輯:做了一些編輯,現在我有這個。

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     alert("HELLO"); 
    }); 
</script> 

<script type="text/javascript"> 
    $(function() { 
     alert("HELLO2"); 
    }); 
</script> 

<script type="text/javascript"> 
    $(function() { 
     $("#dialog").dialog(); 
    }); 
</script> 

<script type="text/javascript"> 
    $(function() { 
     alert("HELLO3"); 
    }); 
</script> 

現在,當我有三個警報,它會如果我把對話腳本上方HELLO3腳本它會顯示所有3個警報提醒HELLO和HELLO2但它從來不HELLO3 ..但是。任何想法是怎麼回事?

回答

1

它只是通過自身找到:http://jsfiddle.net/Dy2Xw/

檢查您的腳本,以確保它們正常加載。另外,它看起來你正在加載jQuery基礎js兩次。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 

<script src="http://code.jquery.com/jquery-1.8.2.js "></script> 

您也有兩個CSS文件 - 不知道你爲什麼會需要這兩個的:

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/themes/base/jquery.ui.dialog.css")" rel="stylesheet" type="text/css" /> 

清理這些腳本的負載,檢查控制檯任何的js錯誤,在只有你需要並再次嘗試。

+0

清除它,我發現它可以與JSFIDDLE一起使用,但我無法理解它爲什麼在我的應用程序中不起作用。我很確定這些腳本的加載是正確的,因爲如果它們不是,那麼HELLO警報不起作用。 – Claud

+0

順便提一句,沒有錯誤,但是如果我看到我的編輯版本,如果我將對話腳本放在警報#2和#3之間,它似乎沒有達到警報#3。有任何想法嗎? – Claud

+0

@ Claud25'alert'是jquery'ready'函數中包裝的基本js。不像「對話框」那樣,它不需要jQuery UI。檢查腳本是否正確加載並刪除任何不必要的腳本。在你的代碼示例中,你有兩個不同版本的jquery加載和兩個不同版本的jquery ui加載。清理這些。你不需要兩個。清理CSS以及。 –

0

也許它與</body><head>標記之前的js文件的位置有關。將@Scripts.Render("~/bundles/jquery")移動到<head></head>標記