删除ajax加载的页面并保留原始div不起作用

Question

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>

Answer 1

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')" />