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...
Related
I try to insert data using id in my url like this.
absent
present
My route is:
Route::get('/present/{id}', 'UserController#present')->name('present');
Route::get('/absent/{id}', 'UserController#absent')->name('absent');
Route is working. but the page is loading, I try to insert data without loading. I know how to insert data using ajax HTML form way. but how to insert using id use ajax?
If you want to insert data without reloading you have to bind JavaScript functions to the HTML links you specified. This example is different but you can use the same approach to achieve your need.
I propose, that you change your anchor tags to buttons and add a class to them and save their routing endpoints in data attributes:
<button class="action_buttons" data-route="{{route('absent', $User->id)}}">absent</button>
<button class="action_buttons" data-route="{{route('present', $User->id)}}">present</a>
And, then use JQuery event handling to detect when they are clicked and then simply use Ajax to get the related route from the button's data attribute and send a GET request to that route:
$('.action_buttons').on('click', function(){
// Get the route data from the tag.
let route = $(this).data('route');
$.ajax({
url: route,
type: 'GET',
success: function(resp) {
console.log(resp);
}
});
});
I am trying to pass the contents of a bean to javascript so that I can parse it and create a JSON object... (Yes I am still on ATG 9.1). However I am having trouble getting from serverside to client side.... I am new with this stuff and would appreciate any explanation as documentation on this is scarce and not helpful.
<dsp:tomap var="cartMap" bean="MyShoppingCartModifier.order" recursive="true"/>
<script>
var myCartMap = "${cartMap}";
//Logic (easy)
</script>
Doing this generates an "Uncaught SyntaxError: Unexpected token ILLEGAL" on my browser (Chrome)
Any wisdom will greatly help me in my quest in learning this stuff.
The problem is your usage of the tomap tag. You can't just pass in an entire tomap'd object because the tomap tag isn't going to create a nice, parsable json object.
You should either:
1) Format the json yourself right within your tags. Choose only the values that you want from the order.
<script>
var myCart = {
total : '<dsp:valueof bean="MyShoppingCartModifier.order.priceInfo.total">'
...
}
// Then use myCart for something here
</script>
or 2) There's a little known JSP to JSON library found here, http://json-taglib.sourceforge.net, that is very useful. To use that, you'd create a separate page, something like orderJSON.jspf, that is used to generate a pure json object from your order. Then in the page that you require this js, you can do:
<script>
var myCart = <%# include file="/path/to/orderJSON.jspf" %>
// Then use myCart for something here.
</script>
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
Currently, I'm trying to create a page using instagram's api, showing recent pictures with a specific tag, as well as the user who posted it and the date posted. I'm also trying to have the infinite loading functionality, with ajax loading in more instagram posts as the page reaches the bottom.
Heres a link to the live site http://www.laithazzam.com/work/nukes/indexnew.php
Clicking the red yes will skip the video, and go straight to the instagram feed.
I'm currently using Christian Metz's solution found here, https://gist.github.com/cosenary/2961185
I am also having an issue with posting the date, in the first initial load, as well in the ajax loads. I was previously able to use this following code, before trying to implement Christian's php/ajax solution.
var date = new Date(parseInt(data.data[i].created_time) * 1000);
<p class='date'>"+(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+"</p>
I guess what I don't understand, is how the ajax loading function, is actually functioning. How would I also pull the name, and date through the ajax loading success function as well?
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$("#instafeed").append('<img src="' + src + '">');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
The data parameter of the success handler function is populated from whatever JSON ajax.php returns and the structure will match accordingly. It looks like the images attribute of that object only has an array of URLs for the images and no other data.
You'll need to update this section of the PHP script to return more than just the array of URLs for the images and also include the additional data retrieved from the Instagram API.
Try updating the last part to this:
echo json_encode(array(
'next_id' => $media->pagination->next_max_id,
'images' => $media->data
));
Then you'll have full access to all the media data, not just the URL.
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.