Develop Reference

Show Turbolinks loading bar on custom AJAX request

I am using Turbolinks 5 and there is this nice loading bar at the top that shows up for turbolinks-activated links.
It it possible to trigger manually/programmatically the display/progress of this bar for custom AJAX calls (maybe even any AJAX call ?)
I am targeting specifically the submit of remote forms (AJAX) for POST/GET requests. I know about turboforms, which I also sometimes use, but in some cases I expect a more clever JS response from the server, that only generates/reloads part of the page, and I would still like to use Turbolinks' AJAX feedback.

Based on the list of turbolink events, it seems possible to display the bar by emitting a turbolinks:click event.
It also seems possible to call the progressbar class it self.
I hope this at least helps you get on the right path.
Happy coding

Defered image loading

As you Know new images may be loaded after page load completed using event . for example i can fire a JQuery click event to run foo function that adds an image to a Div, and then that image will be loaded without needing to use Ajax . so what's going on?
whats the difference between using Ajax and just add that image to page using an event?

image will be loaded without needing to use Ajax . so what's going on?
This is your browser doing it's magic. The moment you add a url to an image source, your browser sends the request (to where ever the image is located ) and handles the response automatically.
whats the difference between using Ajax and just add that image to
page using an event?
Well it's straight forward. Ajax is not meant to "get" images. You could eventually use AJAX to get an image url or a list of image url's and apply them to img element(s)... but the browser still automatically sends the request and handles the response.
Taken from the comments, you should read this to fully understand how AJAX works.
How does AJAX work?

Http request for file download stops JQuery ajax calls

Problem:
On the site I am building, I have two JQuery ajax long polling calls constantly pending.
I am now trying to put in a file download feature, so that when link is pressed the user is prompted with the SaveAs box. This download of the file is working fine, the problem is that when the link is pressed the two ajax calls are cancelled.
I am trying either not have the ajax calls cancelled or the possibility of setting up the ajax calls straight away.
Here is the code for the link:
HTML:
Tasks
JS:
$(document).on('click',"#testfile",function(event){
event.preventDefault();
var href=$(this).attr('href');
window.location.href = href;
updater(); /* AJAX CALL #1 */
notifier(); /* AJAX CALL #2 */
});
What I have tried:
I the code above I was trying to call the two ajax calls after starting the download. This is not working. If I put in some delay so that the calls are initiated after the download is complete then it works but seeing as the files can be big and therefore take an unknown amount of time to receive this is of course a bad solution.
I am really confused as to why the ajax calls are being cancelled? Is this because the page is being unloaded when I press the link?
Seeing as I am only running on a development server with one thread, the new ajax calls that I am trying to set up right after following the link might be failing because the server is busy, could this be the case?
SOLVED:
I added a hidden iframe to the buttom of the site and with targeted that with my link. I also removed the JS code, since the ajax calls are now not being cancelled.
The code is now looking like this:
HTML:
Tasks
********
<iframe name="filetargetframe" style="display:none"></iframe>

Using the answer from yoavmatchulsky the problem was solved:
I added a hidden iframe to the buttom of the site and with targeted that with my link. I also removed the JS code, since the ajax calls are now not being cancelled.
The code is now looking like this:
HTML:
Tasks
********
<iframe name="filetargetframe" style="display:none"></iframe>

From a url to an ajax call in history.js

I'm writing a small website which has several pages that are very similar. Most of the time, only the content of one div is different. The navigation, header etc stays the same.
So I realized this with a "base" html file, some smaller html-files with only a content-div and javascript code like this (which is triggered by a button click event):
$.get("content/text1.html", function(data) {
$("#content").html(data);
});
This works very smooth but the problem was, that the url in the address-bar doesn't change with those kind of requests. So it is not possible for the user to link to certain pages. I know it is possible with #-urls, but i want to have urls like:
example.com/talks/foo/bar
And not some workaround.
In another Thread, someone gave me a hint to the html5 browser history api (especially history.js).
What I'm trying to achieve with it:
Someone clicks on a button -> an ajax request is triggered and the content of the content-div gets updated -> the url gets updated to something like example.com/talks/foo/bar
If someone requests example.com/talks/foo/bar in his browser directly, the same ajax request and content update as in (1) should be performed
I tried to realize the first one with:
$.get("content/text1.html", function(data) {
$("#content").html(data);
History.pushState(null, null, "content/text1.html");
});
But how am I supposed to achieve the second point? With a rewriterule, that redirects everything to the base-html file and some js-logic in it to decode the url and trigger the ajax request?
I have the feeling, that I am a bit on the wrong path..
So is this the way history.js should be used?
How can i achieve the second bullet point?

To get the initial state in html5 browsers no ajax calls are required. Like you said the url itself gets changed, not the hash so the server should reply to the url with the correct content already loaded.
You should do all your ajax calls and DOM manipulation inside the statechange event handler.
So when the user clicks on a link all you do is call pushState and handler the DOM changes in the statechange event handler. This works because statechange is triggered when pushState is called.

How to preload the html in a javascript var

I have a website that I'm working on. I'm using jquery to animate and display content. This content is stored in vars. I need to know how to load the content before displaying it.
For clarification, you click a link, a "loading..." window fades in, and once it loads everything, it fades out and fades in the loaded content that is stored in vars.
Thank you

Are you looking for how to request HTML content via AJAX, know when it is finished, and then insert it into the DOM? If so, jQuery's load method may be what you're after.
Steve

AJAX event will not tell you how many percent was loaded, in fact, in most cases, it has no idea how long is the response will be. But it will inform you when the response is completed, or error occured.
Take a look at the official reference AJAX of JQuery. My original answer was wrong, coz I suppose you already have the data. A simplified use case for your ajax request would be:
> Initiate the Request, and set the handler for ajax complete (thru something like $.Ajax)
> Hide the content pane and show the loader
> When ajax complete, you display your content, and hide the loader
Following is the original answer.
I think you are talking about something that's already in the client computer's memory, but you want to display all immediately once it's completed loading. Sounds like those "double buffering" in offline media.
What you can do, is:
// Display the loading screen, you can put any animation
$("#loader").fadeIn();
$("#contentPlaceHolder").hide();
// attach the DOM of the contents to placeholder.
$("#contentPlaceHolder").append(CONTENTS);
// .... similar statements follows.
// and finally..
$("#contentPlaceHolder").show();
$("#loader").fadeOut();