2012-04-22 58 views
1

我有一個動態的MVC4,jQuery Mobile應用程序,大部分工作相當好。我有一個自動發佈下拉列表,通過下面的代碼從數據庫中選擇一個列表。在加載或清除DOM時刷新瀏覽器

<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> 

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

問題是它只有在第一次執行搜索時才能正常工作,除非我單擊刷新。我不認爲這與MVC有什麼關係,我認爲問題在於AJAX和jQuery Mobile。

編輯:

我第一次搜索www.mysite.com/Home/Search/2產生的結果和炒菜鍋不錯,但第二次的東西似乎在DOM留下???它看起來爲:

www.mysite.com/Home/Search/2/2 also 

我得到了我的日誌和「加載頁面時出錯」 404錯誤,但它仍然認定結果,並正確顯示頁面!

然後用第三搜索我得到了我的日誌中的錯誤404的和「加載頁面時出錯」,但它已經成長,現在看起來爲:

www.mysite.com/Home/Search/2/2 
www.mysite.com/Home/Search/2/2/2 also 

這則繼續每一個搜索,直到一些後成長每個測試看似隨機的點,它似乎放棄了,我得到錯誤505

附加編輯:

代碼工作完美,如果我把jQuery Mobile的出了問題

任何人都可以告訴我可能會發生什麼嗎?

+0

您的代碼完全按照您的要求進行操作。在每次更改下拉列表時,它都將追加另一個ID給你的動作。我不知道你爲什麼試圖以這種方式進行表單提交。 – 2012-04-23 06:59:01

+0

此外,您應該使用'綁定'而不是'活' - 否則感謝jQuery手機,如果您離開頁面然後回來,您可能會收到多個提交。 – 2012-04-23 07:02:32

+0

謝謝Daniel,這是我知道的唯一途徑。我一直在爲此工作了大約6個月,並耗盡了網絡,試圖尋找更好的方法。如果你知道一個更好的方式來自動提交表單,請分享? – Bojangles 2012-04-23 09:47:30

回答

0

我想這是一個面向未來,MVC和jQuery移動似乎並不完全正確,現在融爲一體。也許MS對這個問題的迴應是Single Page Applications!

SPA可能會滿足Danial嗎?

0

擺脫:$(function() {

,取而代之的是:http://jquerymobile.com/demos/1.1.0/docs/api/events.html

你不能依靠document.ready$(document).delegate('[data-role="page"]', 'pageinit', function() {

請在這個頁面的頂部讀黃色的大節或任何其他每頁僅觸發一次的事件。相反,您必須習慣使用jQuery Mobile的自定義頁面事件,如pageinit,這樣當頁面添加到DOM(您不知道何時會發生在jQuery Mobile網站中)時,您的代碼無需任何工作。有很多事件,所以請再次閱讀我鏈接到上面的文檔。

+0

嗨賈斯珀,這使事情變得更糟,我有一個編輯上面! – Bojangles 2012-04-23 03:55:46

0

首先,動態生成的HTML使用服務器端模板引擎吹。我真的不明白人們看到什麼價值。

我的猜測是,在AJAX開始流行之前的10年前,它已經有了意義,並且從那時起就一直存在,因爲人們覺得這是「正確的做法」。事實並非如此。特別適用於移動網絡應用。

其次,它看起來像你試圖做很簡單的搜索。所有這些MVC4垃圾使你很難看到真正發生的事情。您不需要將參數追加到您的URL中,以進行簡單的表單提交。實際上,當你提交時,你的TownId應該已經成爲POST數據的一部分,所以你可以刪除URL修改位。

另外,不要使用表單提交,而只是一個GET和AJAX。我不知道你的應用在這裏做什麼,但我想你想以某種方式動態地在頁面上顯示結果,所以GET已經足夠了。

使用開發人員瀏覽器工具(F12)查看提交時提交的內容到底是什麼 - 這確實有幫助。而對於你的下一個項目,放棄MVC4! 「我的腳」Well established design patterns

+0

我懷疑我會很快放棄MVC4,它允許我在五分鐘內建立一個動態的移動網站!但我知道你的意思是附加參數,這就是我的問題所在。我只是不瞭解JavaScript的任何內容,所以我在這裏磕磕絆絆。如果有人會爲我編寫代碼並準確地告訴我我做錯了什麼,我們可以讓這個人睡覺。 – Bojangles 2012-04-24 00:51:48

+0

對不起,從一開始就是這個問題,如果我不通過發送參數,我得到一個「參數空條目」錯誤! – Bojangles 2012-04-24 00:59:24

+0

我的觀點正是如此。 5分鐘,以獲得工作 - 然後6個月的開關,以使其正常工作:)我不知道MVC4框架預計什麼,但做表單提交,所有你需要的是這樣的:$(' ('#File1')。submit(); } ()#myPage')。bind('pageinit',function(){(「#TownID」)。 } – 2012-04-24 01:17:52

0

我已經被這個問題困擾了很久 有在DOM我是這麼認爲的...... 相同的選擇元素,我用$(「 SelectCSS:最後的」)。VAL() 它看到工作得很好。

我來自中國,英語不好...

+0

謝謝昨天,很高興知道我嘗試了一切,但沒有任何工作,你的意思是在我的例子中,我應該試試$('#TownID:last')。val(),我試過但沒有改變。 – Bojangles 2012-04-28 00:10:51