सबमिट बटन पर बंद होने से बूटस्ट्रैप मोडल को रोकें

Question

पर मेरे पास बूटस्ट्रैप मोडल है। जब उपयोगकर्ता "अपडेट" बटन पर क्लिक करता है तो यह डीबी को अपडेट करने के लिए AJAX कॉल करता है। हालांकि अगर किसी कारण से अद्यतन विफल रहता है तो मैं त्रुटि संदेश प्रदर्शित करना चाहता हूं और मोडल खोलना चाहता हूं।

सबकुछ मेरे आदेश में काम कर रहा प्रतीत होता है, हालांकि e.preventDefault() मोडल बंद होने से रोकने के लिए प्रतीत नहीं होता है।

preventDefault() सबमिट करने से बटन को रोक नहीं रहा है?

मेरे बटन:

<button type="submit" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button> 

जावास्क्रिप्ट बटन पर क्लिक कोड।

$("#btnUpdate").on("click", function (e) { 
    // reset the message... 
    $("#errorMessage").html(""); 

    // get the value... 
    var myParam = $("#someSelection").attr("someData"); 
    var myParamData = JSON.parse(myParam); 

    updateData(myParamData.Name) 
    .done(function (result) { 
     if (!result.d == "") { 
      $("#errorMessage").html(result.d); 
      e.preventDefault(); 
     } 
     else {      
      loadData(); 
     } 
    }); 
}); 

Answer 1

बस button करने के लिए बटन का प्रकार बदलने के प्रस्तुत कर पाएगा:

<button type="button" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button> 

आशा इस मदद करता है।

---

अद्यतन:

एचटीएमएल 5 सत्यापन से लाभ करने के लिए जब आप ajax द्वारा submition उपयोग कर रहे हैं आप इस्तेमाल कर सकते हैं checkValidity() विधि।

HTMLSelectElement.checkValidity() विधि जांचता है कि तत्व में कोई बाधा है या नहीं और यह उन्हें संतुष्ट करता है या नहीं। यदि तत्व अपनी बाधाओं को विफल करता है, तो ब्राउज़र तत्व पर एक रद्द करने योग्य अमान्य ईवेंट को सक्रिय करता है, और फिर गलत लौटाता है।

तो अपने कोड होगा:

$("#btnUpdate").on("click", function (e) { 
    // reset the message... 
    $("#errorMessage").html(""); 

    if($("form")[0].checkValidity()) { 
    // get the value... 
    var myParam = $("#someSelection").attr("someData"); 
    var myParamData = JSON.parse(myParam); 

    updateData(myParamData.Name) 
     .done(function (result) { 
     if (!result.d == "") { 
     $("#errorMessage").html(result.d); 
     e.preventDefault(); 
     } 
     else {      
     loadData(); 
     } 
    }); 
    }else{ 
    console.log("invalid form"); 
    } 
}); 

Answer 2

e.preventDefault()updateData विधि का एक कॉलबैक फ़ंक्शन से कहा जाता है, यह पहले कॉलबैक कहा जाता है कि घटना पूरा हो गया है बहुत संभव है।

updateData विधि को कॉल करने से पहले e.preventDefault() रखने का प्रयास करें।

आशा इस मदद करता है

Answer 3

'मूल निवासी' औसत कि बूटस्ट्रैप के साथ आता है जावास्क्रिप्ट प्रोग्रामर के अनुकूल होने के लिए नहीं लगता है, एक विकल्प प्लगइन के लिए नीचे देखें:

BootstrapDialog.show({ 
 
    title: 'Ajax check', 
 
    message: 'Click buttons below', 
 
    buttons: [{ 
 
    label: 'Submit', 
 
    cssClass: 'btn-primary', 
 
    action: function(dialogRef) { 
 
     // Assuming here starts a new ajax request 
 
     $.when().done(function() { 
 
     var ok = false; 
 
     if(!ok) { 
 
      dialogRef.setMessage('<div class="alert alert-warning">Dude, something went wrong!</div>'); 
 
     } else { 
 
      alert('Great!'); 
 
     } 
 
     }); 
 
    } 
 
    }, { 
 
     label: 'Cancel', 
 
     action: function(dialogRef) { 
 
      dialogRef.close(); 
 
     } 
 
    }] 
 
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

प्लगइन के बारे में और पढ़ें http://nakupanda.github.io/bootstrap3-dialog/