What is the best way to close an ajax page within the main page using a button?

I am dealing with a situation where I have 2 pages. The first page contains a div called 'ajaxicall', which loads another page inside it.

The challenge I am facing is figuring out how to close the second page when I click on the "close" button within that page, and then display the containers of my first div again. Any insights on this would be greatly appreciated. Thank you.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>

<body>
  <div class="ajaxicall">
    <span id="addtobasketspan">First Div</span>
    <img src="images/shopping-cart-xxl.png"/>
  </div>

<script>
  $("#addtobasketspan").click(function(e) {
    $.ajax({
       url:'secondpage.html',
       type:'get',
       data: 'lid=1',
       success:function(data){
          $("ajaxicall").load('secondpage`enter code here`.html');
       }
  });
});
</script>

</body>
</html>
javascriptjqueryhtmlcssajax

Answer №1

Check out the code snippet on jsFiddle: https://jsfiddle.net/acc33fm3/

This code uses jQuery to dynamically add a button to a page retrieved through AJAX, allowing you to easily hide the content when needed:

$("#addtobasketspan").click(function(e) {
  $.ajax({
    //url: 'secondpage.html',
    type: 'get',
    data: 'lid=1',
    success: function(data) {
      //$(".second-div").load('secondpage`enter code here`.html');
      $(".second-div").append('<button class="close-div">X</button>');
    }
  });
});

$(document).on("click", ".close-div", function() {
  $(this).closest('div').hide();
});

To implement this functionality in your project, just remember to append a button and use it to hide the loaded content.

Answer №2

For the second page, it's recommended to include an element such as a close button to easily exit and return to the default view of the first page. Here is an example of how you can achieve this:

<a href="#" id="closeButton">Close</a>

To add functionality to the close button, you can use the following code snippet:

$("#closeButton").click(function(){
    $('#ajaxCall', window.parent.document).html('
        <span id="addToBasketSpan">First Div</span>
        <img src="images/shopping-cart-xxl.png"/>
    ');
});

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

Aligning text inputs inline within a Bootstrap form for a cleaner and organized

I am currently working on designing a form using Bootstrap, and I have a specific requirement where the first name and last name fields need to be displayed inline while the rest of the form remains unchanged. Although I have managed to make the inline fu ...

htmlcsstwitter-bootstrap

There is a potential risk of NextResponse.json file compromising the integrity of JSON

Running nextjs 13.5.3 and implementing an API route handler under /app This route handler mainly fetches data from a CMS and then returns the response. The IDs on the client side are hashed, so one of the functions is to unhash the IDs from a request and ...

javascriptjsonnext.js

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Updating or adding items to an array using underscore library

A scenario involves an object with incoming data and an array that contains saved data. The goal is to check if the "cnName" from the new data already exists in the "savedData" array. If it does, then the object in "savedData" should be replaced with the n ...

javascriptarraysunderscore.js

CSS: choose all elements starting from the n-th element and apply styles to them

Is it possible to choose specific child elements beyond the first few in a parent element? To clarify, let's say there's a div containing 7 spans. How can I select only the spans starting from the 3rd element onwards - so specifically span 4, 5, ...

csscss-selectors

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

Scheduled Job unable to complete post request

(I am completely new to the world of JavaScript, node.js, and Heroku so I apologize in advance if my question is not very clear) I recently set up a Heroku node.js application with a scheduled task that should run every hour. The task does run as expecte ...

javascriptnode.jsherokuscheduled-tasks

I'm curious if it's possible to utilize Raspberry Pi GPIO pins within a JavaScript frontend

Is it possible to utilize Raspberry Pi's GPIO pins in Javascript? Specifically, I am interested in reading the values of the Raspberry Pi PIR sensor without having separate Python and Javascript applications. Ideally, I would like a solution that inte ...

javascriptnext.jsraspberry-pigpio

Excessive text overflowing in a chat interface can be resolved through CSS styling

After conducting a thorough search, it appears that very few individuals are taking this important element into consideration. I currently have a chat interface set up with a div element containing a ul, which then houses li elements that contain p element ...

htmlcss

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

javascriptjqueryhtmlcsssvg

Issue with Vue Multiselect auto-suggestion functionality

I've been utilizing the [vue-multiselect] library for my project. [1]: https://www.npmjs.com/package/vue-multiselect. Within a form, I have multiple multiselect dropdowns. The issue I'm facing is with the browser's autocomplete feature. I&a ...

javascriptvue.jsautocompletemulti-selectvue-multiselect

Sending a batch of files through an axios request by passing them as an object

I need to send multiple images in a specific format through an API call { "date":"currentDate", "files":[Files uploaded via input box] } Here is my approach: Method 1 const event = document.querySelector("#files"); const f ...

javascriptjqueryreactjsfile-uploadaxios

Z-Index not functioning as expected

I've been trying to position my <h1> header on top of a light div with a background image called light.png. I used Z-index to stack them and added position:relative, but for some reason, the <h1> is not showing above the <div class=ligh ...

htmlcssz-index

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

What is the best way to send pg-promise's result back to the controller in Express?

While working with Ruby on Rails (RoR), I am familiar with the MVC (Model-View-Controller) concept. In this framework, the controller is responsible for receiving data from the model, processing it, and rendering the view. An example of this structure look ...

javascriptpostgresqlexpresspromisepg-promise

Animate.css bxSlider text animations

As I am in the process of setting up a slider for my website, I have encountered some issues. I am utilizing bxslider and wished to incorporate animations for the text on each slide by integrating animate.css. Animate.css is quite simple: just add "animat ...

jquerycssanimationbxslider

The Express API will only provide the initial key-value pair of an object in the response

I'm working on fetching nested data objects. Although I can successfully retrieve the object data in the console, I encounter an issue when attempting to access this data using return res.json(imageObject). Instead of retrieving all key-value pairs of ...

javascriptexpress

The useRef() hook call in NextJs is deemed invalid

I have been attempting to implement the useRef() hook within a function component in my NextJs project, but I keep encountering the error below. Despite reviewing the React Hook guidelines, I am unable to determine why this error persists and the functio ...

javascriptreactjsreact-hooksnext.jsuse-ref

What is causing the "draggable='true'" attribute to fail on a React-rendered component?

This situation is really frustrating me, and I am hoping that someone can offer some assistance. I'm working with a React.Component that looks like this: var Vehicle = React.createClass({ ondragend: function(e) { e.preventDefault(); ...

htmlreactjsdraggable

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

javascriptdatedatetimetimetypescript