We Keep Coding

Is there a JavaScript equivalent of this where a callback can be used after form-submit - <iframe name="X"> + <form target="X"> + form.submit()?

I have a generic JS file-download function in an application which uses this template to send http POST requests to web handler (ASHX) and download files -
downloadFile(url) {
// other code ...
// creates these iframe & form element dynamically
<iframe name="X" id="X" onload="showErrorInCustomDialogBox()">
<form target="X" method="post" action="*encodedURL*" ></form>
// this is called after iframe & form elements are created
form.submit();
}
On a click of a button in the application, this code gets called and a dialog box opens up asking user a location to download the file. I want to call a function after the user has saved the file.
How can I achieve this same functionality using JS/jQuery and be able to call a function after file-download finishes? What options do I have here? I have tried using XHR but it didn't work out (see my other question).
If something's possible using these iframe + form elements that would be preferable because the way things currently work, when any error occurs during the download, the error message is loaded in the iframe, which is displayed in custom dialog box in the application.

Displaying loading gif within html object

I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>

Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');

Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.

javascript execute a tag on load

I have an html page with an a tag in it, and I want to know how can I make a Javascript code that executes it when the page loads (do the same action as if an user had made click on it)
Here's the code of my a tag
<div class="social-login">
<div class="btn btn-facebook">Facebook</div>
</div>
What I want is to automatically register, if possible without the user seeing the original html. (I want this because a user can get to this html from different ways, and in one of them I want to automate the registeration)

automatically register without the user seeing the original html, add code at the beginning of html
location.href="{% url socialauth_begin "facebook" %}"

Try triggering a click on the document.ready() function when using JQuery:
$(document).ready(function()
{
$(".social-login a").trigger("click");
});

How to add a JSP page dynamically on click

I have a link like follows :
<font size="2"><a class="pull-right" id="pageAdd" href="" title="add new page"><i
class="icon-plus-sign"></i></a></font>
and a jquery script as follows
<script type="text/javascript">
$(document).ready(function(){
$("#pageAdd").click(function() { .................(1)
$.get('WEB-INF/views/diary/createPage.jsp', function(data) {
$("#newPage").html(data);
});
});
});
I am trying to add the createPage.jsp to the following div
<div id="newPage">
</div>
I have debugged using firebug. The execution is going inside the jquery but jumping out after line 1. Any idea what is the problem.

Your JavaScript seems to be okay. At marker (1) you add a function to the onClick Event. When you debug in Firebug, you probably only see your function being added, not being called.
The Link WEB-INF/views/diary/createPage.jsp looks odd to me. Your war file will not serve anything to a browser from inside the WEB-INF directory.
Try moving the file outsite WEB-INF, rebuild your app and test in your browser, if you can manually browse to http://localhost:8080/YOUR_CONTEXT/views/diary/createPage.jsp
Open Firebugs Network view: Can you see a request to views/diary/createPage.jsp? Maybe your JavaScript sends the request to the wrong path due to how relative path are calculated

Your WEB-INF folder is not visible to HTTP calls, try to make the $.get() using /views/diary/createPage.jsp

I think you should also either change the href from "" to "#" or return false in the onclik, otherwise the browser could reload the page and break the script execution.

Loading an external .htm file into a div with javascript

So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?

I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});

Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)

I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.