Android jQuery AJAX for submit error

Question

jQuery AJAXリクエストを使用してフォーム提出によってページに壁紙を投稿するシンプルなモバイルサイトを構築しました。

コードは通常のブラウザとipad（iphoneについてはわかりません）では完全に動作しますが、アンドロイドではフォーム送信ボタンを押すと「未定義」という別のページにリダイレクトされます。

jquery + ajax + androidには既知の問題がありますか？

<form id="newPost" action="shout.php" method="post"> 
    Name: <input type="text" id="name" name="name" maxlength="50"/> 
    What do you think? </br> <textarea name="message" id="message" maxlength="140"></textarea> 
    <input type="button" id="submit" value="Shout!" /> 
</form> 

のjQuery：

$(function() { 
    refresh_shoutbox(); 
    refresh_announcements(); 

    $("#submit").click(function(e) { 
     $.ajax({ 
      type: $('#newPost').attr('method'), 
      url: $('#newPost').attr('action'), 
      data: $('#newPost').serialize(), 
      success: function(html) { 
       refresh_shoutbox(); 
       refresh_announcements(); 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

var myScroll; 
function loaded() { 
    myScroll = new iScroll('wrapper', { 
     useTransform: false, 
     onBeforeScrollStart: function (e) { 
      var target = e.target; 
      while (target.nodeType != 1) 
       target = target.parentNode; 

      if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 
       e.preventDefault(); 
     } 
    }); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
document.addEventListener('DOMContentLoaded', loaded, false); 

function refresh_shoutbox() { 
    var data = 'refresh=1'; 

    $.ajax({ 
     type: "POST", 
     url: "shout.php", 
     data: data, 
     success: function(html){ // this happen after we get result 
      $("#shout").html(html); 
      myScroll.refresh(); 
     } 
    }); 
} 

function refresh_announcements() { 
    var data = 'refresh=1'; 

    $.ajax({ 
     type: "POST", 
     url: "announce.php", 
     data: data, 
     success: function(html){ // this happen after we get result 
      $("#announce").html(html); 
      myScroll.refresh(); 
     } 
    }); 
} 

Answer 1

私は問題を解決して、状態を維持するために、AJAXベースの要素を得ました。

$('#before_category_select').loadPage(); 

jQuery.fn.loadPage = function() 
{ 

if($("#new-post-area").length > 0) 
{ 

    $.getJSON('/home/cat_select_state.json', function(data){ 
     $.get('/posts/update_sub_cat/' + data.cat_state, function(data1){ 
      $("#sub-category-select").html(data1); 
     }) 
    }); 
    } 
} 

私はページの時にセッション変数として保存されている選択要素の状態は、提出を取得するために呼び出すコントローラのアクション：

def cat_select_state 
    @cat_session = {:cat_state => session[:new_post_category], :sub_cat_state => session[:new_post_sub_category]} 
    respond_to do |format| 
     format.json {render :json => @cat_session} 
    end 
    end 

そして最後に、ここに私のjQueryのコードですセッション変数として格納されている選択ボックスのデフォルト値を使用しました。セッション変数がNULLの場合、デフォルト値は選択ボックスのプロンプト・メッセージです。

<%= collection_select :post_category, :id, @categories, :id, :name, 
               options = {:prompt => "Select a category", :selected => session[:new_post_category]} %> 

サブカテゴリselect要素のためのHTML

はjavascriptのファイルupdate_sub_cat.js.erbでレンダリングされます。

sub-category <%= collection_select :post_sub_category, :id, @sub_categories, :id, :name, 
             options = {:prompt => "Select a sub-category"} %> 

これ以上の改善がある場合は、お勧めします。