CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Jithu
Jithu

Reputation: 111

Removing ajax loaded page and retain original div not working


I have the following functionn called when a link is clicked. The function loads a new page over a div through ajax.

<pre><code>
    function getSummary(id)
{
    loadPage_signup = "new_user.php";
    loadPage_benef = "readercycle_benef.php";
    $.ajax({
      url:"new_user.php",
      dataType: 'html',
      success:function() {
         $("#readercycle_benef_container").load(loadPage_benef);       
         $("#rc_main_header_login").load(loadPage_signup);
      }
    });
}
</code></pre>

In this newly loaded page through ajax, a cancel button exists. On clicking this cancel button, the ajax loaded page should be removed and must retain the original div content.

I wrote the below function that is intended do this functionality. But this is not working. The ajax loaded page is removed, but the original div does not come up with children. Please help me understand what went wrong!

<pre><code>
function closeDiv(id) {
    $(id).remove();
    $ret = $("#rc_main_header_login").show();
    $("#rc_main_header_login").nextAll().show();
}


<input type="button" id="button_cancel" name="btnCancel" value="cancel" onClick="closeDiv('#rc_main_header_newuser')" />
</pre></code>

Upvotes: 0

Views: 457

Answers (1)

scrowler
scrowler

Reputation: 24405

You need to save the original contents into global variables so you can restore it later.

jQuery:

var original_content_benef = '';
var original_content_rc = '';

function getSummary(id)
{
    loadPage_signup = "new_user.php";
    loadPage_benef = "readercycle_benef.php";
    $.ajax({
        url:"new_user.php",
        dataType: 'html',
        success:function() {
            // save original content
            original_content_benef = $("#readercycle_benef_container").html();
            original_content_rc = $("#rc_main_header_login").html();
            // replace content
            $("#readercycle_benef_container").load(loadPage_benef);       
            $("#rc_main_header_login").load(loadPage_signup);
        }
    });
}

function closeDiv(id) {
    $(id).remove();
    // restore original content
    $("#readercycle_benef_container").html(original_content_benef);
    $("#rc_main_header_login").html(original_content_rc);
    // do your showing
    $ret = $("#rc_main_header_login").show();
    $("#rc_main_header_login").nextAll().show();
}

HTML:

<input type="button" id="button_cancel" name="btnCancel" value="cancel" onClick="closeDiv('#rc_main_header_newuser')" />

Upvotes: 1

Related Questions