Bad Request in AJAX - ajax

I am trying to develop a WordPress plugin. I am getting Bad Request from below AJAX code.
// On change division
$('body').on( 'change', '.division', function() {
$.ajax({
type: "POST",
url:localData.statesurl,
data:{
division: $(this).val(),
action: 'division_to_district_ajax'
},
success:function(rss){
alert(rss);
$('.district').empty();
var $opt = '';
$.each( JSON.parse(rss), function(key, value) {
$opt += '<option value="'+key+'">'+value+'</option>';
});
$('.district').append($opt);
},
error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); },
dataType: "json",
contentType: "application/json"
});
});
Could anyone say why I am getting Bad Request ?

Try like this
add_action( 'wp_ajax_division_to_district_ajax', 'division_to_district_ajax_function');
add_action( 'wp_ajax_nopriv_division_to_district_ajax', 'division_to_district_ajax_function');
function division_to_district_ajax_function(){
$myArr = array(
'response' => 'xyz'
);
$myJSON = json_encode($myArr);
echo $myJSON;
die();
}
// On change division
jQuery('body').on( 'change', '.division', function() {
jQuery.ajax({
url: '<?php echo admin_url( 'admin-ajax.php');?>',
type: "POST",
data: {'action': 'division_to_district_ajax', division: jQuery(this).val()},
cache: false,
dataType: 'json',
beforeSend: function(){
},
complete: function(){
},
success: function (response) {
console.log($response);
}
});
});

Related

Ajax form data passing to API

Below code not going to succeed, it is showing failure message.. anybody can help
$.ajax({
type: 'GET',
url: 'xyz.com/form_api.php',
data: {
name: 'John',
email: '123333',
mobile: 'deep#gmail.com',
message: 'Test'
},
success: function(response) {
console.log(response);
$('#contact_form #contact_results2').html('Success');
},
error: function(errorThrown) {
console.log(errorThrown);
$('#contact_form #contact_results2').html('failed');
}
});
Try this code:
$.ajax({
type: 'GET',
url: 'xyz.com/form_api.php',
data: { 'name': 'John', 'email': 'deep#gmail.com', 'mobile': '123333', 'message': 'Test'
},
success: function(response)
{
console.log( response );
$("#contact_form #contact_results2").html("Success");
},
error: function(errorThrown)
{
console.log( errorThrown );
$("#contact_form #contact_results2").html("failed");
},
});

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

Typeahead.js Get ID

sorry but i don't find reply..
My problem is i can't retrieve the id of the selected product. The value = 0
My code :
$("#recherche").typeahead({
onSelect: function(item) {
alert(item.value); // = 0
},
ajax: {
url: "/personne/autocompletation",
displayField: "nomComplet",
triggerLength: 1,
method: "POST",
dataType: "JSON",
preDispatch: function (query) {
return {
query: query
}
}
},
});
My code HTML
<li class="active" data-value="0"><strong>C</strong>alloway</li>
Sorry for my english...
Try this
$("#recherche").typeahead({
source: function(query, process){
$.ajax({
url: "/personne/autocompletation",
displayField: "nomComplet",
triggerLength: 1,
method: "POST",
dataType: "JSON",
success: function (data) {
console.log(data);
}
});
}
});

Can not pass value from Ajax to controller

My AJAX:
$.ajax({
url: '{{ URL::to('dashboard') }}',
type: 'GET',
data: { cid: val },
dataType:'JSON',
success: function(result) {
},
error: function(){
$('#status-msg').addClass('alert alert-danger');
$('#status-msg').text('Fejl!!');
}
});
My Route:
My Controller:
public function dashboard(){
if (Request::ajax()){
$cid = Input::get('cid');
var_dump(json_encode($cid));
} else {
echo "XX";
}
}
The cid is not passing to controller, the request AJAX is not working.
have you try change your ajax type to POST ?
$.ajax({
url: '{{ URL::to("yourURL") }}',
type:'POST',
data:"cid="+$(this).val()+"&_token=" + $("input[name=_token]").val(),
dataType:'JSON',
success:function(result){
},
error: function() {
}
});
Edit:
try to pass _token if you use {{Form::open}}.
hope this will help.
Try this:
$.ajax({
url: '<?php echo base_url() ?>index.php/contorller_name/method_name',
type: 'POST',
data: { cid: val },
dataType:'JSON',
success: function(result) {},
error: function() {
$('#status-msg').addClass('alert alert-danger');
$('#status-msg').text('Fejl!!');
}
});

An Array is no longer an array after an AJAX Sending

I use the jQuery UI sortable plugin and I don't succeed to send the "order" var (an array) with AJAX. After the ajax sending "order" is not an array anymore. I would like to have a solution only for the ajax sending.
$("#list-cat").sortable({
placeholder: 'highlight',
update: function() {
var order = $('#list-cat').sortable('serialize');
$.ajax({
dataType: 'json',
type: "POST",
url: "my_url.php",
data: { action: "edit_cat_order", id_member: "<?php echo $id_member; ?>", id_page: "<?php echo $id_page; ?>", order: order },
success: function(data){
if (data.a == true){
$.colorbox({ html: data.b });
}
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.responseText);
}
});
}
});
In "my_url.php", a foreach loop doesn't recognize $_POST['order'] as an array : "Invalid argument supplied for foreach() ...". I think the problem is in the "data" line because $_POST['order'] is an array when I use :
$.post("my_url.php", order);
you can try
$.post("imy_url.php", {order:order});
EDIT
you can use $.makeArray
$.ajax({
dataType: 'json',
type: "POST",
url: "my_url.php",
data: { action: "edit_cat_order", id_member: "<?php echo $id_member; ?>", id_page: "<?php echo $id_page; ?>", order: $.makeArray(order)},
success: function(data){
if (data.a == true){
$.colorbox({ html: data.b });
}
},

Resources