2012-06-19 4 views
1

jQuery UI 탭 내에있는 양식을 제출하고 싶습니다. - 탭에서 렌더링 할 작업 페이지를 원합니다 ... ""a "태그를 내부에서 가로 챌 수있었습니다 탭을 사용하여 (여기에 도움 덕분에 ...)jQuery UI - 양식이 탭에 제출 됨

탭에 해당 링크를 호출하는이

$('#tabs-community').on('click', '.ui-tabs-panel a', function(){ 
    var $panel=$(this).closest('.ui-tabs-panel'); 
    $panel.load(this.href); 
    return false; 
}); 

내가 제출 이벤트에 대한 비슷한 일이 가정 ... 내가 본

시도
$('#formID').on('submit', function(e){ 
    e.preventDefault(); 
    var formSrc = $(this).attr('action'); 
    var formMethod = $(this).attr('method'); 
    var formData = $(this).serialize(); 
    $.ajax({ 
     url: formSrc, 
     type: formMethod, 
     data: formData, 
     success: function(data){ 
     //work with returned data from requested file 
     alert(data); 
     } 
    }); 
    }); 

(form submitting in jquery tab -하지만 이건 내가 쓴게 아니야)

그리고 그것이하는 일에 대해 "작동"하지만 AJAX 호출을하고 경고의 동작 페이지를 반환합니다. 필요.

jQuery가 제출 버튼 변수를 제거하고있는 것처럼 보이지는 않습니다 ... 예를 들어 하나 또는 다른 제출 버튼이 있는지 확인합니다. - HTML 사양에서 제출 버튼을 클릭하면 IT가 다음과 같이 전달됩니다. 값,하지만 내 방화 글 콘솔 제출 아약스 양식을 보여줍니다 - 'POST'단추 변수의 서명을 보여줍니다 (이것은 측면 문제입니다. 탭) ... 어떤 제안?

희망이 있습니다.

답변

0

명백한 아이디어는 결과를 에 넣는 것입니다. 이처럼 양식을 제출 수 :

var $form = $('form#foobar'); 
//replace form by iframe 
$form.hide(); 
$form.parent().append('<iframe id="submit-target" name="submit-target"></iframe>'); 
//submit form to new iframe (set target to name attribute of iframe) 
$form.attr('target', 'submit-target'); 
$form.submit(); 

an answer to another question에 큰 자세히 설명하는 iframe에 양식을 제출.

+0

Thx 스테판 - iframe 경우 큰 팬이 아니며 가능하면 피하지 않습니다. 하지만 내 질문에 대한 답을 찾지 못하면이 점을 고려해 볼 수 있습니다. – jpmyob

0

저는 jqueryui 탭을 사용하고 있으며 현재 페이지에 제출할 모든 양식에 간단한 코드를 작성해야했습니다. 여기

은 코드 내 작업 코드를 기반으로합니다

 $('form').submit(function(e) { 
      e.preventDefault(); 

      var currentTab = tabs.tabs('option', 'selected'), 
       tabId = $("li.ui-tabs-active").attr("id"), 
       formSrc = $(this).attr('action'), 
       formMethod = $(this).attr('method'), 
       formData = $(this).serialize(); 

      $('#tabs-'+tabId).html("Loading..."); 

      $.ajax({ 
       url: formSrc, 
       type: formMethod, 
       data: formData, 
       success: function(data){ 
        $('#tabs-'+tabId).html(data); 
       } 
      }); 
     }); 

내 현재 jqueryui 버전 1.10.2 및 JQuery와 1.9.1이다.

+0

thx lucas - 내가 돌아가서 이것이 저에게 효과가 있는지 확인해야합니다 ... – jpmyob

관련 문제