2013-08-16 24 views
1

我真的希望有人能夠提供幫助。我剛剛在我目前的項目中遇到了一個大障礙,只打了另一個。我有一個快速接近的截止日期,所以任何建議將非常感激。在iPad上動態渲染局部視圖

我正在爲使用MVC4和Jquery Mobile的iPad開發移動應用程序。在我的應用程序的某個時間點,用戶將觸發一個彈出框,其中包含「是」和「否」按鈕。如果用戶點擊「是」,我想發送一些參數給我的控制器中的一個動作,做一些數據庫工作,然後返回將在我的主視圖中顯示的局部視圖(具有更新的模型)。我點擊了一個彈出窗口中的href按鈕來執行下面的jquery。

$(function() { 
     $("#popupSubmit").bind("tap", tHandler); 

     function tHandler(event) { 
      $.post('@Url.Action("LoadTestData", "WO")', 
      {TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML }, 
      function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); }); 
      } 
    }); 

在上面的代碼,#popupSubmit是在href按鈕,LoadTestData是返回的局部視圖的動作,WO是控制器,和#detailsDiv是在主視圖中的佔位符的div。 TestKey和TestRequestNumber是必須傳遞給Action的參數。下面是Action,LoadTestData的代碼。 _ShowTestPartial是部分視圖。

[HttpPost] 
    public ActionResult LoadTestData(string TestKey, string TestRequestNumber) 
    { 
     //do database work 
     return PartialView("_ShowTestPartial", model); 
    } 

現在,所有這些代碼都可以在我的Safari桌面上運行。但是,這不適用於iPad。我已經測試過了,當iPad上的按鈕被點擊時,代碼確實會將它放到tHandler事件中,但是有一些關於URL.Action或關於以這種方式返回iPad不喜歡的部分視圖。

有誰知道如何解決這個問題的iPad?

編輯(來自評論的其他信息):爲了清楚起見,部分視圖在iPad上完全不呈現,但它在桌面Safari上(以及在Chrome中)。我嘗試用「pagecreate」替換「create」,但這實際上在桌面瀏覽器中取消了JQM樣式,並沒有改變有關iPad的任何內容。

它似乎並不重要,我放置綁定函數的位置......我試過它作爲一個單獨的函數。我已經在.ready()和.on('pageinit')中試過了。在所有這些情況下,它適用於桌面Safari和Chrome,但不適用於iPad。

另外,正如我之前所說的,.bind(「tap」)可以在iPad上使用。我已經通過在tHandler中添加其他代碼進行測試。然而。$ post中的某些內容在iPad上不起作用。

謝謝奧馬爾和其他任何有任何想法的人。都歡迎!

編輯#2:在Omar的建議下,我將函數移到$(document).on('pageinit')。我還在$ .post上添加了錯誤捕獲。更新代碼如下:

$(document).on('pageinit', function() {   
     $("#popupSubmit").bind("tap", tHandler); 

     function tHandler(event) { 
      $.post('@Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML }) 
      .done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); }) 
      .fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); }) 
     } 
    }); 

幸運的是,這讓我看到了iPad上發生的錯誤。不幸的是,$ .post出現的錯誤是「處理您的請求時發生未知錯誤」。使用此代碼,桌面瀏覽器中的所有內容仍能順利運行。

+0

這是一個重複的問題,請刪除一個,如果他們。新內容沒有增強?究竟發生了什麼?截圖將不勝感激。重要提示:不要在JQM中使用'$(function)'或'.ready()'。 – Omar

+0

@Omar尊敬的先生,這不是一個重複的問題(至少如果你在談論我自己寫的問題)。我昨天回答了自己的問題,這讓我意識到了這一點,現在這是一個不同的問題(即現在它在桌面上運行,我如何才能在iPad上運行它)。就目前情況而言,部分視圖根本不會在iPad上加載。你有什麼建議替換$ function和.ready()?請注意,此時,$函數不在.ready()中。 – user2163572

+0

我的不好,我在看到答案之前發佈了評論。你使用什麼版本?正如我在之前的評論中提到的,不要使用.ready,並嘗試將代碼綁定到'pageinit'。 '$(document).on('pageinit',function(){code});'。並嘗試'pagecreate'而不是'create'。 JQM很棘手,因此_trial和error_是你最好的朋友。 – Omar

回答

0

事實證明,答案是,在iPad上的參數沒有傳遞給$ .post。 lblTestRequestNum和lblTestKey是我的JQM彈出對話框中的標籤。見下:

<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false" 
     style="max-width:416px;" class="ui-corner-all"> 

      <div data-role="header" data-theme="a" class="ui-corner-top"> 
       <h1>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">@Model.TestRequestNumber</label></h1> 
      </div> 
      <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">  
       <h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>        
       <label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>     
       <label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label> 
       <label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>     
       <a id="popupSubmit" data-role="button" data-inline="true" data-rel="back" 
       data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a> 
       <a href="#" data-role="button" data-inline="true" data-rel="back" 
        data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a> 
      </div> 

    </div> 

在桌面上,Safari能夠從彈出窗口中的標籤中檢索我需要的參數。但在iPad上,它不能。所以,我只是在我的主視圖中找到彈出窗口以外的地方來顯示/檢索我的參數。獲得的經驗:不要指望iPad能夠在彈出對話框中的標籤/輸入中讀取任何內容。