My page structure is like
I have a html page which consist of a jQuery Dialog.
Within the jQuery Dialog a screen opens within iFrame.
Now the problem I am facing is - I want to close jQuery Dialog by clicking a button within iFrame. (For e.g. If my iFrame source is Google.com, then on click of search button my dialog box should close)
So, Can I write close call handling click event of search button in $(document).ready(function() of my html page?
Note :- iframe source is not accessible.
If no, then what are the other possible option to do it?
Thanks in Advance.
If the iFrame source is on a different domain than you cannot do this.
Options
Use the Dialog's built in close functionality
If the position of your item that you want to trigger the close is fixed, you can overlay a div covering. Fire the close event on the clicking of the div. http://jsfiddle.net/YvbPB/
See jQuery/JavaScript: accessing contents of an iframe my friend.
Related
I have the following problem:
I have an extjs menu in one iframe, and when i click outside this iframe the menu does not collapse, like it does when I click away in the same iframe the menu belongs to.
Do you guys have an idea on how to solve this issue?
This actually happens to any component that should hide when it loses focus. So, I'd love to see a more general solution, if you guys happen to know.
Thanks!
P.S.: I'm using version 3.2
While I don't know if your parent frame is also running a ExtJS application, you are likely going to need to utilize XDM (cross-domain messaging). https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
You would then need to add a listener on the parent frame for clicks within the window, and pass that click event to the iframe. The iframe would then handle the click as needed, which in your case is dismissing the menu.
For anyone still looking for a solution on this one.
You can address the Extjs menu and hide all open menus from the parent frame like this (fe inside a click event on the parent):
var menu = window.frames[0].[ExtApplicationName].app.getController('[CONTROLLER]').getMenu().items.items
Next, you can loop through the menu items and hide them by doing:
menu[i].menu.hide();
I have an iframe that has a Modal in it,
Is there a way for me to display the Modal dialog over the iFrame width/height?
So let's say my iframe is 200x200 and my modal is 300x300, is it possible to display the modal 'outside' the iframe bounds without appending the modal to the parent page?
No, this is not possible - not without some form of messaging from your iframe hosted code to the parent page.
You cannot use iframe in this case. If you want to get control of other page in iframe, use some div. You can use $.load() to get the content of other page. Then you can control watever way you want.
I have a link on my parent page. When i click on it a popup opens. On the popup I have a button, when I click on it I need to change link's which is on the parent window(clicked to open popup), text and onClick event.
How can i do it?
Its better to reference a function on the parent window, rather than write code on the popup, so I'd use parent.some_function();
This way, if the original page changes, you can change the function there too, without searching through your popup windows.
You can not access tab/window elements from different tab/window.
I need to show a page of contents inside my page.
ie; when i click on a link it will show 2 paragraphs inside a div as popup in the same page.
that popup must have a close button in it to close that div popup.
Is any one have an idea or code to help me in this
Thanks.
You could use something like a jQuery modal dialogue box:
Thickbox - apparently no longer maintained.
jQuery UI, recommended by those behind Thickbox.
jqModal
BlockUI
Facebox, which looks much as you'd expect, from the name...
Use hide properties for your div tag.
For hiding
document.getElementById('divid').style.display='none';
For displaying
document.getElementById('divid').style.display='block';
I'm using modal, modeless divs (I mean fixed, styled divs) on my HTML page. This page contains iframes with modal divs as well.
When I open a new div on the page, I need to disable keyboard events on the parent page (opener page). Also I need to be able to handle tab key presses on the parent page.
I have Googled, but I haven't found any solution for solving this issue.
Do you have any suggestions or ideas?
Maybe jQuery with this plugin could help you? Keybinding is made simple, and to disable a key (ex CTRL+F) you simply write:
$(document).bind('keydown', 'Ctrl-f', function(evt) {return false;});