2013-03-28 48 views
0

這僅僅是我,但對於jQuery手機,我似乎邁出了一步,前進了兩步?jQuery UI自動完成和jQuery Mobile - 讓我瘋狂

我想要做的是讓自動完成選項工作。我嘗試使用jQuery Mobile.AutoComplete並且無法使其工作,所以我想使用jQuery ui.autocomplete。

使用Asp.net MVC,我有一個共享頁面。

,我渴望能夠得到這個工作,請幫助(如果使用jQuery的工作自動完成移動選項不在乎是最好的)....

<head> 
    ... 
    <script src="~/Scripts/JQuery/jquery.1.9.1.min.js"></script> 
    <script src="~/Scripts/JQuery/UI/jqueryUI-1.10.2.min.js"></script> 

    <script src="~/Scripts/JQuery/Mobile/jquery.mobile-1.3.0.min.js"></script> 
    <script src="~/Scripts/DateValidation.js" type="text/javascript"></script> 
    <script src="~/Scripts/JQuery/UI-TimePicker/jquery.ui.timepicker.js"></script> 
    <script> 
    $.ajaxSetup ({ 
    // Disable caching of AJAX responses 
    cache: false 
    }); 
    </script> 
</head> 

然後,我有一個菜單(共享)

<div data-theme="b" data-role="header"> 
    <script type="text/javascript"> 

      $(function() { 
       $("#clientSearch").autocomplete({ 
        source: "@Url.Action("ClientSearch","Schedule")", 
       minLength: 3, 
       select: function (event, ui) { 

        $("#clientSearch").val(ui.item.ClientName); 
        $("#clientSearchId").val(ui.item.ClientId); 

        return false; 
       } 
      } 
     ).data("uiAutocomplete") 
      ._renderItem = function (ul, client) { 
       return $("<li></li>") 
        .data("item.autocomplete", client) 
        .append("<a>" + client.FullName + "</a>") 
        .appendTo(ul); 
      }; 
     }); 

    </script> 
    <h3>Schedule</h3> 
    <a href="index.html" data-icon="plus" class="ui-btn-right"data-iconpos="notext">Appointment</a> 
    <input type="hidden" id="clientSearchId"/> 
    <input name="clientSearch" id="clientSearch" placeholder="" value="" type="search"> 
     <div data-role="navbar" data-iconpos="top"> 
      <ul> 
       <li> 
        <a href="~/Home/Index" data-transition="slide" data-theme=""> 
         Home 
        </a> 
       </li> 
       <li> 
        <a href="/Schedule/MobileSchedule" data-transition="slide" data-theme=""> 
         Schedule 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 

所以頁面看起來就像這樣

@{ 
    ViewBag.Title = "Home"; 
    Layout = "~/Views/Shared/_AppHomeLayout.cshtml"; 
} 

<div data-role="page" id="pageHome"> 
    <style> 
     .ui-listview-filter-inset { 
      margin-top: 0; 
     } 
    </style> 

    @RenderPage("~/Views/Shared/_MobileMenu.cshtml") 
    <div data-role="content"> 
     <div data-role="content"> ... </div> 
    </div> 
</div> 

加載T當我得到以下錯誤他頁:

Uncaught Error: NotFoundError: DOM Exception 8 jquery.1.9.1.min.js:11 (anonymous function) jquery.1.9.1.min.js:11 b.fn.extend.domManip jquery.1.9.1.min.js:11 b.fn.extend.replaceWith jquery.1.9.1.min.js:11 (anonymous function) jquery.mobile-1.3.0.min.js:2 b.extend.each jquery.1.9.1.min.js:4 b.fn.b.each jquery.1.9.1.min.js:4 (anonymous function) jquery.mobile-1.3.0.min.js:2 b.event.dispatch jquery.1.9.1.min.js:4 v.handle jquery.1.9.1.min.js:4 b.event.trigger jquery.1.9.1.min.js:4 (anonymous function) jquery.1.9.1.min.js:11 b.extend.each jquery.1.9.1.min.js:4 b.fn.b.each jquery.1.9.1.min.js:4 b.fn.extend.trigger jquery.1.9.1.min.js:11 a.Widget._trigger jquery.mobile-1.3.0.min.js:2 a.Widget._createWidget jquery.mobile-1.3.0.min.js:2 a.widget._createWidget jquery.mobile-1.3.0.min.js:2 (anonymous function) jquery.mobile-1.3.0.min.js:2 a.(anonymous function).(anonymous function) jquery.mobile-1.3.0.min.js:2 (anonymous function) jquery.mobile-1.3.0.min.js:2 b.extend.each jquery.1.9.1.min.js:4 b.fn.b.each jquery.1.9.1.min.js:4 a.fn.(anonymous function) jquery.mobile-1.3.0.min.js:2 C jquery.mobile-1.3.0.min.js:2 a.mobile.allowCrossDomainPages.h.isSameDomain.a.ajax.success jquery.mobile-1.3.0.min.js:2 c jquery.1.9.1.min.js:4 p.fireWith jquery.1.9.1.min.js:4 k jquery.1.9.1.min.js:19 r

想法?它看起來像試圖使用jQuery移動自動完成,如果任何人有一個soloution \代碼示例修復,它會幫助我這麼多!

回答

0

變化這條線在括號內的報價從雙單,像這樣:

source: "@Url.Action('ClientSearch','Schedule')", 
+0

我試過了,現在得到HttpCompileException – 2013-03-28 09:43:24

+0

嘗試通過定期更換全@ Url.Action(...)來測試路徑URL – bodi0 2013-03-28 09:44:23

+0

我不認爲它的路徑,但jQuery文件,我嘗試過沒有運氣 – 2013-03-28 15:24:17