After ajax submit, the message is repeated - javascript

When I run submit, an alert message occurs as many times as you send it before you reload.
For example.
first run submit occur success message
not refresh second run submit two repeat occurs success message
not refresh third run submit three repeat occurs success message
...
not refresh n run submit n repeat occurs success message
Why does it run like this?
How can I solve this problem?
My code is as follows.
$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}

WRONG
$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}
CORRECT: Put this outside of modal.shown because every time the modal shown, it will write a submit function that repeats as many as it shown.
$(document).on('click', 'button#submit', function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});

Related

Action returns Status Code 204 but, AJAX success function doesn't execute

My controller is correctly returning new HttpStatusCodeResult(204)(checked using debugging), but the success function is not triggered. I just want to reset a text field after I've submitted something.
Ajax:
$(document).ready(function () {
$("#offersubmit").click(function (e) {
$.validator.unobtrusive.parse($('offerForm'));
if ($(this).valid()) {
var valdata = $("#offerForm").serialize();
$.ajax({
url: "/Product/MakeOffer",
type: "POST",
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: valdata,
success: $(document).ready(function () {
alert("AAA");
$('#offerText').val('');
})
})
}
});
});
Also tried with alert() and it didn't show anything. Any help would be appreciated
You need to remove the $(document).ready(.. code
success: $(document).ready(function () {
alert("AAA");
$('#offerText').val('');
})
should be
success: function(data) {
alert("AAA");
$('#offerText').val('');
}

How to stop setTimeout that was started outside the function that detects if the form was submitted?

My setTimeout starts when the page is loaded, I need to stop it as soon as the user clicks the button and submit the form, the variable seems to get lost and I can't stop, any tips?
my code
$(function() {
function atualiza(){
$.get('online.php?p=SMS',
function(resultado){
$('#onlineagora').html(resultado);
});
}
timer1 = setTimeout('atualiza()', 850);
$('#formsms').submit(function( event ) {
$.ajax({
url: 'aguardesms.php',
type: 'POST',
dataType: 'html',
data: $('#formsms').serialize(),
success: function(content){
clearTimeout(timer1);//STOP ATUALIZA
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});
solved using setInterval/clearInterval
var timer1 = setInterval(atualiza, 850);
function atualiza(){
$.get('online.php?p=SMS',
function(resultado){
});
}
$('#formsms').submit(function(e){
e.preventDefault();
clearInterval(timer1);
$.ajax({
url: 'aguardesms.php',
type: 'POST',
dataType: 'html',
data: $('#formsms').serialize(),
success: function(content){
$("#DisplayDiv").html(content);
}
});
});

Ajax redirect on error

I'm calling php file through ajax call and if it returns nothing i want to redirect user to another page (It's for error reports, if it doesn't return anything it means that user logged in). Tried to add error section but it doesn't work. Any suggestions will help. Thanks! Btw, I have small jQuery function at the top of the ajax function, why it breaks my whole ajax call?
ajax.js
function loginAjax() {
//$("#email_errors").empty(); //This function doesnt work and kills whole ajax call. Here is loginAjax function call line - <button type = "submit" id = "push_button" onclick = "loginAjax(); return false">PushMe</button>
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
}
});
}
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
},
error: function(){
window.location.replace("http://stackoverflow.com");
}
});
}
To redirect using javascript all you need to do is override the location.href attribute.
function loginAjax() {
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
// the success method is deprecated in favor of done.
done: function(data) {
$("#login_error").html(data.login_message);
},
fail: function(data) {
location.href="path/to/error/page";
}
});
}

Pause then allow or not a post with JQuery

I work with Telerik and when I submit changes from my grid I want to check some data with an AJAX call and then, if the data is OK continue the submit.
I don't really know how the data is submitted but I get it works like a classic form. Is-it possible to "pause" and "restart" the post ?
function onSubmit(e) {
// Pause Submit
$.ajax(
{
url: '/MyController/MyAction/',
type: 'POST',
dataType: 'json',
async: false,
success: function (check) {
if(check)
{
// Allow Submit
}
else
{
alert('error');
// Stop Submit
}
}
});
}
Try this way:
function onSubmit(e) {
$.ajax(
{
url: '/MyController/MyAction/',
type: 'POST',
dataType: 'json',
async: false,
success: function (check) {
if(check)
{
// Allow Submit
}
else
{
alert('error');
// stop at error
e.preventDefault();
}
}
});
} // end onSubmit

Ajax Get Request with JQuery Error

I'm trying to call a php script with a get request and using the data theaddress however the results are showing me the source of the page im calling.
The page im calling is here
Here is my ajax function that will get this page
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function()
{
alert('Something went wrong, saving system failed');
}
});
});
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function(error)
{
alert (error); // this is the change from the question
}
});
});
Put the dataType as json with a curly brace
data: {theaddress:address.value},
dataType:'json',
success: function(output)
{
alert('success, server says '+output);
}, error: function(xhr)
{
alert (xhr.status);
}
and get the data in ManorWPG.php as $_GET['theaddress']
** share the xhr.status if failed.

Categories