2014-04-16 2 views
-1

나는 KendoUI treeview 컨트롤을 사용하고 해당 데이터가 AJAX 호출에 의해 게시되고 폼 데이터가있는 한 페이지를 만들었습니다. 현재 AJAX 호출과 양식 게시를위한 별도의 단추가 있습니다. 이제 양식 데이터를 게시하고 단일 단추로 AJAX 호출을 수행합니다.양식을 게시하고 또한 아약스로 데이터를 게시 하시겠습니까?

한 번의 클릭으로 두 버튼을 트리거하는 jQuery 함수를 만들려고했습니다. 내가 클릭 이벤트가있는 다른 버튼을 만들었습니다 : 기능 자바 스크립트

<input type=submit onclick="BtnClick" /> <-- on click function call 

: 위의 함수에서

function BtnClick() { 
    $("#Submit").click(); <-- Submit ajax call 
    $("#Save").click(); <-- post form 
} 

는 AJAX 호출이가는 동시에 페이지에는 또한 AJAX 호출을 게시됩니다 완료하지 못했습니다.

한 번의 클릭으로 어떻게이 기능을 사용할 수 있습니까?

알려 주시기 바랍니다.

+0

보내기 아약스 호출 첫째 때 호출 양식 –

+0

당신은 * 콜백이 할 수 제출 *,'$ ("# 제출")) {(( \t을 기능을 클릭합니다. }) – Praveen

+0

양식 제출 후 페이지가 게시되고 ajax 호출이 인스턴스화되지 않습니다 –

답변

2

당신은 그 아래에서 실행되는 코드를 삽입해야합니다

여기

가 의사입니다 버튼을 #Save 또는 #Submit 버튼 아래에 개별적으로 호출하거나 BtnClick 기능으로 함께 호출 할 수 있습니다. 이 시도 : 아약스 호출이 완료

<form id="myForm"> 
    <!-- your fields ... --> 

    <input type="button" id="postForm" /> 
</form> 
function submitHandler(callback) { 
    // make the AJAX call, using the callback parameter as the callback: 
    $.ajax({ 
     url: 'foo.com', 
     data: { foo: 'bar' }, 
     success: function() { 
      callback && callback(); 
     } 
    }); 
} 

function saveHandler() { 
    // post the form 
    $('#myForm').submit(); 
} 

function formHandler() { 
    // do both 
    submitHandler(saveHandler); 
} 

$("#Submit").click(submitHandler); 
$("#Save").click(saveHandler); 
$('#postForm').click(formHandler); 
+0

답장을 보내 주셔서 감사합니다. 제 경우에는 단일 페이지와 1 양식에 3 개의 아약스 통화가 있으므로 시간이 많이 걸리므로 모든 아약스 통화가 제동을 걸면 whloe chain은 중단되어 일부 데이터 저장소와 일부 데이터가 손실되어 다시 되돌릴 수 없습니다. –

+0

맞습니다. AJAX 요청이 완료되는 동안 시간이 지연되지만이 모델을 사용하는 다른 방법은 없습니다. AJAX 요청이 진행 중이거나 취소 될 때 페이지를 떠날 수 없습니다. –

2

은 먼저 AJAX 호출을 보낼 필요와 아약스 호출 트리거 양식의 성공 기능에 버튼을 제출 :

$.ajax({ 
... 
... 
success:function(){ 

$("#Save").click(); 
} 
}) 
관련 문제