MVC에서 jquery UI가 작동하지 않습니다

Question

하루 종일 노력했지만이 작업을 수행 할 수 없습니다. 여기에 내 설정이 있습니다 :

jQuery 2.1.3 및 jQuery.UI.Combined 1.11.2가 설치되어 있습니다. 그러나

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css", 
         "~/Content/themes/base/jquery.ui.resizable.css", 
         "~/Content/themes/base/jquery.ui.selectable.css", 
         "~/Content/themes/base/jquery.ui.accordion.css", 
         "~/Content/themes/base/jquery.ui.autocomplete.css", 
         "~/Content/themes/base/jquery.ui.button.css", 
         "~/Content/themes/base/jquery.ui.dialog.css", 
         "~/Content/themes/base/jquery.ui.slider.css", 
         "~/Content/themes/base/jquery.ui.tabs.css", 
         "~/Content/themes/base/jquery.ui.datepicker.css", 
         "~/Content/themes/base/jquery.ui.progressbar.css", 
         "~/Content/themes/base/jquery.ui.theme.css")); 

에서 ~/콘텐츠/테마/기본/이름이 누락 BundleConfig.cs

에서

"jquery.ui." 접두사. 내 레이아웃에서

난이 :

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 

내가 그 JQuery와 및 JQuery와 UI를 확인할 수 있습니다

가 불을 지르고에서 보면 페이지에로드하지만 난 내가 갖는 기능 dialog() 및 오류를 호출 할 때 말 그것은 기능이 아닙니다.

<td> 
        <div style="width:100px;height:30px; background:#009814" onclick="showPopup(this)"> </div> 
        <div style="position:relative" class="input-group"> Indicatoris go here </div> 
</td> 

    function showPopup(elem) 
      { 
       var el = $(elem); 
       //el.siblings()[0] it has only 1 sibling (a div) 
       el.siblings()[0].dialog({ 
        autoOpen: false 
       }); 
       el.siblings()[0].dialog('open'); 
      } 

무엇이 잘못 되었나요?

Answer 1

코드에 몇 가지 문제가 있습니다. 첫째, 나는 onclick 핸들러를 사용하지 말고 jquery click 이벤트를 사용하는 것이 좋겠지 만, 나는 그것에 대해 하프하지 않을 것이다.

스크립트가 적절한 스크립트 블록에 있다고 가정합니다. 그렇지 않으면 스크립트 블록을 사용해야합니다.

다음으로는 el.siblings()[0] 코드가 jQuery 객체가 아니라 HTML Dom DIV 객체를 반환하고 jQueryUI가 jQuery 객체에서 작동하여 대화 상자를 찾을 수없는 문제가 있습니다. 이것은 쉬운 수정입니다.

function showPopup(elem) 
     { 
      var el = $(elem); 
      //el.siblings()[0] it has only 1 sibling (a div) 
      var sib = $(el.siblings()[0]).dialog({ 
       autoOpen: false 
      }); 
      sib.dialog('open'); 
     } 

그래서, 문제가 MVC와 아무 상관이있다, 또는 번들링, 또는 그것이 ... 단순히 나쁜 jQuery 코드라고 생각 다른 문제의과.