Adding a div inside an iframe

Can someone help me troubleshoot this code snippet?

jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

I'm struggling to create a div with an id of "groundplan_popup_exit" within the dynamically generated iframe. The console warning about the deprecated /deep/ combinator is confusing me further. I don't know if that's related to the issue.

EDIT:

Here's how my code currently looks: https://i.sstatic.net/kZ1oB.png

Console screenshot: https://i.sstatic.net/RaNwF.png

Screenshot of the iframe console elements:

https://i.sstatic.net/7SMcF.png

I'm quite new to using jQuery and iframes, so any guidance on why the #groundplan_popup_exit div isn't being created would be appreciated.

javascriptjqueryhtmlcssiframe

Answer №1

There seem to be some issues at hand:

let iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');

You are already adding the element to the body here.

let exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

Following the previous step, you are attempting to add it again with jQuery("#groundplan_popup_exit"), which is not even present.

A potential fix (not tested) could look something like this:

let iframe_body = iframe.contents().find('body');
let exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');

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

Experiencing issues with archiving files in PHP and receiving a 'zipArchive::close() Read Error: no such file or directory in c:/' error message?

When using PHP to download multiple files as a zip folder, the code below is giving me an error message: "zipArchive::close() Read error: no such file or directory in C:// path" I have added an HTML button that, when clicked, retrieves the id of the row t ...

phphtmlfiledownloadphp-ziparchive

Create a link that allows users to download a file with just one click

By implementing a feature on my Node.js server, users can generate files by clicking a button on a webpage. The server then generates a .zip file that I want to make available for automatic download onto the users' clients. Once the download is comple ...

javascriptnode.jsexpress

Executing a function upon clicking a Modal button with Ant Design in a React project

I have implemented a Modal using Antdesign and am trying to trigger a function to log the user out once they confirm the logout action on the Modal pop-up. According to the Antdesign API, I need to utilize the 'onOk' property to call the function ...

javascriptreactjsantd

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

How come every time I try to log in with an empty shopping cart, it returns an error involving the .map function?

I'm currently working on a React e-commerce project. As part of the process, when I select products and attempt to view them in the shopping cart, I encounter an issue. If the cart is populated with items, everything works smoothly. However, if I log ...

javascriptreactjsauthenticationreact-router

Tree Grid in jqGrid with Offline Data

Accessing the jqGrid documentation for tree grid, I discovered the following information: "At present, jqGrid can only interact with data that is returned from a server. However, there are some tips and resources available that explain how to work w ...

javascriptjqueryjqgrid

Forward request to jsp document located in the WEB-INF directory through Ajax

I'm struggling to redirect users to a specific page in my web app after successful login. I have attempted using requestdispatcher and manipulating JSON objects in my servlet, but so far nothing has worked. My Approach jQuery(document).ready(functio ...

javajavascriptajaxjspservlets

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

In my HTML code, I have two select elements: <label for="h_slat_type">Horizontal Slat Type</label> <select name="h_slat_type" id="h_slat_type"> <option disabled="disabled" selected>Select</option> ...

javascriptjqueryjquery-validate

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Assigning value to a member variable in a TypeScript Angular class

Currently, I am in the process of learning Angular. To enhance my skills, I am developing a simple web application using Angular and Spring Boot. One challenge I encountered is assigning a variable to the member variable of a Class. import { Injectable } f ...

javascriptangulartypescript

Finding the value of a radio button dynamically created by jQuery

I am having an issue retrieving the value of a radio button that is generated using jQuery. I suspect there may be some problems with event handling. Below is my code: HTML <div id="divOption1"></div> The jQuery script to generate t ...

javascripthtmljqueryjquery-events

Using Angular 2 to round a calculated number within HTML

In the HTML code, there is a calculated number associated with Component1. Component1 serves as a tab page within a Bootstrap tab panel. Below is the HTML code with the tab panel: <div id="minimal-tabs" style="padding:75px;padding-top:60 ...

htmlangulartypescriptangular-pipe

Parsing JSON using jquery.TokenInput (structure)

I am encountering an issue with jquery.tokenInput. Below is my tokenInput code: $(".search-betrocket").tokenInput("http://www.websitehere.com/web/search", { searchDelay: 2000, minChars: 3, tokenLimit: 5, hintText: "Smart Search...", ...

javascriptjqueryjson

Javascript collapsible panel that is initially expanded

I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...

javascripthtmlcss

Creating an interactive animation of bouncing balls within an HTML5 canvas using JavaScript

function refBalls(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var circles = [{x:40,y:100,r:20,color:'black',vx:5,vy:10}] function draw(){ ctx.beginPath(); ctx.arc(circles[0].x, circles[0].y, circles[0].r, ...

javascripthtmlcss

Creating a duplicate or copy of an element in jQuery using

My dilemma involves a div that consists of text/images and a custom jQuery plugin designed for those images. The plugin simply executes a fadeIn/fadeOut effect every 3 seconds using setInterval. This particular div acts as a "cache" div. When a user wants ...

javascriptjqueryjquery-plugins

What exactly is the window object model all about?

While I understand that there is a concept known as the DOM in javascript, I have often wondered why there isn't something similar to a Window Object Model. After all, if you look at the structure of the DOM-tree, it does seem like it could be represe ...

javascriptjquerydom

Unable to sort array within a computed property in Vue.JS

Currently, I am working on enhancing my skills in Vue.js and have encountered an issue with sorting arrays in Vue.js. Despite using the sort(a-b) method for ascending order (least alphabet/value first), the array remains unchanged. Even with a function ins ...

javascriptvue.js

Adjust the size of a ul element to fit within a div

I am struggling with getting a ul element with 2 li items inside to perfectly fit a parent div. I want the li items to take up 100% of the height of the div and 50% of the width each. <div id='menu-wrapper'> <ul id='menu-list&a ...

htmlcsshtml-lists

The back-end code on the server is unable to identify the variable in my req.body, as it is being flagged

At the moment, I am in the process of developing a web application that needs to transmit data from the client side to the server side whenever a specific button is clicked. However, when I click the button, the terminal consistently informs me that the va ...

javascriptnode.jsexpressejs