Develop Reference

Show loading symbol when iframe gets loaded AND changes its source?

I want to display a loading.gif when my iframe gets loaded.
I did that with the code I found here: Show a loading gif while iframe page content loads
This works. But on my website, I have checkboxes and radio buttons. When the user clicks on one of them, the iframe changes it's source and gets refreshed. The problem is, that the loading symbol is only visible when the whole page loads, not when the iframe changes it's source and get's refreshed. How can I fix that?
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
code from Jay, view full answer here

I haven't tested this but as far as i know, the jQuery on("load") event triggers whenever an iframe is reloaded. So instead of using onload as an attribute, use this:
$("#frameId").on("load", function () {
console.log("reloaded"); // Here you can display the loading.gif file
})

Can dojo navigate through pages in a dijit.Dialog without iFrames?

I am developing an application using the java Stripes framework along with dojo. The customer wants the edit details form to display in a pop-up type window (a lightbox). The form has two pages. The first page is the form where the user can edit the details. The second page is a confirmation page that shows the old value vs. the new value, so they have a chance to confirm their changes.
I have the dialog showing up, and it looks great.
The issue I have is that when I click "continue" the dialog closes, and the results are displayed in the main window instead of within the dialog.
I need for the results to be rendered within the dialog.
Here is the code I have so far:
<div data-dojo-id="editDetails" data-dojo-type="dijit/Dialog" title="Edit Position Details" data-dojo-props="draggable:false, closable:false" href="urlToForm"></div>
<button class="buttons" title="Edit Details" tabindex="53" onclick="editDetails.show();" >Edit Details</button>
Then, here is the form page that is displayed in the dialog:
<stripes:form action="/action/editConfirmation">
<!--form fields here -->
<stripes:submit name="" class="buttons" title="Continue" tabindex="13">Continue</stripes:submit>
</stripes:form>
When the user clicks the submit button on the form, the action resolution needs to be displayed within the editDetails dijit.Dialog div.
I have been able to get this to work with iframes. I want to avoid iframes because they would not resize the dialog with the contents properly.
If there is a way to resize the dialog when content in the iframe changes, then I would allow the use of iframes.

It's possible to load multiple pages in a dijit/Dialog yes, by using the href property.
An example, let's say you have a page which contains a form, for example:
This is the first page with content
<button data-dojo-type="dijit/form/Button" id="myBtn2">Click me</button>
Then you can do something like this in your code:
var dialog = new Dialog({
href: 'page1.html'
});
dialog.show();
This will open a dialog with your first page. To switch pages by clicking the button on page 1, you can create your event handlers after the load event finishes:
dialog.on("load", function() {
registry.byId("myBtn2").on("click", function() {
dialog.set('href', 'page2.html');
});
});
This will set the href property of the dialog to the second page once the button is clicked.
An example of this can be found here: http://plnkr.co/edit/jxDnjoffC6s2KaXm1AAq?p=preview

JQuery mobile iFrame inside popup content doesn't reload or close properly

I am using JQuery Mobile to load some content from a different page into an iframe in a popup and displaying that iframe content within that popup on my initial page.
My popup link is as follows:
<a href="#popupBasic" data-rel="popup" data-transition="pop" data-position-to="window">
My popup is defined as follows:
<div data-role="popup" id="popupBasic" data-overlay-theme="a" data-dismissible="false">
Close
</div>
As you can see it has a close button.
I open my popup when a list item in a listview is tapped as follows:
$('#myList').delegate('li', 'tap', function () {
var index = $(this).index();
$("#popupBasic #memberFrame").remove();
$("#popupBasic").append( '<iframe src="/myPage?id=' + index + '" height="400px;" width="100%;" id="memberFrame"></iframe>' );
});
As you can see this loads the page with a specific id based on the index, the popup opens and this content gets loaded in the iframe within the popup.
On my iframe content there is a button and a count, when the button is pressed the page refreshes and the count should be increased. This is done by the server. However while I can see the count is getting increased and the page looks it gets refreshed it appears the content within the iframe is getting cached or something as when the page refreshes the old count is there.
Two things to add to this:
1: If I then manually refresh the iFrame by right clicking on it and selecting the refresh frame option it works OK
2:The popup has a close button on it and when I click this the first time it doesn't close the popup, instead it looks like it refreshes the iframe content and this time the count is correct. Then pressing the close a second time actually closes the popup
The experience in #2 I find very odd and I was wondering if anyone could help point out why this might be occurring?

Displaying loading.gif before iframe is loaded

So I have this button that when clicked on will send you to the next slide (void(0)). The next slide is an iframe which is loaded only when you click on the button.
Before the iframe is fully loaded, an animated GIF should show up and in turn hide after the content is fully loaded.
In my case, the GIF is never displayed. It's totally blank until the iframe is fully loaded. What is wrong?
Here is the script:
<script type="text/javascript">
function hideLoading() {
document.getElementById('loading').style.display = "none";
document.getElementById('edtwo').style.display = "block";
}
</script>
The button:
<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>
And the next slide which includes the GIF and the iframe:
<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>

The problem is that your iframe is initially displayed (and moreover, added in the DOM tree). Inspite of its empty src attribute it will load empty page and execute onload event handler. So you will have your indicator hidden as a result of calling hideLoading.
As you can see in this exmaple, onload triggers without clicking on link.
You can remove frame from DOM tree and add it when user clicks "Next" button or change .style.display to empty string (to show it) of gif loader at this time.

How can I execute a javascript function on the parent page from an iframe?

I'm trying to change text on a page from an iframe on the page. When the user finishes uploading an image I want to change text saying loading... to finished uploading or something. Can this be done from an iFrame? I know when you use alert("Finished"); it alerts the user from the iframe, but I still have the loading text.

Try using window.parent from within the iframe. This will point to the parent window.
You could execute a function (named, say, hideLoadingText) within the context of the parent window by doing window.parent.hideLoadingText();

on parent.html page (where there is an iframe)
function finished()
{
//you can change this below line depend on your needs
document.getElementById("status").innerHTML="Finish";
}
<span id="status"></span>
<iframe src="child.html" name="iframe_content"></iframe>
then you can try this on child.html page (content inside the iframe)
<input type="button" value="Finish" onclick="parent.finished()" />
also you can change the triger of the function depend on your needs

window.parent.yourjavascriptmethodname();