Sadiq Jaffer Sadiq Jaffer - 7 months ago 20
Javascript Question

AJAX POST working but callbacks not fired

I checked many posts regarding this issue and tried different solutions, but none work for me, my AJAX POST is working which simply adds the email to my emailing list, but both my call backs success and error is not firing expect in unknown conditions or i can call it (randomly).

HTML:

<form name="myform">
<input id="user_email" type="email" name="email" placeholder="Your Email Here" required>
<button type="submit" onclick="onbtnclick()">SIGN UP</button>
</form>


AJAX:

$.ajax({
type: 'POST',
url: 'http://mail.ayaami.com/freebook_10x10.php',
crossDomain: true,
data: send_data,
success: function(responseData, textStatus, jqXHR) {

alert("Thank you for joining Ayaami mailing list.");
window.open("http://dev.ayaami.com/site/free-book-success");

// var value = responseData.someKey;
// console.log(' log d: '+responseData);
// console.log(' log d: '+textStatus);
// console.log(' log d: '+jqXHR);
// var obj = jQuery.parseJSON(responseData);
// hide the email box
// text_respond="<p>"+obj.result+"</p>";

// set cookies

var cookieName = 'ayaami_newsletter_lightbox';
var cookieValue = 'true';
var myDate = new Date();
myDate.setMonth(myDate.getMonth() + (500 + 12));
document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
";domain=.ayaami.com;path=/";
},
error: function(responseData, textStatus, errorThrown) {
alert('You already subscribed in the mailing list.');
console.log('log e:' + responseData);
console.log('log e:' + textStatus);
console.log('log e:' + errorThrown);
}
});


I tried in success to popup an alert or redirect to another greeting page, none works, I removed the datatype before in the AJAX parameters still nothing changed.

Edition, wrapped with document.ready

$( document ).ready(function() {
$('#mybtn').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://mail.ayaami.com/freebook_10x10.php',
crossDomain: true,
data: {email:$(this).parent().find('input').val()},
success: function(responseData, textStatus, jqXHR) {

alert("Thank you for joining Ayaami mailing list.");
window.open("http://dev.ayaami.com/site/free-book-success");

// var value = responseData.someKey;
// console.log(' log d: '+responseData);
// console.log(' log d: '+textStatus);
// console.log(' log d: '+jqXHR);
// var obj = jQuery.parseJSON(responseData);
// hide the email box
// text_respond="<p>"+obj.result+"</p>";

// set cookies

var cookieName = 'ayaami_newsletter_lightbox';
var cookieValue = 'true';
var myDate = new Date();
myDate.setMonth(myDate.getMonth() + (500 + 12));
document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
";domain=.ayaami.com;path=/";
},
error: function(responseData, textStatus, errorThrown) {
alert('You already subscribed in the mailing list.');
console.log('log e:' + responseData);
console.log('log e:' + textStatus);
console.log('log e:' + errorThrown);
}
});

});


}

Answer

try the following, use e.preventDefault() to prevent the default redirect to page

  $(function(){
     $('body').on('click','.leka-button',function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'http://mail.ayaami.com/freebook_10x10.php',
            crossDomain: true,
            data: {email:$(this).parent().find('input').val()},
            success: function(responseData, textStatus, jqXHR) {

                alert("Thank you for joining Ayaami mailing list.");
                window.open("http://dev.ayaami.com/site/free-book-success");

                // var value = responseData.someKey;
                //  console.log(' log d: '+responseData);
                //  console.log(' log d: '+textStatus);
                //  console.log(' log d: '+jqXHR);
                //  var obj = jQuery.parseJSON(responseData);
                // hide the email box 
                //      text_respond="<p>"+obj.result+"</p>";

                // set cookies 

                var cookieName = 'ayaami_newsletter_lightbox';
                var cookieValue = 'true';
                var myDate = new Date();
                myDate.setMonth(myDate.getMonth() + (500 + 12));
                document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
                    ";domain=.ayaami.com;path=/";
            },
            error: function(responseData, textStatus, errorThrown) {
                alert('You already subscribed in the mailing list.');
                console.log('log e:' + responseData);
                console.log('log e:' + textStatus);
                console.log('log e:' + errorThrown);
            }
        });

        });
});

ps: remove the onclick function and change the type of the button to button

<button type="button">SIGN UP</button>