Content not refreshing when closing and reopening Highslide iframe

I am encountering an issue with Highslide where I am unable to reopen a popup with new content. Even though the contentId remains the same, the content is not being updated when the popup is reopened. Below is the code snippet that showcases the problem:

function doSomething() {
  //Changes to fileExistList (removed for simplicity)
  var newHTML = $('fileExistList').clone(true); //Cloning div as Highslide removes it
  $(newHTML).id = 'fileExistList2'; //Change cloned divs id
  $('fileExistList').insert({ //add cloned div to page
    before: newHTML 
  });
  hs.htmlExpand(null, { contentId: 'fileExistList2', align:'center' });
}

Although the initial call displays properly, subsequent calls only show the original popup content without any updates. It is worth mentioning that iframes are used for the Highslide popups.

If anyone has suggestions on how to modify this function so that it opens with the updated content, your insights would be greatly appreciated.

Thank you.

javascriptprototypejs

Answer №1

When using Highslide, one crucial configuration option is preserveContent, which should be set to false when dealing with HTML content. However, simply setting this option was not enough to make it function properly. I also needed to inspect the hs.clones object and eliminate the id of the HTML content that was being duplicated. By doing so, Highslide was able to retrieve the refreshed id content accurately.

Answer №2

It may be a bit late to respond, but the most effective way is to redirect your page (the one displayed in the iframe) once you have completed your task.

You can do something like this:

Page1->Enter your information->Redirect to itself->Page1

This method has consistently worked well for me in my projects.

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

"Utilizing Bootstrap Modal for efficient AJAX saving of multiple records with the help of bootstrapValidator

I'm encountering an issue with a bootstrap modal form and validation using bootstrapValidator. The problem I'm facing is that when I open the modal, fill out the fields, close it, reopen it, refill the fields, and submit the form, my script inser ...

javascriptajaxbootstrap-modalbootstrapvalidator

Encountering difficulty in assigning the desired value to the select box

// updating the subType value in the controller $scope.newEngagement.subType = 3; // creating a list of engagement subTypes $scope.engagementSubTypeList = [ { "subTypeId": 1, "subTypeName": "value1" }, { "subTypeId": 2, "subTypeName": "value2" }, { " ...

javascriptangularjsmaterialize

Navigation for GitHub pages

I've been working on this for what feels like forever. The persistent Error 404 I'm encountering is with the /Quest/questlist.txt file. https://i.sstatic.net/NYYRa.png Here's the code snippet I've been using: ``// QuestCarousel.tsx ...

javascriptreactjsnode.jsgithub-pages

What specific method of sorting does this code utilize?

Here's a JavaScript code snippet that sorts an array of n numbers in ascending order. I've used this code in several interviews, but I'm still unsure about which sorting algorithm it represents. let arr = [7, 9, 2, 11, 5] for (let i = 0; i ...

javascriptarrayssorting

Transferring Variables to the Following Page Without Using a Form or Changing the URL

I have a question about passing a variable along with a link to exampleA.php without using URL extensions or form submitting. I've done some research and found that most people suggest using Ajax, but I want to handle the variable once I'm on the ...

javascriptphpjqueryajax

How can you initiate the wizard sequence again in TelegrafJS?

I've created a handler function for "/start" that leads to the wizard scene. Now, I have a message with an inline_keyboard containing a button labeled "redo". When I click on the "redo" button, I want it to restart the entire scene, basically initiat ...

javascriptnode.jstelegram-botrestarttelegraf.js

Is it possible that Javascript isn't functioning in an ionic template?

In my Ionic project, I have multiple HTML template files. Here is an example: $stateProvider .state('home', { url: '/', templateUrl: 'home.html', controller: 'HomeController' }) The JavaScript code in the mai ...

javascriptangularjsionic-frameworkionic-view

What is the best way to emphasize a table row during a search rather than just the text?

I am currently using a jQuery script that searches for a specific string in a simple text input field and highlights only the string itself if it is found. However, my data is organized within a table and I am interested in knowing if it is possible to hig ...

javascriptjqueryhtml

A valid ReactComponent must be returned in order to properly render in React. Avoid returning undefined, an array, or any other invalid object

While working on my react application, I came across an error that I have been trying to troubleshoot without any success. It seems like I must be overlooking something important that could be quite obvious. *Error: VideoDetail.render(): A valid ReactComp ...

javascriptreactjsreact-nativereact-routerreact-redux

Is it possible to create an array that organizes monthly income data from a JSON file?

I'm currently developing an Accounting System where I need to display a bar chart showing the monthly Incomes and Expenses. The data is retrieved from a database using AJAX, and it returns the following JSON: { "results":{ "his ...

javascripthtmlarraysjsonjavascript-objects

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Hey there, I'm in the process of developing a simple demonstration of a material table - Take note that this is a stackblitz link and for some reason, the id column isn't showing up. Here's a snippet from my app.component.ts: import { C ...

javascripthtmlangulartypescriptangular-material

Getting the country code using the ng-intl-tel-input directive

How to Extract Country Code from Input in AngularJS I am a newcomer to AngularJS and currently working on a project involving a dropdown for country code and an input field for a mobile number. Upon submitting the form, I am able to retrieve the mobile nu ...

javascriptangularjsintl-tel-inputangularjs-3rd-party

Combining two objects retrieved using ngResource in AngularJS

Seeking guidance on merging two objects retrieved using ngressource. Every 5 seconds, I invoke my service to fetch a message and aim to append the new message with the older ones. The JSON message I receive: [ {"age": 0,"id": "my first tweet","name": "H ...

javascriptangularjsngresource

What is the best way to update information in a mongoose document using the _id field?

Although it may sound like a typical question, I've already conducted research and couldn't find a solution. I'm currently working on developing a discord bot and I don't have much experience in this area. The issue I keep encountering ...

javascriptnode.jsmongoosediscord.js

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

How can Sequelize be used to effectively set up User Data with specific constraints?

This particular query isn't looking for the "best practice" answer, but rather a more suitable solution compared to what I currently have. Essentially, I have a User model/table that is associated with the UserScore model/table. User.belongsTo(model ...

javascriptnode.jsexpresssequelize.js

Is it possible for jcarousel to interact with a database as well?

Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel. css js Currently ...

javascriptcssasp.netc#-4.0jcarousel

Is writeConcern not being returned by MongoDb's deleteOne function?

I have a function that deletes a specific document in MongoDb based on an id match. Below is the code snippet. deletePoll: function(db, user_id, callback) { db.collection('polls').deleteOne({ _id: user_id }, ...

javascriptmongodbdatabase

Using a while loop to chain promises in webdriver.io

I am trying to capture a full webpage screenshot by taking tiles of the viewport size. I have almost completed this task, but I am relatively new to promises and need guidance on the correct approach. Below is my code. The issue I am facing is that the ca ...

javascriptseleniumpromisees6-promisewebdriver-io

Utilize ModifyDOM to erase text triggered by selecting a radio button

I have created a form that includes four radio buttons along with a reset button to clear the form. When a radio button is selected, information is displayed using "displayText". I am looking to add an onclick handler to trigger a function that will delete ...

javascript