Android jQuery AJAX for submit error

Question

양식 제출을 통해 페이지에 벽 피드를 게시하는 jQuery AJAX 요청을 사용하는 간단한 모바일 사이트를 만들었습니다.

코드는 일반 브라우저와 ipad (아이폰에 대해서는 확실하지 않음)에서 완벽하게 작동하지만 안드로이드에서 양식 전송 버튼을 누르면 "정의되지 않은"다른 페이지로 리디렉션됩니다.

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 기반의 요소를 얻었다. 여기 내 jQuery 코드입니다 :

$('#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 

과, 세션 변수로 저장되는 선택 상자의 기본값을 사용했습니다. 세션 변수가 널 (NULL)이면, 기본값은 선택 상자에 대한 프롬프트 메시지입니다.

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

하위 카테고리 선택 요소의 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"} %> 

개선 사항이 더 있으면 제안 해주세요.