CODEWITHSUNDEEP
javascriptjqueryajax
Priyanshu
Priyanshu

Reputation: 70

Not able to call a jquery function in a ajax returned code

I am not much of a javascript programmer, I am learning so please forgive the stupid mistakes.

I am trying to save customer details using ajax (its not the jquery ajax), which returns another form for advanced details. I am using a jquery plugin for validation of input boxes. But the validation doesn't work on the form returned by ajax.

Ajax code:

function createcustomer() {
    var firstname = _("firstname").value;
    var lastname = _("lastname").value;
    var email = _("email").value;
    var phone = _("phone").value;
    var status = _("status");
    if (firstname == "" || lastname == "" || email == "" || phone == "") {
        status.innerHTML = "Fill out all of the form data";
    } else {
        _("signupbtn").style.display = "none";
        status.innerHTML = 'please wait ...';
        var ajax = ajaxObj("POST", "save-customer.php");
        ajax.onreadystatechange = function () {
            if (ajaxReturn(ajax) == true) {

                if (ajax.responseText != "failure") {
                    _("signupform").innerHTML = "";

                    _("advancedform").innerHTML = ajax.responseText;


                } else {
                    window.scrollTo(0, 0);
                    _("signupform").innerHTML = "Error Occured";
                }
            }
        }
        ajax.send("firstname=" + firstname + "&lastname=" + lastname + "&email=" + email + "&phone=" + phone);
    }

}

function ajaxObj(meth, url) {
    var x = new XMLHttpRequest();
    x.open(meth, url, true);
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}

function ajaxReturn(x) {
    if (x.readyState == 4 && x.status == 200) {
        return true;
    }
}

I have tested the ajax return code thouroughly and the jquery works independently on that form. This is how I initiate the jquery validation plugin :

$(document).ready(function()    {
    $('form').validationEngine();
});

I tried putting the exact code in the createcustomer() function to reload the jquery function but it doesnt work. Is there any way I can call that jquery validation function in the ajax function? Any help will be appreciated.

Regards Priyanshu

Upvotes: 0

Views: 168

Answers (1)

Roger Barreto
Roger Barreto

Reputation: 2284

I'm suspecting that your validation is trying to find a form that doesnt exists at the execution time, try putting the validation binding when you have sure that the form exists in your DOM. To achieve this you should put the validation binder:

$('form').validationEngine();

...inside the callback after the ajax loads some HTML data in the document. Like this:

ajax.onreadystatechange = function() {
    if(ajaxReturn(ajax) == true) {

        if(ajax.responseText != "failure"){
            _("signupform").innerHTML = "";

            _("advancedform").innerHTML = ajax.responseText;
            $('#ajaxreturnform').validationEngine('attach'); //Here

        } else {
            window.scrollTo(0,0);
            _("signupform").innerHTML = "Error Occured";
        }
    }
}

I've looked around here and found this post Attach Validation the accepted answer may inlight your problem also. Try to put the 'attach' command as a parameter to your binder as well as the #id of your form.

Upvotes: 2

Related Questions