Whipe a div empty before inserting new

[TeddyKiller]

When completing a form, it goes through this process below. #changePassMessage gets a message.. eg: 'Your password has successfully been changed' but if I click submit again, it puts the message next to the message already there.

 

What I want is to whipe that div before putting the new content in. How can I do it?

 

    $("#changePass").click(function() {
        $("#changePassLoading").slideDown("slow").html('<span class="loading">loading</span>');

        $.ajax({
            type: "POST",
            url: "modules/forgotPassword/changePassword.php",
            data: {pass: $("#newPass").val(), confirmPass: $("#confirmPass").val(), email: $("#changePassEmail").val()},
            cache: false,
            success: function(html){
                $("#changePassMessage").prepend(html);
                $("#changePassMessage").slideDown("slow");
                document.getElementById('content').value='';
                document.getElementById('content').focus();
                $("#changePassLoading").hide();
            }
        });
        return false;
    });

[F1Fan]

                $("#changePassMessage").prepend(html);

This line is adding to the end of it (prepend). I'm not sure what the jQuery function is to just replace, but the standard JavaScript function would look like this:

document.getElementById('changePassMessage').innerHTML = html;

That would replace whatever is in there with your "html" variable.

[TeddyKiller]

Thanks. It would be this - $("#regTitle").html("Hello World");

[TeddyKiller]

My next problem, is that if i clicked the submit, and click it again.. the loading message doesn't disappear... how can I fix this?

[F1Fan]

One method I frequently use for apps like this is to disable buttons when they are clicked, and have the Ajax success function re-enable it after the code has finished executing. This disallows users from submitting over and over while the script is still running.

[TeddyKiller]

yeah, but what i mean is.. when the script has finished executing, clicking submit again doesn't get rid of the loading.. it brings the loading up and stays there.

[F1Fan]

I don't follow you. Why would you want "loading..." to still appear after it's done loading? Wouldn't you want that to go away until it's clicked again?

[TeddyKiller]

Right. what happens.

I click the button, it says loading.

Loading disappears and content is displayed.

 

I click the button again, it says loading.

Loading DOESN'T disappear and content is displayed.

[F1Fan]

So are you saying that you are trying to append to what ever is in the div, as long as it's not "Loading..."? If so, you're gonna have to something different. A few options:

• Create logic that removes the last "Loading..." before appending with the requested data (not recommended, because you'll never know if that would remove any wanted data)
  
• Create an additional place to put these messages and remove them whenever you want to, like maybe a jQuery dialog.
  
• Or, the easiest, do the disable button thing that I suggested before, but in addition, change the button text temporarily to "Loading..." until it's done loading and then swap it back to whatever the button text (value) was before.
  

[TeddyKiller]

Ok, if I take the button option. How can I do it?

[F1Fan]

    $("#changePass").click(function() {
        document.getElementById('changePass').disabled = true;
        document.getElementById('changePass').value = 'Loading...';

        $.ajax({
            type: "POST",
            url: "modules/forgotPassword/changePassword.php",
            data: {pass: $("#newPass").val(), confirmPass: $("#confirmPass").val(), email: $("#changePassEmail").val()},
            cache: false,
            success: function(html){
                $("#changePassMessage").prepend(html);
                $("#changePassMessage").slideDown("slow");
                document.getElementById('content').value='';
                document.getElementById('content').focus();
                $("#changePassLoading").hide();
                document.getElementById('changePass').disabled = false;
                document.getElementById('changePass').value = 'Submit';
            }
        });
        return false;
    });