CODEWITHSUNDEEP
jqueryajax
Nikhil Rupanawar
Nikhil Rupanawar

Reputation: 4191

$.ajax works only when put alert()

I tried to load content inside content those are loaded previously with AJAX. I put the code

with load():

jQuery("#contentpage").on("submit", "#loginform", my = function() {
    $("#contentpage").load("/logincheck.jsp");
    alert("this is required ");
});

with $.ajax():

jQuery("#contentpage").on("submit", "#loginform", function() {

    $.ajax({
        url: '/logincheck.jsp',
        success: function(data) {
            $('#contentpage').html(data);
        }
    });

    alert("this is required ");
});

#loginform is a HTML form loaded with previous AJAX request, I successfully access in with .on() function.

But the problem is when I submit #loginform without putting alert('this is required') box then its refreshing the whole page. Also content inside #contentpage are also not changing.

But if I do the same with putting alert("this is required"), its working fine, contents are getting loaded in #contentpage without refreshing whole page.

Is this a timing issue? Ajax request takes time and it's asynchronous? Please correct me if I am wrong.

Upvotes: 2

Views: 1369

Answers (2)

shyam sasi
shyam sasi

Reputation: 97

async key is default true and should change it to false

$.ajax({
    async:false,
    url: '/logincheck.jsp',
    success: function(data) {
        $('#contentpage').html(data);
    }
});

Upvotes: 0

BishopZ
BishopZ

Reputation: 6378

have you tried this?

        jQuery("#contentpage").on("submit","#loginform",my=function(event){ 
             event.preventDefault();
             $("#contentpage").load("/logincheck.jsp");
             alert("this is required ");
        });

This should at least stop the page from refreshing and may sort out the other problems as well. Good luck!

Upvotes: 5

Related Questions