2012-11-06 2 views
1

나는 beforeSubmit에서 몇 가지 함수를 트리거하려고합니다. 먼저 선택한 옵션이 유효한지 확인하고 싶습니다. 둘째, 모달 창을 사용하여 사용자가 변경 사항을 확인하도록합니다. 내가 반환 confirmUpdates (편곡, $ 양식, 옵션)을 가질 수 없습니다로Ajaxsubmit, beforeSubmit 이벤트에 체인을 연결

<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js"></script> 
<script type="text/javascript" language="javascript" src="scripts/jquery.form.js" ></script> 
<script type="text/javascript" language="javascript" src="scripts/jquery.simplemodal-1.4.3.js"></script> 
<link rel="stylesheet" type="text/css" href="css/modalWins.css" /> 
<script> 
$().ready(function() { 
$('#myForm').submit(function() {       
    var options = { 
     success: showResponse, 
     beforeSubmit: chkService, 
     dataType: "json", 
     url:'actCustomer.cfm?vw=saveSvc&acctNum=1' 
     }; 
    $('#myForm').ajaxSubmit(options); 
    return false; 
}); 

showResponse = function(responseText, statusText) { 
    alert('am i here? ' + responseText); 
    $.ajax({ 
     type: "post",  
     url: "actCustomer.cfm?vw=save", 
     cache: false,  
     success: function(result) { 
      alert(result); 
     }, 
     error: function(xmlHttpRequest, status, err) { 
      confirm('Error: '+err); 
      $('#errDiv').html(err); 
     } 
    }); 
} 

chkService = function(arr, $form, options) { 
    formData = 'service='+$('#svc').val(); 
    $.ajax({ 
     type: "post",  
     url: "actCustomer.cfm?vw=chkStuff", 
     data: formData, 
     cache: false,  
     success: function(result) { 
      result = $.trim(result); 
      if (result == 'Invalid') { 
       $('#errDiv').html('Invalid Selection').addClass('req'); 
       return false; 
      } else if (result == 'Valid') { 
       return confirmUpdates(arr, $form, options); 
      } else { 
       $('#errDiv').html(result); 
       return false; 
      } 
     }, 
     error: function(xmlHttpRequest, status, err) { 
      confirm('Error: '+err); 
      $('#errDiv').html(err); 
     } 
    }); 
} 


// should we continue with the updates? 
confirmUpdates = function(arr, $form, options) { 
    var dispMsg = 'some information here about updates.'; 
    $('#msg-header').html('Confirmation of Updates!'); 
    $('#msg-content').html(dispMsg).css('color','black'); 
    $('#msg-action').html('<div align="center" style="margin-top:30px;"><input type="button" name="btnModSubmit" id="btnModSubmit" class="button submit" value="Continue"/><input type="button" name="btnModClose" id="btnModClose" class="button close" value="Cancel" style="margin-left:30px"/></div>'); 
    $("#Msg").html('<table style="font-size:11px; color:#333; margin-left:35px;"><tr><td><img border="0" src="images/ajax-loader.gif"/></td><td style="font-weight:bold">Confirming updates...</td></table>'); 

    $('#basic-modal-content').modal({ minHeight:320, minWidth:455 }); 

    $('#btnModSubmit').click(function(){ 
     // continue with the updates. 
     alert('continue >>'); 
     return true; 
    }); 
    $('#btnModClose').click(function(){ 
     /* $.modal.close(); 
     $("#formMsg").hide(); 
     $('#formSub').show(); */ 
     window.location.reload(); 
    }); 
} 
}); 
</script> 
    <form name="myForm" id="myForm" action="" method="post"> 
service:<input type="text" name="svc" id="svc" value="1"> 
    <input type="submit" name="submit" id="submit" class="button submit" value="Proceed"/> 
</form> 

오전 데 문제가 있다는 것입니다 즉시, 다음은 코드의 일부입니다 제대로 작동합니다. 모달 창을 시작하지만 btnModSubmit 클릭을 기다리지 않습니다. 양식을 제출하면 내가 여기있는 걸 알 수 있습니까? 경고.

chkOptions의 stuff.cfm에 대한 ajax 호출이 유효하면 confirmUpdates를 실행하십시오. 사용자가 btnModSubmit을 클릭하면 true를 반환하여 showResponse를 실행합니다. 사용자가 btnModClose를 클릭하면 false를 반환하고 showResponse를 실행하지 않습니다. 나는이 시점에서 붙어있다.

해결 방법이 있습니까?

답변

2

다음과 같이 ajaxSubmit에서 성공을 제거했습니다.

$('#myForm').submit(function() { 

    var options = { 
     beforeSubmit: function(arr, $form, options) { 
      chkService(arr, $form, options); 
      confirmUpdates(arr, $form, options); 
      return false; 
     }, 
     dataType: "json", 
     url:'actCustomer.cfm?vw=saveSvc&acctNum=1' 
     }; 
    $('#myForm').ajaxSubmit(options); 
    return false; 
}); 

chkService가 먼저 실행됩니다. 그런 다음 업데이트를 확인합니다. 거기에 제출 및 취소 버튼이 있습니다. 사용자가 제출을 클릭하면 양식을 저장하기 위해 다른 기능으로 전송합니다.

희망이 있으면 도움이됩니다. 감사합니다.

관련 문제