Execute the script once again to generate the iframe, then reinsert it into the Dom (specifically for the Twitter widget)

I seem to be running into an issue with the Twitter widget Timeline, although the problem could apply to any script.

My goal is to embed the Twitter widget Timeline (which ultimately results in an iframe). It appears that the method of adding the iframe involves inserting a script into the post, which will then call another script with functions that will eventually execute a function to load/create the final iframe.

<script>
!function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, "script", "twitter-wjs");
</script>

On my website, I have posts (post1, post2, post3) that display partial content of the post. When a user clicks on the title of one of these posts, the partial post is removed from the DOM, the full post is fetched with Ajax, and then attached to the DOM. When closing the fully loaded post, its content is removed from the DOM and the partial post content is attached again. This process of attaching and detaching is to prevent conflicts with #ids.

However, when the partial content is attached back into the post, the iframe is empty and the script does not execute again to load it. This issue only occurs with the Twitter widget iframe, and not with other iframes like YouTube videos.

Can someone provide guidance on this issue?


Update:

There are a few things worth noting here. The script added in the post appears to load the Twitter widget script to the head of the document. The post script checks for the existence of this head script before creating the iframe. This suggests that the iframe is not being created during the full post (Ajax) load. Deleting the head script allows the iframe to be created correctly in the full post.

However, this "trick" does not solve the issue for the reattached content. The problem persists when I reattach the content and the post script does not run again (nor does any other script).


Update2:

Here is a fiddle showcasing the reattach issue http://jsfiddle.net/KsFJR/

Answer №1

Did you consider removing the iFrame element entirely from the DOM and then reinitiating the script?

Answer №2

Instead of constantly detaching and reattaching your content, consider just hiding and showing it. It may require some clever thinking with your ids, but the effort will be worth it in the long run.

Every time you move iframes in the DOM, they will reload their content. This can cause issues, as described in this related question.

It seems like twitter's script is not designed to handle constantly reloading the iframe contents. Instead of trying to work against it, consider simply hiding and showing the posts. This way, you can avoid modifying the DOM and potentially causing unexpected behavior.

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

Accessing my data on my personal server through firestore entails an extra step in the request process

If I were to set up Cloud Firestore on my personal server, wouldn't that create a "two-way trip" for accessing my data? What I find concerning is the fact that the client-side has to send a request to my server first, and then my server must reach ou ...

The publish-subscribe feature appears to be ineffective

Recently starting with meteor, I learned about the importance of removing autopublish. So, I decided to publish and subscribe to a collection in order to retrieve two different sets of values. Here is the code on my meteor side: Meteor.publish('chann ...

PHP does not support MQTT calls with AJAX

I have a program that utilizes ajax. The program sends data (text field) to abc.php using ajax. Then abc.php is supposed to publish the data (text field) to the MQTT (Mosquitto) server. However, it is not working and I am getting the error message "Failed ...

Dynamically change the content of the DataTable by utilizing jQuery

I am facing an issue with updating a DataTable using jQuery when the contents of the table are modified. Initially, I have a HTML table with an empty tbody, which is populated dynamically based on selected filters such as select options. The table uses Dat ...

React testing with Mocha experiencing an Invariant violation

Currently, I am in the process of setting up a React project using Electron. Lately, I have been experimenting with configuring Mocha as my test framework. Everything seems to be working fine when I run: "test": "mocha -w --require babel-core/register ...

Is using JQuery recommended for implementing onclick and onchange events?

Hello there, I'm completely new to the world of jQuery and currently facing a bit of confusion. Here's my dilemma: should I be utilizing jQuery with the onclick event or the onchange event for an element using something like this: $(selector).som ...

Can React provide custom styling to a specific segment of text before displaying it?

I'm looking to create a pokemon search box that offers suggestions of pokemons as the user types. It's working fine so far, but I also want to highlight the searched text when displaying the entire pokemon name. Basically, I want to replace the ...

Issues with $.ajaxSetup({async:false}) persisting in Internet Explorer

I have been trying to implement ajax file upload using the code below. It works perfectly in Firefox, but I encountered issues in IE. I specifically need a synchronous operation for which I set the async parameter to false: $.ajaxSetup({ async: false }); ...

How can I send a Vue.js object to a Laravel controller?

I am working with a Vue component that includes an object like this - dataObj = [{id:1,name:'sanaulla'},{id:1,name:'parvez'}] When I try to send a post request to the Laravel Controller using the following code - axios.post("/api/ ...

Generate div elements dynamically for each object being populated in JSON using JavaScript

I have a main container that displays a list of JSON objects. Each object should be displayed as a separate DIV element with specific details, one after the other. Additionally, I have a comments section on a webpage where the details are stored in JSON f ...

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

Utilizing JSON for seamless integration of FullCalendar into Joomla component

I am currently working on integrating FullCalendar with my Joomla component by writing a JSON feed in the controller: public function getAvails() { $app = JFactory::getApplication(); $document = JFactory::getDocument(); $admin_id = $ ...

Modify the font style of numbers based on the keyboard language selected by the user

Is it possible to change the font family of numbers in input fields based on the user's keyboard language? For example, if the user is typing in Persian, the numbers should be displayed in a Persian font, and when they switch to an English keyboard, t ...

Using Vue to fetch JSON data with Axios

When trying to retrieve user data from a MongoDB in JSON format using axios.get within a Vue.js application, my aim is to visualize this data by iterating through all user objects in the users array. The issue I'm facing is that each character is trea ...

Failure to Trigger the jQuery Ajax Start Handler

Why is my jquery ajax start handler not firing? I am using jquery version 1.6.2 Here is the code example I am using: $(document).ready(function(){ $('#rr-loading-overlay').ajaxStart(function(){ alert('asda'); }).ajaxStop(function( ...

Develop an asynchronous function that can fetch a result at a later time within an Express route

I need to retrieve an Excel file from Box.com using their API and then convert the Excel data into JSON format. Afterwards, I plan to display this JSON data using Express and Handlebars. Below is the function I've created for fetching the Excel file ...

Attempting to convert a Raw image file and upload it onto the server

I am currently attempting to upload an image to my server using PHP. I have two files for this task - index.php and myscript.php. Index.php <div id="results">Your captured image will appear here...</div> <h1>Mugshot Test Page& ...

Executing multiple asynchronous requests to the same managed bean with varying action methods in JSF 2

In a JSF2 Primefaces page called MultiAjax.xhtml, there are two buttons named BUTA and BUTB. The page is managed by a ViewScoped ManagedBean called MBMultiAjax which has two action methods: butAAction and butBaction. Both of these methods print out startTi ...

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...

When using jQuery load and TinyMCE, I encountered an error stating "g.win.document is null" upon subsequent loads

New to stackoverflow and thrilled to make my first post! I'm working on a page where clicking a button triggers the function editIEPProgram(). This function counts how many specific divs exist, adds another div, loads it with content from '/cont ...