Import a JS array using ajax to pass though to a function/plugin in JQuery - ajax

I have a generated array which if hard coded passes the array objects to a function for processing fine.
For example:
$("#termCloud").jQCloud([{text:'some',weight:10},{text:'thing',weight:8}]);
However, I need to make this more dynamic so am generating the the array externally and importing using ajax. This is what I'm Trying:
(generateArray.asp would output {text:'some',weight:10},{text:'thing',weight:8})
$.ajax({
url: '/generateArray.asp',
success: function(data){
$("#wordCloud").jQCloud([data]);
}
})
I have tried several dataTypes and all fail.
The problem seems to be that the in the working version the JQCloud plugin receives the array as objects: [object Object],[object Object] where as my ajax version receives/sends it as a string: {text:'some',weight:10},{text:'thing',weight:8}
Is there a way to import the the array and pass it though to the JQCloud function/plugin as a proper array rather than a string or convert the string to an array for processing?
Many thanks..
In repospone to two answers below; I should point out that the return doesn't seem to be recognised as valid JSON data...

I guess you should JSON-parse the data variable before sending it to the plugin:
var json = JSON.parse(data);
$("#wordCloud").jQCloud([json]);
...or you could add
dataType : 'json'
...to the settings parameter in the ajax function call.

Try:
success: function(data){
$("#wordCloud").jQCloud([{text: data[0].text, weight: data[0].weight}, {text: data[1].text, weight: data[1].weight}]);
}
The response is automatically converted to Objects by the $.Ajax() function, as it is a json-string.

Related

not able to pass the selected values through Ajax

This is the script i use for the drop down in the echo table
The echo table
Try passing your data object as text
JAVASCRIPT
$.ajax({
type: "POST",
url: "data.php",
data: JSON.stringify(data1) // use JSON.stringify();
});
Also a note is to make sure your html is echo'd or rendered out before you attempt to bind a javascript function to it. Other wise you will get an error indicating no such html element found.

Ajax & Grails - how to use the params from the model in the success of the Ajax?

I have an Ajax which call to an action in a controler.
The controller render:
render template:"changePassword", model:[user: user, passwordError: passwordError]
The passwordError is boolean.
In case the passwordError is true I have to perform function in the js.file.
How can I check in the success's Ajax the value of the passwordError?
The code of the Ajax:
$.ajax({
url: changePassword,
type: "post",
data: {
password: $('#password').val(), npassword: $('#npassword').val()
},
success: function(data,textStatus){
$('#changePassSuceess').modal()
}
});
If you dont need to render a template, you can return a json as #Eylen mentioned and then access the flag from json. If you must render a template then you can have a hidden field in your template with value set to the flag passwordError and then you can get the value of flag from this hidden field in your javascript code
See this question for how to find hidden element in jquery ajax response html
If you don't need to show the template that you are returning, then you can change your return from the controller to something like the following
return [passwordChanged:true] as JSON
Ans then in your ajax call you will have access to the JSON object in the data attribute.
console.log(data.passwordChanged);
Maybe you have to tell also in the ajax call that the return type is json.

What else can I pass to the `form` property of Ext.Ajax.request?

Normally one posts an ExtJS form to the backend using form.submit({...}). I want to make my form submission synchronous now, so I'm switching to using Ext.Ajax.request({async: false, ...}). The form property of Ext.Ajax.request() usually looks like so:
Ext.Ajax.request({
url: 'formsubmit',
form: 'formid',
method:'POST',
success: function(response, opts) {
alert("successfull");
},
failure:function(res,opt) {
alert("request failed");
}
});
I'm dealing with a bunch of anonymous forms right now. Is there any way around this?
Given a var form = {xtype: 'form', items: [...]}
I've tried replacing 'formid' with form.getEl(), form.getForm(), and form.getForm().getFieldValues() which all don't work.
There's no other way around this other than assigning a generated id to each of my anonymous forms, is there.
Thanks for any input
It looks like you could just do this as an alternative to the form attribute:
var form = this.down('form');
Ext.Ajax.request({
url: 'test.xyz',
params: form.getValues()
// etc...
});
getValues gives you the name/value pairs you need for your submission.
It looks like the ExtJS forms do not actually use form elements in the markup. When the submit function is called on an ExtJS form, an HTML form element is crafted as part of the process, and that's the form that is used for the submission.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.action.Submit-method-buildForm
Ideally, you could modify the options that are used in the Ajax request called within the doSubmit function. Since you can't, you might want to consider overriding Ext.form.action.Submit such that you can, then calling the form.submit() function you mentioned in your question.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.action.Submit-method-doSubmit

Content not returned during AJAX call

I attempting to load page content on a jQuery Mobile site via an AJAX call to the desktop version of the same site, which is generating the content for each page as a JSON object. I have confirmed that the JSON objects are good (i.e.: if you place the URLs into the browser, a good JSON object displays). The section of each JSON object that I am attempting to display is identified as "content" in the object itself.
On the jQuery Mobile page, I am placing a function to call the relevant JSON object and replace the content of that page with the JSON content. The function is as follows:
function processJSON(url, id){
$.ajax({
url: url,
data: null,
success: $(id).html(response.content),
dataType: 'json',
});//ends ajax
};//ends processJSON
The arguments for the function are as follows: "url" is a variable set equal to the URL of the appropriate JSON object, and "id" is the id of the div the content of which I want to replace with the JSON content. This page is living on the same server as the desktop version of the site, on an "m." subdomain.
When I place this on a test server, I receive an error in the console stating "Uncaught ReferenceError: response is not defined." Does this mean that the function is not receiving any JSON response, or that it cannot identify the "content" section of the JSON object? How do I correct this?
Thanks for your assistance.
from jquery.ajax doucumentation
success Type: Function( PlainObject data, String textStatus, jqXHR
jqXHR ) A function to be called if the request succeeds. The function
gets passed three arguments: The data returned from the server,
formatted according to the dataType parameter; a string describing the
status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.
success: function(response)
{
$(id).html(response.content)
}

How to get xml data using ajax in jquery?

I want to use ajax in jquery to get data for my page...
The problem is that the url which i call has some query strings to be sent along with it...
for example: the url which i call for getting data is:-
http://mysite.in.dataengine.aspx?t=abcde&token=h34jk3&f=xml
the data i get in response from this url can be in xml format or java script arrays(whichever i choose)
for eg...the xml wil look like this:-
<root version="1.0">
<Regions>
<Region SubCode="MWEST" RCode="west"/>
<Region SubCode="MCENT" RCode="north"/>
<Region SubCode="THAN" RCode="south"/>
</Regions>
</root>
and the javascript array would look like this :-
Region = new Array();
Region.push(new Array('MWEST', 'west'));
Region.push(new Array('MCENT', 'north' ));
Region.push(new Array('THAN', 'south'));
So when i get the data i want to store it in a drop down box.(using ajax)
Note I can get either xml OR javascript arrays as the returned data, not both together.
You can make an ajax call along with parameters like this:
var paramsData = "t=abcde&token=h34jk3";
$.ajax({
type: "GET",
url: "dataengine.aspx",
data: paramsData,
dataType: "xml",
success: function(xml){
//process xml from server
}
});
I would suggest you to get the data in JSON format, as Json comes natively to javascript and it much easliy manipulated using javascript as compared to XML. The easiest way i can see to work on your problem is to store all your data whether xml or json & put it inside a hidden div and then use jQuery to populate that data in a drop down box.
Here is an amazing jquery plugin with example that should ease your work
http://plugins.jquery.com/project/jqueryclientdb
Just parse it. I"m not sure if this will work, but it might:
xml = ...
region = new Array();
$(xml).find('Region').each(function() {
region.push(new Array($(this).attr('SubCode'), $(this).attr('RCode'));
});
Thanks for your help guys...but i have found the solution....Like i said...that i get in return either xml or javascript array...So..i'm using javascript arrays.. and using a function in jquery*($.getScript)* which fetches an external javascript code via ajax...Thus i am getting all my data now through ajax in jquery...

Resources