parsererror SyntaxError: Unexpected token < in JSON at position 0 - ajax

submitForm = function (nid, title) {
var form = $('#candidature')[0];
var formData = new FormData(form)
var btn = document.querySelector('#candidature button')
formData.append('listfields', JSON.stringify(fieldsname))
formData.append('nid', nid)
formData.append('title', title)
formData.append('ntype', 'recrutement_offre')
console.log(global_json.baseUrl)
$.ajax({
url: global_json.baseUrl + "/send-form",
type: "post",
data: formData,
processData: false,
contentType: false,
dataType: "json",
beforeSend: function() {
btn.innerHTML = '<i class="fa fa-circle-o-notch fa-spin" style="font-size:12px !important"></i> Veuillez patienter...'
},
success: function (response) {
if (response.success) {
$('form#candidature').hide();
//console.log('success');
}
showMessage(response, 'candidature');
},
complete: function (response) {
btn.innerText = 'Envoyer'
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
//$('form#candidature').hide();
}
})
}
var fieldsname = {
"name": "field_field_name_rec",
"type": "field_field_type_rec",
"rules": "field_rules_rec",
"values": "field_values_rec"
}
$('#formModal').on('shown.bs.modal', function(event) {

Related

CSRF token error? on laravel Symfony\\Component\\HttpKernel\\Exception\\HttpException

first was ok. second got error
I use the ajax function on javascript page in laravel
If I initiate the function once it work well
But when I start the function 2 or 3 times in short time I got the error
"exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException",
"file": "D:\\AppServ\\www\\come\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Exceptions\\Handler.php",
I search the error message . The result is the csfr issue.
But how can I fix the error?
I have already have the
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
The question is not on the first time . It's on the second or third times.
Code
$('.findNews_geography').autocomplete({
source: function(request, response) {
var findtable=$('.findtable_num').val();
var terms=request.term;
console.log("findtable="+findtable+";term="+terms);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "findNews_geography",
dataType: "json",
type: "post",
data: {
findtable : findtable,
term : terms,
},
error: function(xhr, ajaxOptions, thrownError) {
console.log("findNews_geography ajax error="+xhr.responseText);
console.log("findNews_geography xhr.status="+xhr.status+";thrownError="+thrownError);
},
success: function(data) {
console.log("see request="+data);
response( $.map( data, function( item ) {
return {
label: item.place,
}
}));
} //success end
}); //ajax end
}, //source end
minLength: 0,
}); //autocomplete end
$(".findNews_geography").focus(function () {
//if (this.value == "") {
console.log("findNews_geography get focus");
if($('.findtable_num').val()){
$(this).autocomplete("search");
}// };
});
$('.findNews_geography').autocomplete({
source: function(request, response) {
var findtable=$('.findtable_num').val();
var terms=request.term;
console.log("findtable="+findtable+";term="+terms);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "findNews_geography",
dataType: "json",
type: "post",
data: {
findtable : findtable,
term : terms,
_token: $('meta[name="csrf-token"]').attr('content')
},
error: function(xhr, ajaxOptions, thrownError) {
console.log("findNews_geography ajax error="+xhr.responseText);
console.log("findNews_geography xhr.status="+xhr.status+";thrownError="+thrownError);
},
success: function(data) {
console.log("see request="+data);
response( $.map( data, function( item ) {
return {
label: item.place,
}
}));
} //success end
}); //ajax end
}, //source end
minLength: 0,
}); //autocomplete end
Try to send the csrf token in your ajax request as data
data: {
findtable : findtable,
term : terms,
_token: $('meta[name="csrf-token"]').attr('content')
},
Hope this helps

Mvc autocomplete ajax

Try to:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response($.map(data, function (item) {
alert(JSON.stringify(data));
alert(JSON.stringify(item.name));
return {
name: item.name,
label: item.name
}
}));
}
})
},
messages: {
noResults: "", results: ""
}
})
})
In alert(JSON.stringify(data)) got this: {"items":["Boston","Berlin"]}.
In alert(JSON.stringify(item.name)) got this: undefined.
Question: how do it (item.name) works?
You have to just return array of strings:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response(data.items);
}
})
},
messages: {
noResults: "", results: ""
}
})
})

How can I get imgur.com album images using ajax request

I used this code :
(function($){
var albumID = 'NNbeO';
var albumAPI = "https://api.imgur.com/3/album/" + albumID + "/images";
$.ajax({
url: albumAPI,
headers:{
'Authorization':'xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
type: 'GET',
dataType: 'json',
success: function(data) {
alert(data.data[0].link);
},
error: function() { console.log("ERRORZ"); }
});
})(jQuery);
But I got this error :
{
"data": {
"error": "Malformed auth header",
"request": "\/3\/album\/NNbeO\/images",
"method": "GET"
},
"success": false,
"status": 403
}
I got my solution. It works fine now. Below is my working code. It's problem was, I've not added Client-ID text with Authorization headers.:
(function($){
var albumID = 'NNbeO';
var albumAPI = "https://api.imgur.com/3/album/" + albumID + "/images";
$.ajax({
url: albumAPI,
headers:{
'Authorization':'Client-ID xxxxxxxxxxxxx'
},
type: 'GET',
dataType: 'json',
success: function(data) {
alert(data.data[0].link);
},
error: function() { console.log("ERRORZ"); }
});
})(jQuery);

How to get the ID property in KendoUI TreeView

Here is my tree view of KendoUI:
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var regions = {
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllRegions?countryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
},
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
};
var countries = {
type: "odata",
schema: {
model: {
id: "Id",
hasChildren: "HasChildren",
children: regions
}
},
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllCountries?territoryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
}
};
var Territories = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllTerritories",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
},
schema: {
model: {
hasChildren: "HasChildren",
Id: "ID",
children: countries
}
}
});
$("#treeview").kendoTreeView({
dataSource: Territories,
dataTextField: ["Name", "Name", "Name"],
dataValueField:"ID"
});
});
</script>
The hierarchy is Territories->countries->regions
I can see the territories populating, but I am unable to fetch the ID property of selected Territory so that countries can be populated, that is in ajax call,
options.ID is undefined there.

Assign page size value to kendo grid from code

code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
dataType: "jsonp",
data: {
q: "kendoui"
}
}
},
schema: {
data: "results",
total: function(response) {
return response.results.length;
}
},
pageSize: 4
});
here i have to set the page size 4 from client side
public JsonResult GetSettings()
{
return Json(new { count = Service.GetSettings<UserSetting>(AuthenticatedUser) }, JsonRequestBehavior.AllowGet);
}
var settingsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetSetting")',
dataType: "json",
type: "GET"
}
},
schema: {
parse: function (data) {
resultCount = data.count;
return data;
}
},
change: function () {
Grid();
}
});
settingsDataSource.read();
function Grid() {
mainGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetDetails")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify({ filter: options, isPrimary: options.isPrimary });
}
},
schema: {
model: {
fields: {
Status: { type: "string" },
Name: { type: "string" }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.totalCount;
}
},
pageSize: resultCount,
serverFiltering: true,
serverPaging: true
});

Resources