Jquery show - hide on validation using remote rule

Hello experts.
I need help to show and hide my loader div until the script is completing a remote validation.
I tried to use ajaxSend ,ajaxStart and ajaxStop but i didn't get it work.
When i use :
....
async: false,
ajaxSend: $("#loader").show()
...

I get my loader div with display none in the pop up window as "show"
Any help?
var p = $("#popuploader");
p.load("customer/frm/myajaxpage", function (c, e, d) {
        if (e == "success") {
            $("#frmchgpassw").validate({
                onkeyup: false,
                onclick: false,
                onfocusout: false,
                rules: {
                    oldpword: {
                        required: true,
                        remote: {
                            url: 'myfunctionsource',
                            async: false
                        }
                    },
                    pword: {
                        required: true
                    }
                },
                messages: {
                    oldpword: {
                        required: 'required',
						remote: 'blablabla'
                    },
                    pword: {
                        required: 'required'
                    }
                }
            });
        } else {
            alert("errorload")
        }
    });

Open in new window

LVL 2
PanosAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Ok I am going to guess. Is this what you are looking for - showing the loader when you click the Change button?
p.dialog({
        buttons: {
            "Change": function () {
                $('#loader').show();
                var a = $("#frmchgpassw").valid();
                if (a) {
                    $("#formholder").hide();
                    $("#carloader").show();
                    var f = $("#frmchgpassw").serialize();
                    $.post('someurl',{}, function(data) {
					//Do something
                          $('#loader').hide();
                          });
					)
                }
            },

Open in new window

0
 
Julian HansenCommented:
Can you give more information on what you are doing.

From your code you are loading element popuploader with content from here customer/frm/myajaxpage. On complete you are setting some validation rules.

What do you want to show / hide?
0
 
PanosAuthor Commented:
Hi.
I have a code like:
<div id="formholder">
<form id='frmchgpassw' name='frmchgpassw'>
<input type='password' id='oldpword'  name='oldpword'>
<input type='password' id='pword'  name='pword'>
</form>
</div>
<div id="loader" style="display:none" align="center"><br><br><br><br>
  <center><img src="img/loader.gif" border="0">&nbsp;&nbsp;&nbsp;Please wait .....</center>
</div>
Until the script is finished with the remote check - show the loader div
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Julian HansenCommented:
Ok but then why not simply show the loader before calling .load and at the end of the complete function hide it again?

I don't think I am seeing the problem?

var p = $("#popuploader");
// SHOW LOADER HERE
$('#loader').show();
p.load("customer/frm/myajaxpage", function (c, e, d) {
        if (e == "success") {
            $("#frmchgpassw").validate({
                onkeyup: false,
                onclick: false,
                onfocusout: false,
                rules: {
                    oldpword: {
                        required: true,
                        remote: {
                            url: 'myfunctionsource',
                            async: false
                        }
                    },
                    pword: {
                        required: true
                    }
                },
                messages: {
                    oldpword: {
                        required: 'required',
						remote: 'blablabla'
                    },
                    pword: {
                        required: 'required'
                    }
                }
            });
        } else {
            alert("errorload")
        }
       // HIDE LOADER HERE
       $('#loader').hide();
    });

Open in new window

What am I missing?
0
 
PanosAuthor Commented:
OK
Below all needed code so that you can have a better idea what is going on.
Maybe i have to place somewhere else the $('#loader').show() and $('#loader').hide() code
$('#link_chpassword').click(function () {
    var p = $("#popuploader");
    var b = $("#frmchgpassw");
    p.dialog({
        autoOpen: false,
        title: "Change password"
    });
    p.dialog({
        buttons: {
            "Change": function () {
                var a = $("#frmchgpassw").valid();
                if (a) {
                    $("#formholder").hide();
                    $("#carloader").show();
                    var f = $("#frmchgpassw").serialize();
                    $.post(
					//Do something
					)
                }
            },
            "Cancel": function () {
				//Do something
				}
        }
    });
    p.dialog("open");
    p.load("customer/frm/frmchangepassword.cfm", function (c, e, d) {
        if (e == "success") {
            $("#frmchgpassw").validate({
                onkeyup: false,
                onclick: false,
                onfocusout: false,
                rules: {
                    oldpword: {
                        required: true,
                        remote: {
                            url: 'com/functions.cfc?method=fcheckpassword',
                            async: false
                        }
                    }
                },
                messages: {
                    oldpword: {
                        required: 'required',
						remote: 'Wrong code'
                    }
                }
            });
        } else {
            alert("errorload")
        }
    });
});

Open in new window

0
 
Julian HansenCommented:
Still not clear what the issue is - based on what you have posted it should be the same as before - only change would be to move the .show to the first line in the click event
$('#link_chpassword').click(function () {
    $('#loader').show();
    var p = $("#popuploader");
    var b = $("#frmchgpassw");
    p.dialog({
        autoOpen: false,
        title: "Change password"
    });
    p.dialog({
        buttons: {
            "Change": function () {
                var a = $("#frmchgpassw").valid();
                if (a) {
                    $("#formholder").hide();
                    $("#carloader").show();
                    var f = $("#frmchgpassw").serialize();
                    $.post(
					//Do something
					)
                }
            },
            "Cancel": function () {
				//Do something
				}
        }
    });
    p.dialog("open");
    p.load("customer/frm/frmchangepassword.cfm", function (c, e, d) {
        if (e == "success") {
            $("#frmchgpassw").validate({
                onkeyup: false,
                onclick: false,
                onfocusout: false,
                rules: {
                    oldpword: {
                        required: true,
                        remote: {
                            url: 'com/functions.cfc?method=fcheckpassword',
                            async: false
                        }
                    }
                },
                messages: {
                    oldpword: {
                        required: 'required',
						remote: 'Wrong code'
                    }
                }
            });
        } else {
            alert("errorload")
        }
        $('#loader').hide();
    });
});

Open in new window

0
 
PanosAuthor Commented:
Tha validation starts clicking on button "change" and not on ('#link_chpassword').click(function () {.......
0
 
Julian HansenCommented:
I am sorry your responses are not helping me. You are very familiar with your code and the functionality you want to achieve - I am not. It would help both of us if you gave more information than a one-liner.

Where does button "change" suddenly come in to the picture - it was not in your original post.

Maybe try explaining exactly what you want to happen here because posting snippets of code without any explanation is not helping.

You want to show a loading div when you do some validation you posted some code to demonstrate that. Now you are introducing the button change.

The principle remains the same. In the button change event handler show your loader and when the .post is complete hide it again.

That is all I am preapred to go with until I know more about your application otherwise we are going to waste time.
0
 
PanosAuthor Commented:
julianH
Button "change" is not in the original code but if you see the second code (38349620) i posted to help you i have on line 9-10 the created buttons in the popup window.

There is no more code.
When i click the change button - i have a validation.....(line 12:var a = $("#frmchgpassw").valid();)


Sorry i made difficult for you.
0
 
PanosAuthor Commented:
Not exactly but i got the idea:
p.dialog({
        buttons: {
            "Change": function () {
                        $("#loader").show();
                var a = $("#frmchgpassw").valid();
                if (a) {
                $("#loader").hide();
                    $("#carloader").show();
                    $("#formholder").hide();
                    var f = $("#frmchgpassw").serialize();
                    $.post(
                              //Do something
                              )
                }
                        else{$("#loader").hide();}
            },
                          });
                              )
                }
            },
                     

Thank you for your help and again i'm sorry .
0
 
PanosAuthor Commented:
Thank you
regards
panos
0
 
Julian HansenCommented:
You are most welcome - please post back to this thread if you get stuck and I will see what I can do to assist.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.