What is the best way to erase the contents of a pop-up window?

Whenever I click on an event in the calendar, a popup window appears displaying textboxes and a list of items. The issue arises when I close the popup after selecting an event with items in the list; the same items show up for other events without refreshing the page, even though they have different ids.

How can I clear the item list when closing the popup so that only items related to the selected event are displayed for other events?

Below is the section of code where the list is called:


var scheduleData = { scheduleId: calEvent.id };
$.ajax({ 
   type: 'POST',
   traditional: true, 
   url: '/Schedule/JsonGetItemsBySchedule/',
   datatype: 'json',
   data: scheduleData,
   success: function (result) {
      var itemlist = result.items; loopItems(itemlist); 
   }
}); 

Answer №1

Dealing with clearing the content of a Pop-Up was a challenge that I faced as well.

If you are familiar with the ID / have established a DOM structure in the pop-up using tags (e.g., )

You can access the DOM / Tags and modify the content using .innerHTML just like you normally would.

For instance, if you aim to clear the Body:

popup.document.getElementsByTagName('body')[0].innerHTML = '';

and if you want to clear a specific Tag:

popup.document.getElementById('myContent').innerHTML = '';

Where

    popup = window.open();
    popup.document.write('<body> Content you will not need later <body>');
/
    popup.document.write('<div id = "myContent">Content you will not need later</div>');

Respectively

Both methods have been successfully tested on my project, both approaches proved effective.

Source:

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

The Android system is unable to convert a value of type java.lang.String into a JSONObject

I encountered an issue while trying to access a json web service on my localhost emulator. Although the service is accessed successfully, I am facing a strange exception in my code when attempting to convert a json string to a json object, resulting in an ...

Error: The lambda response was not defined. Please review your function code. The response returned with a status of 500 in 583 milliseconds

https://i.sstatic.net/GUHr9.png I'm experimenting with Netlify and its Lambda function feature to execute a Node.js function. Following the guide at https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/. ...

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Currently, I'm working on a project that involves combining navigation and a video player within the same div container. Here is an image link And another image link The concept is that when you click on one of the four boxes, a new video will appe ...

Selecting a webpage from a dropdown list to display its specific content within an iframe

I have a dropdown menu similar to this: <form name="change"> <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value"> <option value="">Choose</option> <opti ...

Error: The callback function is no longer supported in Model.find() in Mongoose

I am having trouble retrieving all users from the database because I keep getting an error that says Model.find() no longer accepts a callback. Can someone please help me understand how to fetch data from my mongodb database? router.get('/users', ...

In what way can I modify the object in the first array when the second array includes the same object but with varying values, excluding the primary value?

This is the initial array I am working with [{"e":"24hrTicker","E":1532084622977,"s":"ETHBTC","p":"-0.00260600","P":"-4.029","w":"0.06279622", "x":"0.06465200","c":"0.06207700","Q":"0.10800000","b":"0.06207900","B":"0.58000000","a":"0.06209300", "A":" ...

"Encountered an error while trying to define a Boolean variable due

I am in the process of creating a TF2 trading bot with price checking capabilities. I encounter an issue while trying to define a boolean variable to determine if the item is priced in keys or not. My attempt at replacing isKeys with data[baseName].prices ...

Combine arrays using underscore or lodash

Hello, I need some assistance. I have a couple of arrays containing grades with associated classes attributes like the examples below: var arr1 = [{ "id": 53, "name": "Grade 1 AppMonkeyzTest", "classes": [{ "id": 5 ...

Utilizing the $skip parameter in the SharePoint 2013 RESTful API

Excuse my lack of experience with REST, as I am new to it. Currently, I am utilizing SP2013 Odata (_api/web/lists/getbytitle('<list_name>')/items?) in order to retrieve the contents of a list. This particular list contains 199 items, so I ...

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Even though we're in 2020, I'm still working with AngularJS 1.x instead of the newer version due to work requirements. Despite this limitation, I am facing a challenge with setting up a form that requires exclusive-or validation between two field ...

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

What is the best way to merge two array files together using jq?

Imagine having file one: [1, 1, 2] then file two: [2, 3, 3] Is there a way to combine these arrays from the two files without altering their content? I'm looking for an output like this: [1, 1, 2, 2, 3, 3] On a side note, I am interested in concate ...

Determine the mean values to showcase at the center of a D3 donut graph

Check out this plunkr where I'm utilizing angularjs and d3.js. In the plunkr, I've created several donut charts. I'm interested in learning how to display the average data in the center of the arc instead of the percentage. Additionally, I& ...

Generate a fresh FileReader instance using the downloaded file via XmlHTTPRequest

I am attempting to use an XmlHTTPRequest object (level 2) downloaded through a "GET" request in order to create a new FileReader object. My goal is to create the FileReader object within the onload function of the xhr. The file, which is a .gz file, downl ...

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

Currently, I am facing an issue while trying to load a webpage in a node environment using JSDOM. The webpage relies on localStorage for its functionality. I have attempted to load the webpage by utilizing JSDOM's URL configuration option and accessi ...

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

Node.js Buffer problem: How to tackle it

Encountering an issue with buffers in Node.js The constant buffer is defined as follows: var commands = { BufferOne : new Buffer([0XCA, 0X11, 0X00, 0X00, 0X60, 0X01, 0X00, 0X01, 0X08, 0X07, 0X6D, 0X00, 0X00, 0X00, 0X00, 0 ...

Organizing content by title or link using jQuery

I am attempting to organize a list based on the title of a link so that it is displayed in an A-Z format. Unfortunately, I am unable to modify the HTML structure easily for better styling as I am restricted to using tr>tr>tr>. I am struggling to f ...

Customize the CSS for a Material UI popover styling

I am currently working with a Material UI popover and attempting to apply CSS styles to it. This is the code for my popover component: import React, { memo, useCallback } from 'react'; import PropTypes from 'prop-types'; import { ...

How can I access the parent elements within a recursive directive?

I'm currently implementing a recursive directive called https://github.com/dotJEM/angular-tree to iterate through a model structure like the one below: $scope.model = [ { label: 'parent1', children: [{ ...