I will try to describe the problem in words ...
There is an application that generates the page dynamically, filling it with data from the server. The result is a list in the form of property names. If you click on the title, a pop-up modal window opens that contains the detailed properties of this property (also dynamically loaded from the server and filling the modal page). The modal window contains a button, on click on which the function is triggered, which closes this window and we, respectively, again see the previously generated page with the list of property names. If you click again on another property in the list, then in the new modal window that appears, the old properties of the previous property remain and new ones are added, which is an error.
I can not understand in any way - how can I make the old properties be erased when you click again on another property name from the list and only new ones are displayed? Need to add some condition before dynamically creating a modal window? Or "zero out" all the fields that are created in the modal window?
Here is a piece of code that selects from the list what was clicked and then calls the functions that populate the modal window:

// Choice index of property in array of ID within local storage by click $("#ownProperty").click(function(e) { var elem = e.target || event.srcElement; var elemA = $(elem).closest("a"); // look for nearest element with tag "a" var currentId = +$(elemA).attr("id"); // get value "id" var userId = JSON.parse( localStorage.getItem("id") ); var index = userId.indexOf(currentId); // return index of element createRental(index, currentId); createInspection(index, currentId); });

ADDED:

Here is a piece of one of the fill functions:

 function createRental(index, currentId) { var propertyName = JSON.parse( localStorage.getItem("propertyName") ); var singlePropertyName = propertyName[index]; var $userProperty = $("<p/>", { id: "propertyNAME", text: singlePropertyName }); var elem2 = document.getElementById('propertyNAME'); if (!elem2) { // Create single property in the top navbar $(".userProperty").append($userProperty); }; var userMeta = JSON.parse( localStorage.getItem("meta") ); var singleMeta = userMeta[index]; var userPrices = JSON.parse( localStorage.getItem("prices") ); var singlePrices = userPrices[index]; // Review field "is_sale". If true - 1 field, else - 2 if (singleMeta.is_sale == true) { // Dynamically create the variables for Sale Price RENTAL AMOUNT form var $liRental1 = $("<li/>", { id: currentId + "sale" }); var $divRental11 = $("<div/>", { class: "item-content" }); var $divRental12 = $("<div/>", { class: "item-inner" }); var $divRental13 = $("<div/>", { class: "item-title label", text: "Sale Price" }); var $divRental14 = $("<div/>", { class: "item-input" }); var $inputRental1 = $("<input>", { autocomplete: "off", type: "text", name: "priceAdvertiseAs", value: singlePrices.price_advertise_as }); var elem3 = document.getElementById(currentId + "sale"); if (!elem3) { // Dynamically create the Sale Price RENTAL AMOUNT form $("#rental").append($liRental1); $liRental1.append($divRental11); $divRental11.append($divRental12); $divRental12.append($divRental13); $divRental12.append($divRental14); $divRental14.append($inputRental1); }; };

It does not work correctly. the singlePropertyName field remains the same, when you click on another name from the list, and the old singlePrices.price_advertise_as field singlePrices.price_advertise_as also not overwritten - a new one is added to it ...

  • The given code does not give practically any information for the answer (neither how data is added to the windows, nor how the windows are created, or how they are closed). The only thing I can advise is to delete what is in the windows before adding new content to them. - Arnial
  • "functions that fill the modal window" - it is clear that these functions do not clear the old contents. $("#ownProperty") - causes suspicion of duplicate id attributes. - Igor
  • @Arnial, there are about 400 lines of code, I did not post it ... What is the easiest way to zero the data before adding content? - PrinceOFF
  • @Igor, with attributes everything is fine, if you mean functions at the end of the code. They fill in different forms, but from the same object ... - PrinceOFF
  • You can try to make an example on jsfiddle.net but with a big piece when few people want to understand. Add, at least, the code of one of the functions involved in filling. - Arnial

2 answers 2

Thank you all, I solved this question by adding a function that is suspended from closing a modal window. The function erases all elements with the ".remove ()" method. Accordingly, with a new call to the modal window, it is pristine clean)

    This is a server problem, not a client. You on the server need to limit the lifetime of the requested page, I came across this.

    If the IIS server on c # needs to be added to the server response (on OnLoad or before Response.End) Response.Cashe.SetExpires(DateTime.MinValue) if not, read the SetExpires or ExpiresDate analogue for your server. Otherwise, the server cache gives outdated info.

    On php, it is done like this: header('Expires: '.gmdate('D, d MYH:i:s \G\M\T', time() + 0 )); https://stackoverflow.com/questions/1036941/setup-http-expires-headers-using-php-and-apache

    You can also read the protocol specification http, there is https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

    • Thanks, I will know about it, but, probably, in my case it is in another case. I previously loaded all the data into local storage and from there I fill in the required fields in a modal window, I do not send a request to the server. - PrinceOFF
    • I agree, I didn’t get into the question after seeing JSON, I thought that you are dynamically loading data (loading function, it wasn’t there). And you have a problem with the conclusion. Then I delete the answer? - nick_n_a