We Keep Coding

How do I link JSON files within AJAX with Django?

I have a Django app and within it I'm using a template HTML page that utilizes a Javascript library called Cytoscape (allows you to create graphs with nodes and edges).
I have everything set up with regards to templates and static files (the CSS and basic JS functions are working), however the one thing I'm having issues with is the Ajax functions within my main javascript file. These Ajax functions are responsible for displaying the graphs from JSON files (see code below as to how), and they work fine locally without Django. But as soon as I try to incorporate the server-side implementation, the functions can no longer read these files and I don't know how to fix this.
I've attempted to copy over the JSON files into various directories (but I'm still running into a 404 not found error: "Not found filldata/undefined.json", (where filldata is my app) presumably because this URL has not been set up on the server-side.
function onUpload() {
var filename = $('input[type=file]').val().split('\\').pop();
var layoutPadding = 50;
var aniDur = 500;
var easing = 'linear';
var cy;
if (upload_true) {
var graphP = $.ajax({
url: filename,
type: 'GET',
dataType: 'json'
});
var styleP = $.ajax({
url: './style.cycss', // wine-and-cheese-style.cycss
type: 'GET',
dataType: 'text'
});
} else {
var graphP = $.ajax({
url: './undefined.json',
type: 'GET',
dataType: 'json'
});
// also get style via ajax
var styleP = $.ajax({
url: './style.cycss',
type: 'GET',
dataType: 'text'
});
}
The goal here is to be able to upload JSON files on my web page and link the .cycss (css file specific to Cytoscape) within Django to run my page on the server-side. Any help would be appreciated.

Hey Django is a web server. You cannot access files like ./style.cycss etc. You need to set up a static URL, host your files there and use that URL in your code. you can check here about hosting static files. you need to store your JSON in a similar way and use it with a URL.

How to set the url in off-line site using jquery ajax

well my task is running a static site, No servers at all. pure HTML, and i need to load and read an XML file and update the page with the result.
The task is done and can read the xml file if the file is in the same location, the problem is if the xml file is in a separate folder the ajax flails. seems like the url fails.
$.ajax({
type: "GET",
// working url setting - case - 1
// url: "somexmlfile.xml",
// not working - case - 2
url: "../somepath/somexmlfile.xml",
dataType: "xml",
success: function(xml){
// do something with the returned data
},
error: function() {
// display the error
}
});
Case - 1 is the working solution for me, but i need to place the xml file in a separate place.
Then the case - 2 is the way to get to the file which is getting failed.
any idea,
Actually no domain, no servers, its is pure HTML,
All files are in ex:
D:/myfiles/someFolder/index.html
If i put the file in
D:/myfiles/someFolder/xml/myxml.xml
and set the url as
url: "xml/myxml.xml"
this config is working too,
But i'm trying to place the xml file in
D:/myfiles/xml/myxml.xml and need to read the file using ajax setting the url as
url: "../xml/myxml.xml"

Try to use an absolute url:
www.yourdomain.ext/siteDolder/xmlFolder/xmlfile.xml

Finally the solution was to turn off browser security (strict_origin_policy set to false on about:config) on Firefox settings and it works.

Creating a local .json file in Extjs

I want to create/save a .json file locally in Extjs with information from the DOM. Usually to POST, DELETE, GET or PUT .json query packets, the following method is used;
Ext.Ajax.request({
url: GlobalInfo.apiURL + 'api/grades/postsub',
method: 'POST',
params: {
SubjectName: newSubjectName,
SkillID: newSubjSkill
},
success: function(){
Ext.MessageBox.alert('Status', 'Success');
},
failure: function() {
Ext.Msg.alert('Status', 'You failed me! :o');
}
});
Is there a similar method I can use to create a local .json file on the hard drive of the user when they click a 'Save' button for example?

Create a store/model which uses a client proxy. Ext has a few built in client proxies.
Local storage
In memory
Session
If none of these work for your target browsers, then you will likely need to write your own.
The Sencha docs on proxies should help

How can i receive data from external url using json?

Recently i am learning json to create apps.I have a doubt in a Json , php based chat system .
In this , the code work fine for same origin policy.But for sending and receiving data from external url, it successfully sends data to external php.But not receiving any data from server.I search in internet to solve this problem , and found jsonp as alternative. I tried jsonp , but i m not sure if am correct because i am new to ajax itself.
Please don't mis understand my question.I want to load a index.html file from localhost , when i send request to external url (anysite.com/xx/ajax.php) .It process and returns the data back to index.html.But the problem is my data is sended finely and processed on the server but it doesn't return to remote file.But it works fine for same server.
$.tzPOST = function(action,data,callback)
{
$.post('http://anysite.com/xx/ajax.php?action='+action,data,callback,'json');
}
$.tzGET = function(action,data,callback){
$.get('http://anysite.com/xx/ajax.php?action='+action,data,callback,'json');
}
please help me with a code.

You cant receive JSON from external web by JavaScript, because of the policy.
But you can do AJAX request on your PHP file and there you can get the JSON by file_get_content http://cz2.php.net/file_get_contents function.

For using(working) with jsonp, u can take ready solution jquery-jsonp
from GitHub.
Example of using (by you question):
$.tzGET = function(action,data,callback){
var url = 'http://anysite.com/xx/ajax.php?action='+action;
$.jsonp({
type: 'GET',
url: url,
callbackParameter: callback,
dataType: 'jsonp',
data: data,
timeout: 10000,
success: function(json){
alert('success')
},
error: function(){
alert('error')
}
});

Trying to send input file data over AJAX, can't access the data in my controller

I'm using Laravel 3, and I am AJAXing in a user comment. We are adding images to this comment and I can't seem to get the File Data to go through. When I set processData to false, I am also unable to access the other data such as the comment and privacy. Any insight?
var commentforms = $('form.compose');
commentforms.on('submit', function(e){
e.preventDefault();
var file = document.getElementById('file_input').files[0];
$.ajax({
type: 'POST',
url: '/issue/comment/' + issue_id,
processData: false,
data: {
side: side,
comment: comment,
privacy: privacy,
file: file,
},
success: function(response){
console.log(response);
new_comment = comment_template(response);
updateSide(new_comment);
},
});

Going off of what Kevin B commented, there are a couple ways to do this.
First, the reason it is not working is that, by default, you cannot send files with an AJAX request. That is it, and that is why it isn't working. No matter what you do to your form and your AJAX request, you are stuck. (AJAX here meaning NOT XMLHttpRequest2)
SOLUTION 1
Kevin B recommended the Javascript formData object which is part of the XMLHttpRequest Level 2. Information on how to use it can be found: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
In relation to your code, you code do something along the lines of:
commentforms.on('submit', function(e){
e.preventDefault();
var oData = new FormData(document.forms.namedItem("composeForm"));
var oReq = new XMLHttpRequest();
oReq.open("POST", '/issue/comment/' + issue_id, true);
//on a side note, issue_id isn't declared anywhere...
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
console.log("Uploaded!");
} else {
console.log("Error " + oReq.status + " occurred uploading your file.");
}
};
oReq.send(oData);
});
PROBLEM
Again, as Kevin B said, it isn't widely supported. Checking here: http://caniuse.com/xhr2 you can see that IE9 and below isn't supported, which is XP, Vista, and non-upgraded Windows 7. If your app is on your own controlled network, and you can ensure everyone is using Firefox/Chrome/IE10+, you are good to go. If you are going to be using this feature with the public, then you need another solution.
OTHER SOLUTIONS
Many sites currently use AJAX to upload files, or trick you into thinking it is AJAX. What other websites do is one of two things: hidden iFrames or Flash.
The hidden iFrame trick is to create an iframe that populates the data of your current form, and then sends it off like it normally would, meaning a page reload. Because it is in an iFrame and hidden, the user never sees the page reload and the content is uploaded like you would expect.
The Flash trick is to use a little Flash app/plugin that finds the file and then sends it to your server. It is fairly easy to use, and since Flash is widely supported, it can do the trick on most browsers. You just have to include the plugin and you are good to go.
Plugins
I prefer to use plugins, as they do all the hard work for me. The one I am fond of right now for it's simplicity is Fine Uploader. It is easy to configure, looks great, can be Bootstrapped, or used with jQuery. Plugins may use one or both methods to upload the files, or they may even try the XMLHttpRequest2 first, then fall back on one of the other methods to upload the files. Ultimately, most of the popular plugins are easy to configure and provide fairly decent documentation to get it to do what you want.
Other popular plugins:
Uploadify
BlueImp
Plupload

read this:
With XHR2, File upload through AJAX is supported. E.g. through
FormData object, but unfortunately it is not supported by all/old
browsers.
Try with this:
Tutorial
And see this code:
var data= new FormData();
data.append( 'file', $('#file') );
$.ajax({
url: 'file.php',
data: data,
processData: false,
contentType: false,
type: 'POST',
success: function(response){
console.log(response);
}
});
Suerte!