Jquery show - hide on validation using remote rule

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?

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

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();
    });

Select allOpen in new window

What am I missing?

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")
        }
    });
});

Select allOpen in new window

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();
    });
});

Select allOpen in new window

Tha validation starts clicking on button "change" and not on ('#link_chpassword').click(function () {.......

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.

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.

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 .

Thank you
regards
panos

You are most welcome - please post back to this thread if you get stuck and I will see what I can do to assist.