I have a Kendo Grid binded to a remote OData endpoint.
How can I capture the request URL sent to the remote endpoint in one of the javascript events, like the DataSource's onRequestStart ?
this gives me the filter/sort objects
var filter = this.filter();
var sort = this.sort();
But I want the actual URL, like
http://..serviceroot/table1?$filter=....
The easiest way is via beforeSend:
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
beforeSend: function(e, request) {
console.log(request.url);
}
}
}
Related
I am currently doing this to change the read url dynamically on my kendo datasource. The datasource is used for a kendoautocomplete text box and for each key typed the list of suggestions are fetched through a get request.
requestStart: function (e) {
var text = $('#txtMail').val();
e.sender.transport.options.read.url = "/Feed/AutoCompleteUser?text=" + text + "&limit=10";
}
This works fine the first time , but consequent request's are exactly same as the first request it never hits this piece of code. What am i missing?
Please advice.
You can just add a data parameter for your read request, like so, in this case, as the request is sent as a get, it will append the query with the fields inside your data object.
By adding the function like this, it will get called every time you make a request.
function getRequestParameters() {
return {
text: $('#txtMail').val(),
limit: 10
};
}
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
data: getRequestParameters,
dataType: "jsonp"
}
}
});
You can find more about configuring the datasource operations here:
I am using AMcharts to show the JSON data returned by my web server. I am thinking of using the option like
chart.dataProvider : getData() { ... },
Here, I will make ajax call and return whatever data that the server sends. But the ajax call being asynchronous, I don't know know to how to supply the response data from the success function to the chart.
I contemplated on using dataLoader plugin, by supplying the url option like below..
"dataLoader" : {
"url": "my_server_url"
...
}
but this approach won't work for me, as I have to send some additional auth headers to my webserver, which I can do in my own ajax call.
DataLoader plugin's ajax request doesn't seem to fire my global ajax before send callback, so I cannot hook it to send auth token.
Any help here...
Building off what #martynasma said, here's a sample code snippet that worked for me...
return jQuery.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: 'https://www.example.com/endpoint', //replace with your endpoint url
beforeSend: function(xhr) {
// Add your parameters here
},
})
.done( function( data ) {
// Create the chart with data
var chart = am4core.create( 'chartdiv', am4charts.PieChart );
chart.data = data;
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "liters";
pieSeries.dataFields.category = "country";
})
.fail( function ( err ) {
console.log( err );
})
}
create_chart();
I'm new in kendo UI and I don't fully understand what is the primary goal and advantage of using kendo.data.Model within dataSource.
Not really sure if I understand your question. But the datasource is a good way to abstract your interaction with for example twitter:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://search.twitter.com/search.json",
// JSONP is required for cross-domain AJAX
dataType: "jsonp",
// additional parameters sent to the remote service
data: {
q: "html5"
}
}
},
// describe the result format
schema: {
// the data which the data source will be bound to is in the "results" field
data: "results"
}
});
I'm trying to do a simple ajax GET that returns the html from google.com but with the following I keep hitting my onFailure. And when I hit status i get a 0, yet when I attempt to output the responseText I get nothing.
Anyone done a simple request like this in mootools 1.2.1?
function addSomeAction() {
el.onclick = function() {
var uri = "http://www.google.com";
var myRequest = new Request({
url: uri,
method: 'get',
onRequest: function(){
alert("loading...");
},
onSuccess: function(responseText){
alert("hi");
},
onFailure: function(responseFail){
alert("fail: " + responseFail.responseText);
}
});
myRequest.send();
}
}
Regardless of the framework used, you cannot do cross-domain AJAX requests. This is to prevent Cross-Site Request Forgery (CSRF) attacks and is a limitation imposed by the web browser.
Therefore, you can only fetch the HTML source of a page which on the same domain as the originating request.
There are specifications allowing for the asynchronous transfer of JSON data residing on another domain (JSONP), but they will not help you in this case.
I am having a prob for ajax request in joomla using mootools.
var url = '<?php echo JURI::base();?>index.php?option=com_test&task=getselectmode&selectedid='+$('parent_question').value;
var params ={method: 'post',update:'test'};
var myAjax = new Ajax(url, params);
myAjax.request();
My prob is that, is there any to set onComplete event of the ajax request.
i have set it as below on above code but nothing happen.
onComplete: function(response) { alert('Response: ' + response); }
Can you please provide full code of how to use ajax using mootools 1.1 ??
Thanks in advance
just add the onComplete to the params object, no need to add the event seaprately. also, you can use this.response.text. it can all look a bit more compacted - depends on your preference. if you don't plan on reusing the object, just call it direct and don't assign it to a variable either:
new Ajax(url, {
method: "get",
update: $("someelement"),
onComplete: function() {
alert(this.response.text);
}
}).request();
if you do something with the response text, you may want to remove the update: bit. if you need to evaluate the response (as javascript), use evalResponse: true instead of eval(this.response.text);. also handy - evalScripts: true|false if you want to do something from the server side along with the response.
This should work:
var ajaxObj = new Ajax ('index.php?option=com_yourcomponent&view=yourview&format=raw', {
method: "get"
});
ajaxObj.addEvent('onComplete', function (data) {
// data is the response text
// use as desired
});
// this initiates the call
ajaxObj.request();
maybe:
var a = new Ajax( url, {
method: 'post',
data: { parfoto: foto },
onComplete: function( response ){
..........
}
}).request();