Develop Reference

Whats the best way to live update a webpage when the value in a text file changes?

I have a webpage that displays the content of text files on a linux server, the data is collected every 5 seconds.
At the moment i use Ajax to get the latest value from the file, and then update a HTML <div> accordingly.
I have around 10 text files that are displayed on a page, so i have 10 ajax scripts that grab the latest values of each file.
This appeared to work quite well until recently, i have noticed that at the bottom of Google-Chrome i receive this error:
Waiting for available socket
The page then crashes.
This only happens on my page that contains the live updates, so i assume this is causing the issue.
I have done some research and found that the best way to update the page would be to use websockets that tell the page when a new value is in the text file, before updating the page, however i am not sure how to use websockets and i can not find a working example.
What is the most efficient way to live update a webpage based on the content of a text file without exhausting browser and webserver resources?
A working example of a script of how i can acheive this would be great.
Here is an example of the Ajax script i am currently using to poll data:
<script>
function table() {
$.ajax({
url: 'get-text-file.php',
type: 'GET',
success: function(response){
$('.div1').html(response);
}
});
}
table();
setInterval(table, 3600000);
</script>

jquery ajax get/post to a javascript file

Ok, so the following is what I want to achieve:
I want to use jquery to load a file inside my javascript file.
Normaly you can do a $.ajax request with a POST to a .php file. And select something in a database that looks like the POST I sended with. Now I want the same thing, but instead using a .php file, I will use a .js file.
This also works, the code loads the file with the text alert('Hello World!'); and shows the alert. All fine. But what I want when I load that .js file, it needs to send a value with it. So it could be alert(data); and it will say hello world. How can i achieve this without using cookies or something else that stores values.

EDIT: this a GET request, a POST request is not allowed. Unless you're using GET variables to rewrite your javascript file before returning it you can't modify it or make it do anything other than what would happen if you just requested it with the <script> tag with the async attribute. /edit
Well I just learned something new. You can get a javascript file with an ajax call and execute it using eval but I'm almost 100% certain this is not how you should be doing whatever you're trying to do (also - when is JavaScript's eval() not evil)
$.ajax({
url: '/path/to/script',
type: 'GET',
success: function (response) {
eval(response.toString());
};
});
You're calling the server, which then returns the javascript file and you're parsing it as javascript using eval. I never considered doing this but I supposed it's one way to load a javascript file on demand.

Easiest way to load and read a local text file with javascript?

I have a .csv file that I wish to load that contains information that the .HTML page will format itself with. I'm not sure how to do this however,
Here's a simple image of the files: http://i.imgur.com/GHfrgff.png
I have looked into HTML5's FileReader and it seems like it will get the job done but it seems to require usage of input forms. I just want to load the file and be able to access the text inside and manipulate it as I see fit.
This post mentions AJAX, however the thing is that this webpage will only ever be deployed locally, so it's a bit iffy.
How is this usually done?

Since your web page and data file are in the same directory you can use AJAX to read the data file. However I note from the icons in your image that you are using Chrome. By default Chrome prevents just that feature and reports an access violation. To allow the data file to be read you must have invoked Chrome with a command line option --allow-file-access-from-files.
An alternative, which may work for you, is to use drag the file and drop into onto your web page. Refer to your preferred DOM reference for "drag and drop files".

You can totally make an ajax request to a local file, and get its content back.
If you are using jQuery, take a look at the $.get() function that will return the content of your file in a variable. You just to pass the path of your file in parameter, as you would do for querying a "normal" URL.

You cannot make cross domain ajax requests for security purposes. That's the whole point of having apis. However you can make an api out of the $.get request URL.
The solution is to use YQL (Yahoo Query Language) which is a pretty nifty tool for making api calls out of virtually any website. So then you can easily read the contents of the file and use it.
You might want to look at the official documentation and the YQL Console
I also wrote a blog post specifially for using YQL for cross domain ajax requests. Hope it helps

You can try AJAX (if you do not need asynchronous processing set "async" to false. This version below ran in any browser I tried when employed via a local web server (the address contains "localhost") and the text file was indeed in the UTF-8-format. If you want to start the page via the file system (the address starts with "file"), then Chrome (and likely Safari, too, but not Firefox) generates the "Origin null is not allowed by Access-Control-Allow-Origin."-error mentioned above. See the discussion here.
$.ajax({
async: false,
type: "GET",
url: "./testcsv.csv",
dataType: "text",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function (data) {
//parse the file content here
}
});
The idea to use script-files which contain the settings as variables mentioned by Phrogz might be a viable option in your scenario, though. I was using files in the "Ini"-format to be changed by users.

Load page in javascript without opening it

I'd like to load the contents of a page in javascript without actually opening it. I want to use it so I can load a page and scan some of its elements to see if it should actually be opened in a new window/tab before doing the opening itself.
How can I do that?

You can do this using the XMLHttpRequest object.
This is subject, however, to cross-domain scripting limitations.
Read more about it:
https://developer.mozilla.org/en/XMLHttpRequest
http://www.ajaxtoolbox.com/request/examples.php
http://www.w3.org/TR/XMLHttpRequest/

Load it in an Ajax call.
With jQuery:
$.ajax({
url: 'http://your_page_url',
success: function( data ) {
// process data (which is actually your page contents)
}
});

save the html once we call html through ajax

I want to call one html through ajax. once i get the response, i need to save that response as html on the spefied location
how can i do that?
I am calling ajax function using jquery as like below.
$.ajax({
type: "POST",
url: "../../../project/html/TC_print.html",
success: function(msg){
//once it success.. i need to save it as html on desktop
}
});
success call back, i need to save it as html on desktop

//once it success.. i need to save it as html on desktop
Forget about it. For security reasons, javascript that runs inside a browser doesn't have access to files on the client computer. Simply think of the consequences if this was possible. You probably wouldn't have been writing this question nor I have been writing this answer at the very moment as our computers would have been hacked badly. You visit a site and files start popping on your desktop. You visit a malicious site and viruses start popping everywhere, not only on your desktop.

JavaScript prevents you from saving files to a users computer for security reasons, You'd need to write the file to a server and then prompt the user to download the file by putting it in a ZIP or something similar.

I don't think that with javascript alone you will be able to save on the desktop but I might be mistaken. What I would do will to make another call from the success handler to a php script and pass in the html, then use PHP protocols to save file on desktop. Cheers.