Develop Reference

Load another HTML file inside dialog

I have a index.html and have another html file with a lot of text.
Now I don't want to paste this bunch of codes into my index.html.
I don't want to make it larger, the other file is not always called only if the button is clicked.
How do I get the div area from another_file.html ?
$("#buttonClick").on("click",function(evt) {
$("#load-another-file").dialog({});

Maybe you're looking for jquery.load(), load perform a server call and fetchs the HTML returned in your element.
$("#buttonClick").on("click",function(evt) {
$("#load-another-file").dialog().load("another_file.html");
});

I believe you are looking for jQuery's $.ajax, which is a way of loading data without refreshing the page:
$("#buttonClick").on("click",function(evt) {
$.ajax({
url: 'another_file.html',
success: function(data){ // You received the data
$("#load-another-file").html(data).dialog("open");
}
});
});
Note: for this to work, you might have to put your files on a server (even a local one), because some browsers don't allow Ajax requests on local files for security reasons (e.g. Google Chrome).

How to access json content from external url

I'm new to jquery and javascript and I've been trying to access the contents of a json file from an external link with no luck. The json file is produced in the link below.
http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x
I noticed that several examples have a url similar to this "www.samplesite.com/testfile.json" However, as you can see above, the URL is not like this. Opening the link in Chrome takes you directly to the json file contents, however opening the file in IE asks you if you want to save the file "A10,A11.json".
All I want to do is be able to display the json file content in HTML. Can some please show me a brief example.
Thank you

$.ajax({
url: 'http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x',
dataType: 'jsonp',
success: function(data){// your code here
}
});

You can access the JSON only if the website having the JSON allows cross origin resource sharing(CORS). Find out if that is available, and if it is then post your code.

$.getJSON('http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x', function(data) {
//data is the JSON string
});

To retrieve JSON from servers outside your own domain, you should set up the callback to retrieve so called 'padded' JSON, which is easily done by adding the following to the jQuery .ajax() function:
dataType: 'jsonp'

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.

How to load the url in html div tag using javascript or jquery

Here the below i have wriiten for load the webpage inside of div tag via 'url' i've enclosed. but it not working. can anyone know. pls help.
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Click Here
<br/>
<br/>
<br/><div id="durl">
</div>
<script type="text/javascript">
function lurl(){
$('#durl').load('http://www.tndte.com/Result/');
}
</script>
</html>

you can’t use jQuerys ajax methods to fetch data from external domains without using a Proxy, YQL, JSONP or equivalent technique to get around this. Browser restricts, most Ajax requests are subject to the "same origin policy".
You can use the https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js and include the js file in your page. Below is the function that I used to load the external page.
function test () {
$.ajax({
url: 'http://www.tndte.com/Result/',
type: 'GET',
success: function(res) {
var content = $(res.responseText).text();
alert(content);
}
});
}

Thats correct, ajax calls cannot retrieve external pages for security reasons.
The only way to get external pages onto your page is to use an iframe, or a simple server side proxy that you can call with your ajax.
We can not do that unless the content are coming from the same domain , and reason javaScript's Same Origin Policy.
You can still do it as
use iframe load the content
use server-side script

Unless you are accessing files on the same server as your page is, this will not work.
You need to use an iframe if you're trying to embed external content.
http://www.w3.org/TR/html4/present/frames.html

Before trying out the answers..You have to add http: in your src path.

HTML, Javascript: difference between an ajax call and changing the source of an iframe

Context: I'm trying to code a javascript function to like a certain post on tumblr, based on this link . I tried using an ajax call instead of changing the source of an iframe, but it doesn't work. Of course, changing the source of an iframe works.
So, what can be the difference that make this not work?
$baseUrl = 'http://tumblr.com/like/';
function LikePost( $postID, $reblogUrl )
{
/*
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>: like or unlike
<oauthId>: last eight characters of {ReblogURL}
<postId>: {PostID}
Exemple of Url
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
*/
$oauthId = $reblogUrl.substring( $reblogUrl.length - 8, $reblogUrl.length);
$likeUrl = $baseUrl + $oauthId + '?id=' + $postID;
$.ajax({
url: $likeUrl,
type:'POST'
});
}

AJAX requests are bound by same domain policy, with some exceptions that aren't worth listing since they don't work unless you control both domains.
In this case, you're calling a tumblr domain from your website, which you can't do through AJAX. However, iframes, script elements, and img elements can point to any domain, so if the like url isn't returning any content to you, you can use any of those means to record the like.
If you didn't want to use an iframe, the other method you could use would be to make a request to your server via AJAX, then proxy the request to tumblr. Your server can go to any url it wants.
However, the iframe approach is easiest. I suggest going that route since you already got it working. ;)

They are intended for different purposes. As jmort253 noted above, AJAX calls work only for the same domain, whereas Iframes may span different domains. But if you are interested in loading data from the same domain, AJAX may be a better option. Many times, while using IFrame, you will see a loading sign on the tab-bar of the page, showing that something inside it is loading (it's the IFrame page which is loading, not the entire page), which you don't want the user to see, because that is the point of AJAX, loading data seamlessly, giving the user the illusion that the data is coming almost simultaneously. With AJAX, you won't have these problems.
And even if you want to load data from different domains, while Javascript itself is not upto the task, you can use PHP to do the loading part, then use Javascript to fetch the data from there.