Display jquery dialog in parent page - javascript

I want to use jQuery Dialog to display popup through an iframe. However when using it, the overlay and dialog is only displayed inside the iframe not on the parent.
I have checked out this question but that solution will work if I have access to the code of parent page that contains my iframe but in my scenario I don't have access to the pages that will use my page as iframe. How can I display Dialog in parent page?

Related

How to add iframe element tag in dialog popup using html

I want to add an iframe inside a pop up dialog. How can I add it inside this dialog popup using JavaScript.
Here is the dialog pop inside which I want to use an iframe.
Here is the Iframe tag that I want to show inside the popup. You can add any website in iframe. Thanks in advance for your help.
<iframe src="http://www.w3schools.com"></iframe>
You cannot display google.com inside an iFrame. Reason being that Google sends an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page. This is a security feature to prevent click-jacking. Details at How to show google.com in an iframe?
EDIT after the 1st comment below:
I assume you want to load the iframe inside the dialog when "New Dialog" button is clicked. Can you try doing this:
last=$(<div/>").dialog(dialogOptions).dialogExtend(dialogExtendOptions).load("https://www.html5rocks.com/en/tutorials/cors/");
Updated fiddle : https://jsfiddle.net/rwk1Ljcy/1/

Refresh parent window after submitting a form in a IFrame in jQuery

I would like to know how can i refresh/reload parent window from an iframe on submit without closing the frame using javascript / jquery.
Parent window contains Display table and Button that opens an Iframe.
Iframe contains a form which on submit saves data in the table which is displayed on parent window.
At present data is not displayed until i refresh the page manually.
please Suggest me a method to do so.
This is the scenario
main window has a buttton called form ,
on clicking it an Iframe Opens ,
Iframe has a Form which on submit saves data,
this data is displayed in a table on the main window.
But when I do submit data is saved but not displayed.
I want a method so that My Main window is refreshed / reloaded without having to close the Iframe and refreshing it manually
Please suggest a solution to this problem ...don't offer any other method..
This thing is Not Possible Parent window cannot be refreshed keeping open the I-frame

Hide another page's button

I want to load another site's page (e.g: www.a.com/b.html) on my site's page. TO do that I use an iframe to do that. But in that page (b.html), there is a button that I need to hide. Is there any way to hide that button with javascript or jquery.
Is there any other way to get the content of that page and edit some and display on my page.
$().contents should allow you to access the elements within an iFrame
$('iframe').contents().find('#btnId');

Reference to immediate parent of a popup in javascript

I am opening a popup in my web page using JavaScript. From the popup, I access an element in the parent page using windows.parent.document.getElementsById("...") and this gets me the required element, which I can then process.
Now, there are couple of occasions when the web page is opened in another page using an IFrame. For this, the above JavaScript breaks, as windows.parent points to the outermost page (which contains the IFrame).
Q: How do I get a reference to the immediate parent page of a popup in JavaScript, when the parent page is opened from another page via IFrames?
Edit
What we are doing now is get the element using document.getElementsById("...") from the page calling the popup and then pass this value to the popup. Wanted to to know if there are any other elegant way to get the reference.
What you want is
window.opener

How to Show the Pop up in iframe outside?

I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,
You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.
I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)
Put the show javascript into container page, and in the iframe just call parent.showpopup().
parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.

Categories