2015-04-17 14 views
5

Tôi đang làm việc trong một ứng dụng web bằng cách sử dụng Spring MVC. Tôi đang cố gắng hiển thị hộp thoại xác nhận trước khi gửi biểu mẫu bằng cách sử dụng nhưng tôi nhận được lỗi máy chủ nội bộ 500.Cách xác nhận việc gửi biểu mẫu bằng Hộp khởi động bằng cách sử dụng jQuery AJAX và JSON

Đây là hình thức của tôi:

<form id="checkout-form" class="smart-form" novalidate="novalidate"> 
    ...some fields 
    <button type="button" class="btn btn-primary" onclick="insertFunction()"> 
    Accept 
    </button> 
</form> 

Đây là insertFunction của tôi()

function insertFunction(){ 

    var name = $('#name').val(); 
    var lastname = $('#lastname').val(); 

    var confirmSend; 

    var json = {"name": name,"lastname": lastname}; 

    $.ajax({ 
    type: "POST", 
    url: "register/insertPerson", 
    data: JSON.stringify(json), 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    cache: false, 
    beforeSend: function (xhr){ 
     bootbox.dialog({ 
     message: "I am a custom dialog", 
     title: "Custom title", 
     buttons: { 
      success: { 
      label: "Success!", 
      className: "btn-success", 
      callback: function() { 
       //I DONT KNOW WHAT TO DO HERE 
      } 
      }, 
      danger: { 
      label: "Danger!", 
      className: "btn-danger", 
      callback: function() { 
       return false; 
      } 
      } 
     } 
     }); 

     xhr.setRequestHeader("Accept", "application/json"); 
     xhr.setRequestHeader("Content-Type", "application/json"); 
    }, 
    success: function (data){ 
     if (data.message === true){ 
     bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS"); 
     } else { 
     bootbox.alert("OPERATION FAILED"); 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError){ 
     alert(xhr.status); 
     alert(xhr.responseText); 
     alert(thrownError); 
    } 
    }); 
} 

tôi gửi tên và giá trị tên cuối cùng để điều khiển mùa xuân của tôi và tôi làm một chèn và nếu nó là thành công phương pháp điều khiển của tôi trả về true, và trong khối thành công của kịch bản của tôi, tôi kiểm tra giá trị nếu là đúng tôi hiển thị một tin nhắn và nếu nó sai tôi hiển thị một thông điệp khác nhau.

Vấn đề của tôi là tôi không biết phải làm gì trong phần này:

success: { 
    label: "Success!", 
    className: "btn-success", 
     callback: function() { 
     //I DONT KNOW WHAT TO DO HERE 
     } 
} 

* EDIT: * Đó là lỗi của tôi submiting một giá trị trong các trường mẫu, bây giờ tôi không nhận được một lỗi 500 máy chủ nội bộ, bây giờ nó chỉ cho tôi thoại FAILED của tôi mà tôi bắn trong khối thành công

else { 
     bootbox.alert("OPERATION FAILED"); 

và sau đó sau khi thông điệp này là sho, xuống dưới nó, nó cho thấy diaglog xác nhận rằng tôi muốn hiển thị firts. Cũng giống như đang hiển thị cho tôi các tin nhắn theo thứ tự sai. Ngoài ra khi tôi nhấn nút Danger nó không đóng cửa sổ hộp thoại chỉ khi tôi nhấn thành công.

* EDIT 2: *

Các cửa sổ xác nhận đang làm việc, nhưng tôi đang gặp vấn đề khi tôi bấm nút hủy, khi tôi bấm nút hủy cửa sổ không đóng.

function preInsert() 
{ 
    bootbox.dialog({ 
     message: "are you sure", 
     title: "are you sure", 
     buttons: { 
      success: { 
       label: "Acept", 
       className: "btn-success", 
       callback: function() { 
        realInsert(); 
       } 
      }, 
      danger: { 
       label: "Cancel", 
       className: "btn-danger", 
       callback: function() { 
        return false; 
       } 
      } 
     } 
    }); 
} 

function realInsert() { 

    var name= $('#name').val(); 
    var lastName= $('#lastName').val(); 


    var json = {"name": name, 
     "lastName": lastName 
    }; 


    $.ajax(
      { 
       type: "POST", 
       url: "register/insertForm", 
       data: JSON.stringify(json), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       cache: false, 
       beforeSend: function (xhr) 
       { 
        xhr.setRequestHeader("Accept", "application/json"); 
        xhr.setRequestHeader("Content-Type", "application/json"); 
       }, 
       success: function (data) 
       { 



        if (data === true) 
        { 
         bootbox.alert("Insert Successfully "); 
        } 
        else 
        { 
         bootbox.alert("Problem during the insert"); 
        } 
       }, 
       error: function (xhr, ajaxOptions, thrownError) 
       { 
        alert(xhr.status); 
        alert(xhr.responseText); 
        alert(thrownError); 
       } 
      }); 
} 

Trả lời

3

Chỉ thực hiện yêu cầu ajax sau khi người dùng nhấp vào nút thành công. Chức năng gọi lại sẽ được gọi sau khi nút được nhấp.

function insertFunction() { 
 
    bootbox.dialog({ 
 
    message: "I am a custom dialog", 
 
    title: "Custom title", 
 
    buttons: { 
 
     success: { 
 
     label: "Success!", 
 
     className: "btn-success", 
 
     callback: function() { 
 
      success(); 
 
     } 
 
     }, 
 
     danger: { 
 
     label: "Danger!", 
 
     className: "btn-danger", 
 
     callback: function() { 
 
      return false; 
 
     } 
 
     } 
 
    } 
 
    }); 
 

 
} 
 

 
function success() { 
 
    var name = $('#name').val(); 
 
    var lastname = $('#lastname').val(); 
 

 
    var confirmSend; 
 

 
    var json = { 
 
     "name": name, 
 
     "lastname": lastname 
 
    }; 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: "register/insertPerson", 
 
     data: JSON.stringify(json), 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     cache: false, 
 
     success: function(data) { 
 
     if (data.message === true) { 
 
      bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS"); 
 
     } else { 
 
      bootbox.alert("OPERATION FAILED"); 
 
     } 
 
     }, 
 
     error: function(xhr, ajaxOptions, thrownError) { 
 
     alert(xhr.status); 
 
     alert(xhr.responseText); 
 
     alert(thrownError); 
 
     } 
 
    });

+0

tôi đã cập nhật câu hỏi của mình một lần nữa, tôi đang có torubles với khối mã bên trong 'nguy hiểm: {' khi tôi nhấn nút Hủy bỏ, cửa sổ hộp thoại không đóng. – StackQuestion

1

Nếu bạn gặp phải lỗi máy chủ nội bộ 500 thì có vẻ như bạn đang gửi biểu mẫu và nhấn máy chủ. Có thể có sự cố với mã phía máy chủ, mà bạn không thảo luận ở đây, đó là lỗi cho bạn.

Để cuộc gọi xác nhận của bạn hoạt động, hàm beforeSend phải trả về false khi nhấn nút Danger!. Thử trả về false từ hàm gọi lại thứ hai:

danger: { 
    label: "Danger!", 
    className: "btn-danger", 
    callback: function() { 
    return false; 
    } 
} 
+0

hey người bạn, tôi thay đổi nội dung câu hỏi của tôi với đề nghị của bạn, nhưng tôi vẫn đang gặp vấn đề, bây giờ nó chỉ cho tôi thông điệp của tôi 'else { bootbox.alert ("HOẠT ĐỘNG FAILED") ; 'và theo thông điệp đó, nó cho tôi thấy thông báo xác nhận, và nếu tôi nhấn nút Nguy hiểm nó không đóng, tôi cần nhấn nút Success – StackQuestion

2

câu trả lời của tôi là dành cho phiên bản "EDIT 2" của bạn: Nếu bạn loại bỏ các "return false;" lệnh từ "Nguy hiểm!" nút gọi lại, nó sẽ hoạt động bình thường. Ngoài ra, nút Chấp nhận sẽ hoạt động bình thường.

Nếu bạn quay lại để đọc nhận xét này, xin vui lòng chấp nhận bình luận của Pabreetzio, rằng ông đã thực hiện vào ngày 17 tháng 4 lúc 21:06, kể từ khi ông giải quyết vấn đề của bạn ở đó.

1

function insertFunction() { 
 
    bootbox.dialog({ 
 
    message: "I am a custom dialog", 
 
    title: "Custom title", 
 
    buttons: { 
 
     success: { 
 
     label: "Success!", 
 
     className: "btn-success", 
 
     callback: function() { 
 
      success(); 
 
     } 
 
     }, 
 
     danger: { 
 
     label: "Danger!", 
 
     className: "btn-danger", 
 
     callback: function() { 
 
      return false; 
 
     } 
 
     } 
 
    } 
 
    }); 
 

 
} 
 

 
function success() { 
 
    var name = $('#name').val(); 
 
    var lastname = $('#lastname').val(); 
 

 
    var confirmSend; 
 

 
    var json = { 
 
     "name": name, 
 
     "lastname": lastname 
 
    }; 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: "register/insertPerson", 
 
     data: JSON.stringify(json), 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     cache: false, 
 
     success: function(data) { 
 
     if (data.message === true) { 
 
      bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS"); 
 
     } else { 
 
      bootbox.alert("OPERATION FAILED"); 
 
     } 
 
     }, 
 
     error: function(xhr, ajaxOptions, thrownError) { 
 
     alert(xhr.status); 
 
     alert(xhr.responseText); 
 
     alert(thrownError); 
 
     } 
 
    });

Các vấn đề liên quan