Question

I have a form in a jQuery popup on a webpage. The jQuery popup is a div named .vote-form and the form inside it has the name “#form”.

When the form is submitted, the content inside the jQuery popup changes to a success message. I need to make it so that when the jQuery popup is closed, the success message is removed and the form is refreshed back to the original form, so that when the jQuery popup is opened again, the form is showing again and NOT the success message.

My feeble attempt to get this result involved refreshing the ENTIRE page when the jQuery popup is closed. This PARTLY has the desired result, but when the page is refreshed, most browsers get a popup asking if the user wants to resubmit the form content. I need to avoid this.

This was my code handling the closing of the .vote-form:

$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    window.location.reload();
});

I suspect that its possible to refresh ONLY the div, and not the entire page, but I do not know how to accomplish it.

Can someone assist me?

EDIT: Based on one of the answers below, I modified my code. I also wanted to show the code used to open the form up too:

$('.vote').click(function() {
    $(this).parent().find(".vote-form").fadeIn("normal");
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    $(".vote-form").load(window.location.href  + " .vote-form-container");
});

Here is the problem – I have 3 forms on the page. When “vote-form-container” is loaded, its loading ALL THREE forms into the .vote-form box – how do I modify the code to only load the .vote-form-container that is part of the specific .vote-form – I suspect I have to use $(this) but I tried modifying the code to this and it didnt work:

$(".vote-form")(this).load(window.location.href  + " .vote-form-container");

I am thinking I did it wrong.

EDIT 2: Now the “Close” button dosen’t work after the form is reloaded the first time:

$('.vote').click(function() {
    $(this).parent().find(".vote-form").fadeIn("normal");
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    var current_form = $(this).closest('.vote-form'),
    index = $('.vote-form').index(current_form)
    current_form.load(window.location.href  + " .vote-form-container:eq(" + index + ")");
});

Answer 1

Don’t reload the page but redirect your user:

window.location.href = window.location.href.toString()

Or load the new form with ajax:

$(".vote-form").load(window.location.href  + " .vote-form");

For more information on the ajax approach see api.jquery.com/load/#loading-page-fragments

---

Update:

Using jQuery the index function you are able to replace only the current form.

 // I asume your button is in the form
 var current_form = $(this).closest('.vote-form'),
     index = $('.vote-form').index(current_form)

 current_form.load(window.location.href  + " .vote-form:eq(" + index + ")");