jQuery Mobile和MVC3自動提交

如果我把jQuery Mobile置之度外，下面的代碼完美地工作！jQuery Mobile和MVC3自動提交

形式：

@using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" })) 
{ 
    @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town") 
}

的JavaScript：

<script type="text/javascript"> 
    $(function() { 
     $("#TownID").live('change', function() { 
      //$("#TownID").change(function() { 
      var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val(); 
      $('#TheForm1').attr('action', actionUrl); 
      $('#TheForm1').submit(); 
     }); 
    }); 
</script>

但是，如果我換行jQuery Mobile的現場周圍，然後我每次提交表單，在我的日誌只它會一次又一次地將ID字段粘貼到URL字符串的末尾。這隻發生在我的日誌中，而不是在瀏覽器中。在瀏覽器中，它仍然看起來喜歡它正在做正確的事情！例如。

www.mysite.com/Home/SearchTown/2首次

www.mysite.com/Home/SearchTown/2/2所述第二時間

WWW .mysite.com /主頁/ SearchTown/2/2/2第三次

但在瀏覽器中它仍然看起來正確www.mysite.com/Home/SearchTown/2

爲什麼jQuery Mobile會這樣做？

來源

2012-04-24 Bojangles

Iv'e離開了這一個足夠長了，沒有人有答案！

來源

2012-05-27 10:05:12 Bojangles

這很可能發生，因爲每次POST表單時，它都使用AJAX加載響應，並且加載的頁面在其中重複了元素ID。

我在這裏猜測，但基於你所描述的，它聽起來像你的表單發回到一個頁面上有相同的形式標記。每當您的表單帖子呈現下一頁時，您將獲得另一個#TheForm1添加到您的DOM（因爲jQuery Mobile保留之前在DOM中加載的頁面並且簡單地在活動的data-role="page"元素之間交換）。由於這種行爲，一旦頁面上有多個#TheForm1，選擇器$('#TheForm')將永遠只返回與該ID相匹配的DOM中的第一個元素 - 這將是您第一次發佈的表單。因此，每次發佈時，代碼都將使用最初修改的表單元素的action屬性 - 這就是爲什麼您會看到多個值附加到URL中的原因。

在jQuery Mobile的，幾乎總是更好地確定使用一個類名稱和活動頁面的容器元素，因爲你永遠不知道多少次的ID可能跨多個頁面的變化DOM重複。因此，不要使用$('#TheForm1')，請指定一個類名並將其與$.mobile.activePage：$('.Form1', $.mobile.activePage)結合使用。（你的選擇框也是一樣）。

作爲一種替代方法，您可以通過將data-ajax="false"添加到表單標記來告訴jQuery Mobile不增強您的表單。這會導致它像沒有任何AJAX的正常的完整頁面回傳。

編輯

我在第3段提出的一點是，你需要確保你總是選擇正確的表單元素爲當前可見的頁面，而不是無意中返回一個是從隱藏視圖。全局變量$.mobile.activePage將爲您提供當前可見頁面的上下文，然後基於類的選擇器（而不是基於Id）將確保在更改處理程序中檢索到正確的表單元素。事情是這樣的：

<form class="town-form" action="#"> 
    <select class="town-selector"> 
     <option value="1">Town A</option> 
     <option value="2">Town B</option> 
     <option value="3">Town C</option> 
    </select> 
</form> 

<script type="text/javascript"> 
    $(function() { 
     $(".town-selector").live('change', function() { 
      var form = $('.town-form', $.mobile.activePage); 
      var actionUrl = form.attr('action') + '/' + $(this).val(); 
      form.attr('action', actionUrl); 
      alert('submitting to: ' + form.attr('action')); 
      form.submit(); 
     }); 
    }); 
</script>

來源

2012-04-24 02:23:04

我瞭解DOM所發生的一切，但您能否向我展示第三段中所說的內容？ – Bojangles 2012-04-24 08:34:06

，因爲您所提交的孔頁和jQuery移動不是做花哨這樣的事情，每個POST後，它只是附加標識加入document.location ...我已經瞭解到，在一些移動項目...

，而不是這一行$('#TheForm1').submit();做這樣的事情：

var url = $('#TheForm1').attr('action') + '/' + $('#TownID').val(); 

$.post(url, $('#TheForm1').serialize(), function(data) { 
    // do something with data if you send back something... 
    // or just change page with jQuery Mobile API 
}); 

return false;

來源

2012-04-24 19:09:09 balexandre

jQuery Mobile和MVC3自動提交

回答

相關問題