Question

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.

Answer 1

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!