I have to put a grid inside a iframe. I select a row then the detail is loaded in the main page hosting that frame. How to do?
An image is better than 1000 words. I want to reproduce a master-detail view like wufoo.
The "black" grid is inside of the iframe. So the grid is always on top. Selecting a row, the detail page will be loaded on the back.
how to have a post on the main page when a row-clicked event fires in an iframed-grid, in asp.net mvc?
(source: flickr.com)
This isn't an answer to your actual question, but if you used properly sized divs with CSS of "overflow: auto", you could get the same layout without needing to communicate across frames.
Within the iframe:
The "top" variable (or window.top or self.top) should reference the main frame. You could use something like top.location = nextUri;
Alternatively there is a "target" attribute on links which can specify alternate frames.
The link markup would be something like <a href="uri1" target="_top">. You could forward click-events from the row to the link with document.getElementsByTagName("a")[0].click(), assuming that the link is the first one in the row. (The <base> element could also be used.)
Remember that replacing the main frame will require the iframe to be reloaded.
Related
Suppose you have a div that is at the very top (usually offscreen, due to a long page) that is updated with .append() when any of a bunch of links (scrolling also offpage) is clicked. How do you prevent Chrome from scrolling to the top automatically after each of the link clicks?
Something like this
<div id="updateme"></div>
<img>
...
[hundreds more]
There are several ways to solve this, and it is because you are using an anchor hashtag (#).
<img>
Instead, you could remove the href altogether but I am betting you want the style that href gives you. I would recommend using css to style the a to look and act like a link (which is probably the cleanest method), but you can also do this if you like:
<img>
This could also be covered with a little javascript when the page finishes loading as well if desired, since you listed jquery, it could be something like:
$('a[href="#"]').on('click', function(e) {
e.preventDefault();
});
If going the above route, just in case these are dynamically loaded in, you might want something like:
$('#updateme').on('click', 'a[href="#"]', function(e) {
e.preventDefault();
});
I strongly assume that Chrome doesn't scroll to the top because you are updating the content of the updateme element, but because your link points to #, which acts like an anchor on top of the page.
Personally I'm not a big fan of using href="#", because it makes it possible to middle-click or Ctrl+click the link, opening it in a new tab, which is not an intended functionality. I prefer using href="javascript:", but maybe there is an even better way that I don't know about.
If you want to leave the link as it is, to prevent Chrome from scrolling up when clicking the link, you have to make sure that only the click handler is run when you click the link, and Chrome doesn't actually navigate to the href you have specified, use onclick="event.preventDefault(); DoAppendUpdateMe()" (see preventDefault).
Despite is it not useful to move an IFRAME to a newly opened window (see similiar questions, the IFRAME will reload), one can move the IFRAMEs content, eg. the top HTML node to another window. Eg.
iframe_html_node=document.getElementById('my_iframe').contentDocument.firstChild;
new_window=window.open();
new_window.document.replaceChild(iframe_html_node,new_window.document.firstChild);
Of course, one can also replace deeper levels of the DOM if only parts are needed.
However, there is one show stopper: As the new window is opened blank, it has no valid document.location set, so there is no base URI for it's contents links and ressources, which will in turn all go blank (tested in Chrome), eg. CSS and images are broken.
One can of course set new_window.document.location to the IFRAMEs one before copying, but this triggers a lot of mess if included JS frameworks attach their handlers and so on. Also it implies an race condition where we have to be cautionous about the time we replace the HTML node, as it may be overwritten by the loading document.
Any suggestions?
this is the situation.
I have a complex UI inside an iframe in which a user can perform several actions before submitting. During the process, the user can switch to another page (in the iframe) and come back. That means 2 postbacks inside the iframe.
Obviously, I don't want the user to lose everything but since all the actions have been done on the client-side, I can't reload the previous state from the server.
So now, I'm trying to move the first page content to the iframe parent and put it back in place when we come back. I'm half way there since the elements show back in the page but they lose their data attributes and event handlers.
I'm using this to move the content on the parent :
$("#resp").clone(true).attr("id", "refillResp").appendTo(window.top.$("#global"));
And this to put it back :
window.top.$("#global").find("#refillResp").clone(true).attr("id", "resp").appendTo($("#tdResp"));
Is there anyone who knows a way to do this ?
PS: I've tested how the content react when simply moved on the parent and data and events are already gone.
It is more a comment, but it does not fit in there.
Moving DOM element around different documents around is alway a little bit risky. Because it could lead to unexpected behavior (memory leaks, elements that behave strange). In current browsers it most of the time works, but i would not recommend it.
If you use jQuery you have another problem. jQuery has a cache for storing informations about data and event that are assigned to an Object, this cache is stored with the documents window. For further details please read this answer, to another question:
How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?
So if you move element with jQuery between different document, you will currently on the one hand loose these informations, on the other hand it could result in memory leaks.
With events it is even more complicate. e.g. if you have delegated events it could be become completely messy.
If you need to exchange data between iframe and parent you should think of some other logic.
I also mention this in a comment to the other answer of me, where i referred to this post:
How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?
I'm using JQuery sortable list where I dyanmically I can modify the content inside each element (ie, textfield, color, etc). Either I indluce each element content as an iframe of div then this content is refreshed each time I move/drag and drop this element into another position. Which is weird is that it doesn't happend when I move another different element, so my question would be: is there anyway to avoid currentItem to be refreshed/reloaded after draggin it to another position?
Thanks in advance for your help (!)
This is a known bug. See: http://bugs.jqueryui.com/ticket/5575
I have an aspx page with some controls. One of which is an iframe, whose source changes (depending on the selection in a listbox). So, if a user selects an item in the listbox (ie: Claims.aspx), the iframes source changes to Claims.aspx.
I have a button on my 'child' pages (ie: Claims.aspx). I'd really like to have that button execute either:
Javascript from the 'parent' page
A VB function in the code-behind of the 'parent' page
Is there any way to do this?
If your parent page and your content page are both on the same domain (which I'm presuming they are) you can simply do:
parent.myFunction();
from your content page to access myFunction() in your parent page.
Similar to Town's answer, you can also use top as in
top.myFunction();
to call the parent's myFunction function from the Iframe.