How to prevent page from refreshing after ajax submit - javascript

I just started using Ajax function in my work and I'm not very familiar with it. I have this problem that when I submit data, it submits without refreshing the page, but on a second time when trying to submit, the page refreshes before submitting. I've used the e.preventDefault() to prevent the page from refreshing but it is not working for me. It just seems there is something I'm not doing right.
This is my Ajax code
<!--AJAX PROCESS TO SUBMIT CHECKED COURSES-->
$(document).ready(function(){
loadNewCourse();
loadDelTable();
$('#submit').click(function(){
$('#form').submit(function(e){
e.preventDefault();
var in_arr = [],
name = ("<?php echo $_SESSION['name']?>"),
email = ("<?php echo $_SESSION['email']?>"),
regno = ("<?php echo $_SESSION['regno']?>"),
level = ("<?php echo $_SESSION['level']?>"),
dept = ("<?php echo $_SESSION['dept']?>"),
semester = ("<?php echo $_SESSION['semester']?>");
$('.inChk').each(function(i){
var checked = $(this).is(':checked');
if(checked){
in_arr.push($(this).val());
}
});
$.ajax({
url: 'submit.php',
type: 'POST',
cache: false,
async: false,
data: {
post_inId : in_arr,
name : name,
email : email,
regno : regno,
level : level,
dept : dept,
semester : semester
},
success: function(data){
loadNewCourse();
loadDelTable();
// setTimeout(function(){
// $('#regModal').modal('hide');
// }, 1000);
$('body').removeAttr('style');
$('#regModal').removeAttr('style');
$('.modal-backdrop').remove();
swal({
// "Success", "Registration successful", "success"
position: "top-end",
type: "success",
title: "Registration successful",
showConfirmButton: false,
timer: 2000
})
},
error: function(data){
swal("Oops...", "Registration failed.", "error");
}
});
});
});
////////////////////////////////////////////////////////////////////////////////////////
// PROCESS AJAX DELETE ON CHECKBOX SELECT
$('#deleteCheck').click(function(){
$('#delform').submit(function(e){
e.preventDefault();
var id_arr = [],
regno = ("<?php echo $_SESSION['regno']?>"),
level = ("<?php echo $_SESSION['level']?>");
$('.delChk').each(function(i){
var checked = $(this).is(':checked');
if(checked){
id_arr.push($(this).val());
}
});
swal({
title: "Are you sure you want to delete selected courses?",
text: "You can add these courses by registering again!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete!",
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
closeOnConfirm: false
},
function(isConfirm){
if(isConfirm){
$.ajax({
type: "POST",
url: "submit.php",
data: {
post_id : id_arr,
regno : regno,
level : level
},
cache: false,
async: false,
success: function(data){
// console.log(data);
loadDelTable();
loadNewCourse();
swal({
// "Success", "Registration successful", "success"
position: "top-end",
type: "success",
title: "Delete successful",
showConfirmButton: false,
timer: 2000
})
},
error: function(data){
swal("Oops...", "Delete failed.", "error");
}
});
}else{
// alert('isNotConfirm and is not success');
swal("Oops...", "Delete failed", "error");
}
});
return false;
///////////////////////////////////////////////////////////////////////////////////////////
});
});
function loadNewCourse(){
$.ajax({
url: 'processReg.php',
type: 'POST',
cache: false,
async: false,
data: {
loadit : 1
},
success: function(disp){
$("#reveal").html(disp).show();
}
});
}
function loadDelTable(){
$.ajax({
url: 'delete_tbl.php',
type: 'POST',
cache: false,
async: false,
data: {
loadDel : 1
},
success: function(deldisp){
$("#showRegtbl").html(deldisp).show();
}
});
}
});
And this is the page displaying submitted data
<div class="" style="margin:auto;margin-top:0;text-align:center">
<div class="" >
<h2 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;letter-spacing:5px;font-weight:100;color:#061931;">Welcome!</h2>
<p style="width:100%;font-size:14px;text-align:center;padding:5px;background:whitesmoke;padding:20px;">If this is your first visit, click on <b>Register Courses</b> to register courses available for you. <br>If you are re-visiting, you can continue where you left off.<br><span class="btn btn-md btn-primary" style="letter-spacing:3px;margin-top:10px;"><b>Register Courses</b></span></p>
</div>
</div><br>
<!--Display Courses that are available-->
<span id="reveal"></span>
<!--Table to display courses registered-->
<span id="showRegtbl"></span>
</div>
</div>
I've been stuck in this for more than 3days now. Can anyone here help me out pls?

I think you misunderstood the submission of the form and even handling.
The default action of the form ie submit can be done with input type="submit" or <button>
The default
<h2> Form default action </h2>
<form action="">
<input type="hidden" id="someInput" value="hey">
<input type="submit" value="submit">
</form>
To prevent form's default action you can do 2 things.
Avoid using type="submit" or button
Do something like this
function customForm(){
alert("Hey this is custom handler, dont worry page will not refresh...!");
}
<h2> Form with custom action </h2>
<form action="">
<input type="hidden" id="someInput" value="hey">
<input type="button" value="submit" onclick="customForm()">
</form>
Use event.preventDefault()
$('#myform').submit(function(e){
e.preventDefault();
alert("custom handler with preventDefault(), no reload no worries...!");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> Form with custom handler using preventDefault() </h2>
<form id="myform" action="">
<input type="hidden" id="someInput" value="hey">
<input type="submit" value="submit" onsubmit="customForm(this)">
</form>
For any queries comment down.

Calling $("#form").submit(function() { ... }) creates a handler for the next time the form is submitted. Doing this inside the handler for $("#submit").click() is not correct. Clicking the submit button will establish a handler for the next submission, but then the default action will submit the form immediately, which refreshes the page. Putting e.preventDefault() inside the click handlers would prevent the reload, but then you would have to click twice to submit the form (and this wouldn't actually work, because the default action of a submit button is to trigger the submit event, and you're preventing that).
Just create submit handlers for each form, without doing it inside a click handler.
$(document).ready(function() {
loadNewCourse();
loadDelTable();
$('#form').submit(function(e) {
e.preventDefault();
var in_arr = [],
name = ("<?php echo $_SESSION['name']?>"),
email = ("<?php echo $_SESSION['email']?>"),
regno = ("<?php echo $_SESSION['regno']?>"),
level = ("<?php echo $_SESSION['level']?>"),
dept = ("<?php echo $_SESSION['dept']?>"),
semester = ("<?php echo $_SESSION['semester']?>");
$('.inChk').each(function(i) {
var checked = $(this).is(':checked');
if (checked) {
in_arr.push($(this).val());
}
});
$.ajax({
url: 'submit.php',
type: 'POST',
cache: false,
async: false,
data: {
post_inId: in_arr,
name: name,
email: email,
regno: regno,
level: level,
dept: dept,
semester: semester
},
success: function(data) {
loadNewCourse();
loadDelTable();
// setTimeout(function(){
// $('#regModal').modal('hide');
// }, 1000);
$('body').removeAttr('style');
$('#regModal').removeAttr('style');
$('.modal-backdrop').remove();
swal({
// "Success", "Registration successful", "success"
position: "top-end",
type: "success",
title: "Registration successful",
showConfirmButton: false,
timer: 2000
})
},
error: function(data) {
swal("Oops...", "Registration failed.", "error");
}
});
});
////////////////////////////////////////////////////////////////////////////////////////
// PROCESS AJAX DELETE ON CHECKBOX SELECT
$('#delform').submit(function(e) {
e.preventDefault();
var id_arr = [],
regno = ("<?php echo $_SESSION['regno']?>"),
level = ("<?php echo $_SESSION['level']?>");
$('.delChk').each(function(i) {
var checked = $(this).is(':checked');
if (checked) {
id_arr.push($(this).val());
}
});
swal({
title: "Are you sure you want to delete selected courses?",
text: "You can add these courses by registering again!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete!",
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
closeOnConfirm: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
type: "POST",
url: "submit.php",
data: {
post_id: id_arr,
regno: regno,
level: level
},
cache: false,
async: false,
success: function(data) {
// console.log(data);
loadDelTable();
loadNewCourse();
swal({
// "Success", "Registration successful", "success"
position: "top-end",
type: "success",
title: "Delete successful",
showConfirmButton: false,
timer: 2000
})
},
error: function(data) {
swal("Oops...", "Delete failed.", "error");
}
});
} else {
// alert('isNotConfirm and is not success');
swal("Oops...", "Delete failed", "error");
}
});
return false;
///////////////////////////////////////////////////////////////////////////////////////////
});
function loadNewCourse() {
$.ajax({
url: 'processReg.php',
type: 'POST',
cache: false,
async: false,
data: {
loadit: 1
},
success: function(disp) {
$("#reveal").html(disp).show();
}
});
}
function loadDelTable() {
$.ajax({
url: 'delete_tbl.php',
type: 'POST',
cache: false,
async: false,
data: {
loadDel: 1
},
success: function(deldisp) {
$("#showRegtbl").html(deldisp).show();
}
});
}
});
If you had multiple submit buttons in the same form you would instead assign click handlers to each button, but not create submit handlers for the form.

Thanks everyone for the assistance. I did some debugging on my end and was able to fix the issue by removing the form tags from the Add and Delete scripts and then include them in the page displaying the submitted data.
Like this...
<div class="" style="margin:auto;margin-top:0;text-align:center">
<div class="" >
<h2 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;letter-spacing:5px;font-weight:100;color:#061931;">Welcome!</h2>
<p style="width:100%;font-size:14px;text-align:center;padding:5px;background:whitesmoke;padding:20px;">If this is your first visit, click on <b>Register Courses</b> to register courses available for you. <br>If you are re-visiting, you can continue where you left off.<br><span class="btn btn-md btn-primary" style="letter-spacing:3px;margin-top:10px;"><b>Register Courses</b></span></p>
</div>
</div><br>
<!--Display Courses that are available-->
<form id='form' action='POST' href='#'>
<span id="reveal"></span>
</form>
<!--Table to display courses registered-->
<form id='delform' action='POST' href='#'>
<span id="showRegtbl"></span>
</form>
</div>
</div>
Is there a more proper way to do this or this is just okay? Thank you for the help so far.

Related

Sweetalert delete confirm button is not working in laravel 8

Hello guys I'M having an issue with my sweetalert delete confirmation. When I click on "Yes Delete it!" nothing happens and there are no errors showing in my console please guys I seriously need help this has kept me on deck for a long time now. I really be grateful if I get quick responses.
This is my blade.php
<button onclick="deleteConfirmation({{$poster->id}})" type="button" class="btn btn-danger delete-confirm offset-md-2">Delete</button>
<script type="text/javascript">
function deleteConfirmation(id) {
swal({
title: "Delete?",
text: "Are you sure you want to delete this?",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: true
}).then(function (e) {
if (e.value) {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: 'DELETE',
url: "{{ url('delete-post') }}" + '/' + id,
data: {_token: CSRF_TOKEN},
dataType: 'JSON',
success: function (results) {
if (results.success === true) {
swal("Done!", results.message, "success");
} else {
swal("Error!", results.message, "error");
}
}
});
} else {
e.dismiss;
}
}, function (dismiss) {
return false;
})
}
</script>
And here is my controller
public function deletepost($id)
{
dd($id);
DB::table('posters')->where('id', $id)->delete();
return back()-> with('post_add', 'Post deleted Successfully');
}
And my route
Route::delete ("/delete-post/{id}", [PosterController::class, "deletepost"])->name("poster.delete");

Execute and Confirm delete using SWAL and ajax on laravel

when i click the button confirm on swal nothing happens, i dont khow if the problem is the ajax code
or somthing else
but when i delete the ajax code from the swal code it works fine and shows the sweetalert so i think the probleme comes from ajax
<script>
function deleteData(id) {
swal({
title: "Suppression",
text: "Veuillez confirmer la suppression",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmer",
cancelButtonText: "Annuler",
reverseButtons: true
}.then(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: "DELETE",
url: "{{url('eventment/type')}}/" + id,
data: {
_token: CSRF_TOKEN
},
dataType: "JSON",
success: function (results) {
if (results.success === true) {
swal("Done!", results.message, "success");
} else {
swal("Error!", results.message, "error");
}
} //success
});
})
) //swal
} //deleteData
</script>
Delete button
<button class="btn btn-danger" onclick="deleteData({{$type->id}})" >Supprimer</button>
route file
Route::delete('eventment/type/{id}','TypeController#destroy')->name('type.destroy');
controller
public function destroy($id)
{
$type = EventType::where('id', $id)->delete();
return redirect()->to(route('admin.type.index'))->withFlashSucces('Le Type A Bien Etait Supprimé');
}
You can do it without ajax.first your button make it as a form
<form id="del_event" action="{{ route('type.destroy',$type->id) }}" method="post"style="display: inline;">
{!! method_field('delete') !!}
{{ csrf_field() }}
<button class="btn btn-danger" type="submit" id="del_id">Supprimer</button>
</form
Button has a id "del_id" when it click call a function below there
<script>
$("#del_id").on('click', function (e) {
e.preventDefault();
swal({
title: "Suppression",
text: "Veuillez confirmer la suppression",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmer",
cancelButtonText: "Annuler",
}).then((result) => {
if(result) {
$("#del_event").submit();
}
}
)
;
});
</script>
Your destroy function
$type=EventType::find($id);
$type->delete();``

Show SweetAlert in delete function php

I'm trying to show the sweet alert in my DELETE FEATURE but sadly my code now is not working I already search for similar feature I see some but it not help me thought. Here is my code
<a id="<?php echo $id;?>" value="<?php echo $id;?>" name="delete" onclick="archiveFunction(this.id)">
<i class="glyphicon glyphicon-trash text-red"></i></a>
And this is my ajax request
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
$('#reloadpage').click(function() {
location.reload(true);
});
function archiveFunction(id) {
event.preventDefault(); // prevent form submit
var form = event.target.form; // storing the form
swal({
title: "Are you sure?",
text: "But you will still be able to retrieve this file.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Delete it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
// this is `post` request to the server
// so you can get the data from $_POST variables, says $_POST['delete'] $_POST['v_id']
$.ajax({
method: 'POST',
data: {'delete': true, 'id' : id },
url: 'user_del.php',
success: function(data) {
}
});
swal("Updated!", "Your imaginary file has been Deleted.", "success");
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
And this is my archive query . Don't bother about my query I set the status to 0 for me to archive one data and it will go to archive page. I just want to display the SWEET ALERT when I'm deleting the data or archiving it. Thanks in advance.
<?php session_start();
if(empty($_SESSION['id'])):
header('Location:../index');
endif;
include("../dist/includes/dbcon.php");
$id=$_REQUEST['id'];
$result=mysqli_query($con,"UPDATE accounts_at SET status = 0 WHERE id ='$id'")
or die(mysqli_error());
if ($result !== false) {
echo "<script type='text/javascript'>alert('Successfully deleted a account!');</script>";
echo "<script>document.location='index'</script>";
}
?>
Your UPDATED alert is in the wrong spot if you want it to run after the object is officially deleted on the server.
function(isConfirm){
if (isConfirm) {
// this is `post` request to the server
$.ajax({
method: 'POST',
data: {'delete': true, 'id' : id },
url: 'user_del.php',
success: function(data) {
//if you put it here it will run after the file is deleted
swal("Updated!", "Your imaginary file has been Deleted.", "success");
}
})
//if you put it here it will run before and even if your file is not deleted
// swal("Updated!", "Your imaginary file has been Deleted.", "success");
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
Open up the develop console in your web browser. Does it give you any errors?
Do you get any alerts at all?
try this:
function archiveFunction(id) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
dataType: "html",
success: function () {
swal("Done!", "It was succesfully deleted!", "success");
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
});
}

get ajax response in jquery modal form dialog

I can't get the ajax response when submitting a modal dialog form. It works perfectly when the form is not modal.
The form:
<div id="form2" style="display: none">
<form id="objectInsert" action="element/create" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" name="description"></textarea>
</div>
</form>
Here i get the ajax success part in the console!
$("#objectInsert").submit(function(e) {
e.preventDefault();
resetErrors();
var form = this;
var url = $(this).attr('action');
var data = new FormData($(this)[0]);
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
cahe:false,
processData: false,
contentType: false,
success: function(resp) {
console.log(resp);//Working
},
error: function() {
console.log('there was a problem checking the fields');
}
});
});
Here i get the ajax error part in the console! can someone tell me where i'm doing wrong?
$("#add_element").click(function(){
$("#form2").dialog({
modal:true,
width:400,
buttons:{
Send:function(e){
e.preventDefault();
var form = $("#objectInsert");
var url = form.attr('action');
var data = new FormData(form[0]);
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
cahe:false,
processData: false,
contentType: false,
success: function(resp) {
console.log(resp);//not working
},
error: function(xhr, status, error) {
console.log('there was a problem checking the fields');
console.log(xhr);
console.log(error);
}
});
return false;
},
Cancel:function(){
$(this).dialog("close");
}
}
});
});
The controller
public function create() {
try{
$this->form = new Form();
$this->form->post('name');
$this->form->val('isEmpty', 'name');
$this->form->post('description');
$this->form->val('isEmpty', 'description');
$this->form->fetch();
$this->form->submit();
$data = $this->form->get_postData();
$this->model->insert($data);
echo json_encode('success');
} catch (Exception $ex) {
$errors = $this->form->get_error();
$_SESSION["errors"] = $errors;
//This is for ajax requests:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])
== 'xmlhttprequest') {
echo json_encode($_SESSION['errors']);
exit;
}
foreach ($_SESSION["errors"] as $errors){
echo $errors;
echo '<br/>';
}exit;
}
}
see this code you have not closed the function block
success: function(resp) {
console.log(resp);//not working
},//This is not closed for success function
error: function() {
console.log('there was a problem checking the fields');
}

Validation not firing submitHandler

As stated in the title, the submitHandler is not firing/being reached, but the validation is working correctly. The submit handler is in the correct, but not firing.
$(function () {
$("#form").validate({
rules: {
domain: {
required: true
},
playerClass: {
required: true,
}
},
submitHandler: function (form) {
var accountNumber = $("input#accountNumber").val();
var domain = $("input#domain").val();
var playerClass = $("input#playerClass").val();
var dataString = JSON.stringify([{
"accountNumber": accountNumber,
"playerClass": playerClass
}]);
//Save Form Data........
$.ajax({
type: "POST",
dataType: "json",
url: "/",
contentType: "application/json",
data: dataString,
success: function () {
$('.render-info').html("<div class='alert alert-success'>You've successfully built your player code</div>");
$(".player-code").show();
},
failure: function () {
alert(dataString);
$('.render-info').html("<div class='alert alert-failure'>Submission Error</div>");
}
});
$(".player-code").show();
}
});
});
jsFiddle: Link
Because you don't have a real submit button. A div is not a button...
<div class="btn btn-default submit">Submit</div>
You need a button or input with type="submit" to trigger the submitHandler when the form is valid.
<input type="submit" class="submit" />
OR
<button type="submit" class="submit">Submit</button>
http://jsfiddle.net/e04rca0t/7/

Categories