How to get controller/model/store/view in Ajax callback - ajax

folks,
I am working on a project using EXTJS MVC framework for backend development.
Now I am in trouble to get controller/model/store in the Ajax callback
Here is the snippet of my code. I am in the controller to call Ajax.
Ext.Ajax.request({
url: 'http://localhost:8080/gdltest/gdl_service.cgi',
jsonData: jRequest,
method: 'POST',
success: function (response,options) {
var jsonData = Ext.JSON.decode(response.responseText);
var jData = jsonData.results.data;
When i get the data from the response, I want to get the controller/model/store to do more actions, but i don't know how to get them :(
Thank you very much for your help :)

What you've done in the success function is correct. Please check the reponse that you're getting back from the server. Also, is the url correct? Usually the relative path to the resource is given, not the absolute path, as you've given here. Is the request reaching the server? If it is I think there is an issue with the data which is being sent back. You should also use the safe option during development. The safe option throws an error if the Json returned from the server isn't in the proper format. From the docs:
decode( String json, [Boolean safe] )
safe : Whether to return null or throw an exception if the JSON is
invalid.
EDIT: If you want to use the this operator inside the success callback then specify the scope config. Example below:
Ext.Ajax.request({
url: 'http://localhost:8080/gdltest/gdl_service.cgi',
jsonData: jRequest,
method: 'POST',
success: function (response,options) {
var jsonData = Ext.JSON.decode(response.responseText);
var jData = jsonData.results.data;
},
scope : this //this will be the object form which the Ajax.request is called, and not Ajax.request itself or you can specify any other object you desire.

Related

Flask Ajax POST data scope

I need to render a Flask template but the ajax data is only accessible within the POST if statement and does not show when I call a get direct after a posted the data.
I have a working ajax here
$.ajax({
type: 'post',
url: "/query",
dataType: 'text',
data: JSON.stringify({hostname:hostname, bf_id:computerID}),
contentType: 'application/json;charset=UTF-8',
success: function () {
window.location.href = "/query";
}
});
});
The data is successfully posted and the redirect is working. But when the redirect calls the function to render the template, the posted ajax cannot be retrieved.
#app.route('/query', methods=["GET", "POST"])
def query():
hostname=""
if request.method == "POST":
#these values only exist in if statement
hostname = request.json['hostname']
bf_id = request.json['bf_id']
return render_template('query.html', hostname=hostname)
Am I using an incorrect work flow?
Am I using an incorrect work flow?
Yes.
You make the POST request with the data.
You get a response which does things with that data
You then make a GET request without the data
You get a response which can't do things with the data that it doesn't have
The point of Ajax is to make an HTTP request without loading a whole new page.
If you want to load a whole new page, then use a regular form submission without involving JavaScript at all.

get data from ajax as an attribute value for callback function

Im new to ajax. I was trying to find the answer but was not lucky to find the corresponsing one. Basically I need to use an ajax to get some data and after that to put this data to the variable that later will be used as an attribute for the callback function with custom code.
This ajax part is just a method of myObject.
So, in the end I need this kind of functionality:
myObject.getData(url, callback(data) {
//my custom code of what I wanna do after ajax is complete
});
My code
/*
HERE COME SOME PROPERTIES AND OTHER METHODS WICH IS NOT THE CASE
*/
//This is where Im stuck
var getData = function getFromUrl($url) {
$.ajax({
type: 'get',
url: $url,
dataType: 'html',
success: function(html) {
$obj = html;//Im lost on this step!
},
});
};
P.S. Im trying to find an async way (without using async:false). Hope its possible
First I encountered many problems. My first problem was No Access-Control-Allow-Origin, most websites dont allow you to just scrap get their data for security reasons. Luckily someone already made a proxy: http://cors.io/ . Second problem is that you cant embed http on https, so I cant use jsfiddle to show you this working, it works on my local enviroment. After you get the raw html you have to parse it, you can do it with full regex, or you can power yourself with jquery like I'm doing on this example. What we're doing is checking stackoverflow.com and getting the amount of featured questions with .find(".bounty-indicator-tab").first().html(); But once you have the full html you can get any data you need.
var getData = function getFromUrl(url) {
$.ajax({
url: 'http://cors.io/?' + url,
crossDomain: true,
dataType: 'html',
success: function (html) {
var match = $(html).find(".bounty-indicator-tab").first().html();
console.log(match);
return match;
},
error: function(e) {
console.log('Error: '+e);
}
});
};
url = 'http://stackoverflow.com/';
data = getData(url);
//You cant use data yet because its working async

why Ajax get Request failed

The response of my request is a java script code. When I put the url in browser, I can see the whole generated java script code on the page. Format of url passed to $.ajax is as below:
http://localhost:8080/vi-api/viapi?action=tag&projectId=45&tagId=345
When I put the above URL I can see the request is successful. Now, I am using below Ajax request for this url using jQuery.
var finalUrl = "http://localhost:8080/vi-api/viapi?action=tag&projectId=45&tagId=345";
var req = $.ajax({
type:"GET",
url:finalUrl,
type:"script",
data:"",
success: function(html){
alert('Requese sucessful.');
},
complete:function(jqXHR, textStatus) {
alert("request complete "+textStatus);
},
error: function(xhr, textStatus, errorThrown){
alert('request failed->'+textStatus);
}
});
Question 1:This gives the alert "request failed error'. Why this is so ?
Question 2:Is there any way to return success/failure code in above process?
In:
$.ajax({
type:"GET",
url:finalUrl,
type:"script",
(...)
You have two times the 'type' key in your object. So I think only the second one is taken ('script'). Obviously 'script' is not a valid HTTP method (as HEAD,GET,PUT,POST, etc). The keyword your were looking at for 'script' is maybe dataType which may be one of xml, json, jsonp, text, script, or html.
Do not forget to look at jsonp, it's usually a nice way to return a script content and to call it.
I am not sure why, but I can give your some tips how to debug or find out issues:
1) install fiddler to look at HTTP request.
2) type:"script", why the type is script? try to use "text/html".
3) use complete(jqXHR, textStatus) you can look at HTTP status. more info about $.ajax
var finalUrl=http://localhost:8080/vi-api/viapi?action=tag&projectId=45&tagId=345;
is pretty invalid javascript. You probably meant passing the url as a string:
var finalUrl = 'http://localhost:8080/vi-api/viapi?action=tag&projectId=45&tagId=345';

jQuery ajax - blank response returned

I am trying to use jQuery ajax to get some values from the database and then return them in an array.
I have used the same code several times before but this time, no response is being returned. Although the post values are the correct values that I would expect. Here is the javascript code that I am using:
$.ajax({ url: '/BlogArchive.asmx/ChangePost'
, type: 'POST'
, contentType: 'application/json; charset=utf-8'
, data: '{FileName:"' + FileName + '"}'
, dataType: 'json'
, success: function (data)
{
var arrayList = data.d;
var BlogPostTitle = $(".BlogPostTitle")[0];
var BlogPostDate = $(".BlogPostDate")[0];
var BlogPostContent = $(".BlogPostContent")[0];
$(BlogPostTitle).html(arrayList[0]);
$(BlogPostDate).html(arrayList[1]);
$(BlogPostContent).html(arrayList[2]);
}
// , error: function (XMLHttpRequest, textStatus, errorThrown)
// {
// //There was an error
// alert('dfd');
// }
});
The only javascript error that I am receiving is that data is null, which I would expect as the response is blank.
It seems that the name of the web method that I am calling from my javascript is not even being read, because if I changed 'ChangePost' to 'ChangePost1' for example, it still returns a blank response, although I would expect an error message saying that the web method can't be found.
It seems that it does recognise that the BlogArchive.asmx web service exists because if I put something that would create an error in the VB code, the error appears as the response.
I am sure this must be something simple that I am doing wrong. Any help would be appreciated.
, data: '{FileName:"' + FileName + '"}'
Seems odd. You probably meant:
, data: {FileName: FileName}
(or 'FileName=' + FileName)
Furthermore, did you inspect the request (and response) via FireBug or similar?
You should try using jQuery getJSON with the minimal arguments.
Another thing, when you are using JSON with jQuery, if the answer data are not wellformed
(like a space before / after the starting JSON string) could lead to a blank answer from
jQuery.
Be sure using traditionnal AJAX with jQuery that your answered data are correct.

Why is this jQuery Ajax request failing?

The FCC recently made available a small set of API calls to access FCC data. In particular, I'm interested in the Consumer Broadband Test API. I'm trying to access this API through jQuery but am failing. Please let me know if I'm doing something wrong with my code or if this seems to be a problem with FCC's API.
If you visit this API request in a browser, it returns a XML response just fine: http://data.fcc.gov/api/speedtest/find?latitude=30.240236062827297&longitude=-97.64787337499999
So I've tried to load this data in jQuery using various methods:
var url = "http://data.fcc.gov/api/speedtest/find?latitude=30.240236062827297&longitude=-97.64787337499999";
$.ajax({
type: "GET",
url: url,
success: function(data) {
console.log("ajax: " + data);
}
});
$.getJSON(url, function(data) {
console.log("getJSON: " + data);
});
$.get(url, function(data) {
console.log("get: " + data);
});
In the Firebug console, all three requests show a 200 (OK) status, but the response body is empty. Also, the resulting console.log messages are:
ajax:
getJSON: null
get:
Am I doing something wrong here?
To work around the Same Origin Policy, you'll need to use JSONP. It is supported by the API. Add callback=? to the URL string in your .getJSON() call:
If the URL includes the string
"callback=?" in the URL, the request
is treated as JSONP instead. See the
discussion of the jsonp data type in
$.ajax() for more details.
So, something like this:
var url = "http://data.fcc.gov/api/speedtest/find?...&callback=?";
$.getJSON(url, function(data) {
// do stuff
});
References: http://api.jquery.com/jQuery.getJSON/
You can't make cross-domain calls using AJAX. It doesn't work like that.
What you probably want to do is to have your AJAX query URL be a local script on your own server, then have that script run a request for the API url (using cURL or something).

Resources