?
Solved

Jquery show - hide on validation using remote rule

Posted on 2012-08-28
13
Medium Priority
?
518 Views
Last Modified: 2012-08-30
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

0
Comment
Question by:Panos
  • 6
  • 6
12 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38349486
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
 
LVL 2

Author Comment

by:Panos
ID: 38349516
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38349558
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 2

Author Comment

by:Panos
ID: 38349620
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38349727
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
 
LVL 2

Author Comment

by:Panos
ID: 38349758
Tha validation starts clicking on button "change" and not on ('#link_chpassword').click(function () {.......
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38349791
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
 
LVL 2

Author Comment

by:Panos
ID: 38349810
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
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38349843
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
 
LVL 2

Author Comment

by:Panos
ID: 38349943
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
 
LVL 2

Author Closing Comment

by:Panos
ID: 38349946
Thank you
regards
panos
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38350159
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question