The attempt to remove the ajax-loaded page while preserving the original div is proving to be


I have a function that is triggered when a link is clicked. This function uses ajax to load a new page over a div.

<pre><code>
    function displayContent(id)
{
    loadPage_signup = "register.php";
    loadPage_info = "userinfo.php";
    $.ajax({
      url:"register.php",
      dataType: 'html',
      success:function() {
         $("#user_info_container").load(loadPage_info);       
         $("#signup_header").load(loadPage_signup);
      }
    });
}
</code></pre>

Once the new page is loaded using ajax, there is a cancel button present on that page. Clicking this cancel button should remove the ajax-loaded content and show the original content in the div.

I tried writing a function for this functionality but it's not working as expected. The ajax-loaded content gets removed, but the original contents of the div do not appear. Can someone please help me figure out what's causing the issue?

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

<input type="button" id="cancel_button" name="btnCancel" value="Cancel" onClick="hideDiv('#signup_header')" />
</pre></code>

Answer №1

To preserve the original content for later restoration, it is important to store them in global variables.

Utilizing jQuery:

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

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

function closeAndRestoreContent(id) {
    $(id).remove();
    // restoring original content
    $("#readercycle_benef_container").html(original_content_benef);
    $("#rc_main_header_login").html(original_content_rc);
    // performing necessary actions
    $ret = $("#rc_main_header_login").show();
    $("#rc_main_header_login").nextAll().show();
}

Embedding this functionality in HTML:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble implementing styles for an element selected using the document.getElementsByClassName() method

In order to adjust the style of a dropdown menu, I need to change its top value to align it properly. The element is being generated by Drupal (a CMS tool) and is configured with classes for styling purposes in the admin view where content is authored. How ...

JavaScript function execution fails following an AJAX request

One of my functions is functioning properly with the alert: function RequestNext() { var xhr = getXMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { ...

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

The deep reactivity feature in Vue3 is functioning well, however, an error is being

I am currently using the composition API to fetch data from Firestore. While the render view is working fine, I am encountering some errors in the console and facing issues with Vue Router functionality. This might be due to deep reactivity in Vue. Here is ...

Issues with AJAX form submission functionality

I have attempted various methods, but every time I try to submit a form using ajax, the page reloads and nothing gets submitted. No success or error message is returned - it appears that the function isn't even being executed. Below is the code, tha ...

Trouble with AngularJS Controller Displaying/Hiding Content as Expected

I'm struggling to make content disappear when a button is clicked and then show a new set of content upon that button click. I can't seem to get it to work as intended. The first section simply does not disappear when the button is clicked. The s ...

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

Implementing event delegation as the default behavior on the document body

My problem began in IE8 when loading dynamic HTML pages containing script tags via AJAX (using magnificPopup.js). As a solution, I had to remove all the JavaScript code from these dynamically called pages and place them in a separate .js file. However, thi ...

What is the most effective way to incorporate an Ajax partial page refresh in this specific code snippet?

I'm in the process of updating a specific section on my page. This particular section is enclosed in a division tag with a designated "class name". In order to keep things straightforward and avoid any confusion, I am seeking guidance on how to implem ...

React: I am looking to incorporate two API calls within a single function

I am currently learning ReactJS and focusing on implementing pagination. My goal is to fetch page data from a server using an API, with Loopback being the tool for API integration. The initial setup involves displaying a list of 10 entries on the first pag ...

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

``What is the mechanism behind callbacks in AngularJS when making a call to a REST service?

Currently, I am diving into the world of AngularJS and REST. The code snippet that I'm analyzing has the term callback repeatedly used in an authentication function. I'm curious to know if "callback" is a JavaScript or Angular keyword, or simply ...

What is the best way to link a socket.id with an element in an array?

I am currently working on creating a chat-room where the names of connected users are shown in an 'Online Users' section. The following code snippet adds each user's name to an array and displays the contents of that array. However, if a u ...

Can we accurately pinpoint individual LineSegments in three.js by hovering over them, especially those with unique geometries?

Creating two examples of drawing lines in three.js was quite a fun challenge. One example showcased different geometry and material, while the other kept it simple with just one geometry and material. The demonstration links can be found here: Example 1 an ...

What is the best method for retrieving values from selected radio buttons?

I am trying to retrieve the values of the selected radio buttons with the name is_external example.html <div class="exter_inter"> External <input type="radio" name="is_external" value="1" <?php if(isset($_GET['status']) &&am ...

Can the getState() method be utilized within a reducer function?

I have encountered an issue with my reducers. The login reducer is functioning properly, but when I added a logout reducer, it stopped working. export const rootReducer = combineReducers({ login: loginReducer, logout: logoutReducer }); export c ...

Apply a CSS class when the tab key is pressed by the user

Currently in my Angular 14 project, I am working on a feature where I need to apply "display: block" to an element once the user reaches it using the tab key. However, I am struggling with removing the "display: block" when the user tabs out of the element ...

Issues with Semantic UI Calendar not displaying properly

I am currently experimenting with the Semantic UI Calendar, where there is a date input field and a calendar that pops up when selected as demonstrated in this initial example. Since I am not familiar with this process, I am uncertain if I have properly li ...

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

Update a portion of a hyperlink using jQuery

Currently, I am utilizing Ransack for sorting purposes. However, I encountered an issue when attempting to modify the sorting links in cases where both search and sorting functionalities are implemented using AJAX. As a result, I have taken it upon myself ...