Illegal Invocation while passing data attribute on Ajax - javascript

I am trying to get the data attribute of a button with id delete_btn and send it through ajax. As a result, I am getting the following error.
Uncaught TypeError: Illegal invocation
JQuery
var id = $( "#delete_btn").attr('data-identifier');
$.ajax({
dataType: "json",
url: apiURL,
data: { 'req': 'delete', 'id': id},
success: function(data){
// do something
},
error: function (textStatus){
//do something
}
});
I have even tried getting the attribute value by
$( "#delete_btn" ).data( "identifier")
But got the same error

Try to set processData: false in ajax settings like this
$.ajax({
url : base_url+'index.php',
type: 'POST',
dataType: 'json',
data: data,
cache : false,
processData: false
}).done(function(response) {
alert(response);
});

Try to add this four attribute to your ajax call:
async: false,
cache: false,
contentType: false,
processData: false,
Hope this help!

Related

i am trying to pass parameter to data through ajax

I am trying to pass value through an ajax json array but value of catergory variable is not getting in controller action
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: "POST",
data: {
'category': category
},
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function(response) {}
});
You need to use the parameter namespace matching your extension/plugin:
$.ajax({
// ...
data: {
'tx_myext_foo[category]': category,
},
// ...
});
But you'll also need to configure the cHash evaluation since this will lead to a HTTP request like /?tx_myext_foo[category]=X which will fail without a matching cHash.
This can be done with the excludedParameters configuration option.
Please check the Controller action if category (parameter name) passed from the ajax is exactly same in the controller action too
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
cache: false,
async: false,
url: url,
data: JSON.stringify {
category: category
},
dataType: 'json',
success: function(response) {}
});
You need to make ajaxurl with action and controller. and then pass the data in full format.
var ajaxUrl = '<f:uri.action action="youraction" controller="Yourcontroller" />';
var category = $('#category').val();
$.ajax({
type: 'POST',
url: ajaxUrl,
data: '&tx_yourext_yourplugin[category]='+category,
success: function(response) {
},
});
Just make the following changes :
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: "POST",
url:url,
data: {'category': category},
dataType: "json",
success: function(response) {}
});

jquery ajax how to send whole number integers to php as variables

Please how can I send a whole number like twelve to php using ajax. I have been able to send string variables using both GET and POST methods successfully, but when it comes to numerical values it becomes a problem , I don't know why.below is my jQuery
function user_ajax_call(){
var data = $(".people_names").length;
var more_loader = $("<img id='hiddenL' src='../ForePost/icons/spin.gif'/>");
$("#pple").append(more_loader);
$.ajax({
url: 'http://localhost/Forepost/mod/loadmore_data.php',
dataType: 'text',
type: 'POST',
data:{data:data},
processData: false,
contentType: false,
cache:false,
success: function(returndata){
$("#pple").append(returndata);
more_loader.hide();
},
error: function () {
}
});
}
And these are sample php lines
$limistart = $_POST['data'];
if(isset($limistart)){
echo $limistart;
}
You need to send them through: data.
You could do something like this in your data variable:
data = {
name_length : $(".people_names").length,
number : 12
};
And just pass it like this in your ajax:
function user_ajax_call(){
var data = {
name_length : $(".people_names").length,
number : 12
};
var more_loader = $("<img id='hiddenL' src='../ForePost/icons/spin.gif'/>");
$("#pple").append(more_loader);
$.ajax({
url: 'http://localhost/Forepost/mod/loadmore_data.php',
dataType: 'text',
type: 'POST',
data: data,
success: function(returndata){
$("#pple").append(returndata);
more_loader.hide();
},
error: function () {
}
});
}
And in your server side access it like :
$_POST['name_length']
$_POST['number']
If you change the value of contentType key it should work correctly.
So change this:
contentType: false
to:
contentType: "application/x-www-form-urlencoded; charset=UTF-8"
EDIT:
and change the line:
processData: false
to:
processData: true

Send data from a javascript ajax function to a jsp

This is what I am trying to do. On a home page.. say /home.jsp, a user clicks on a link. I read value of the link and on the basis of which I call a RESTful resource which in turn manipulates database and returns a response. Interaction with REST as expected happens with use of JavaScript. I have been able to get information from REST resource but now I want to send that data to another JSP.. say /info.jsp. I am unable to do this.
I was trying to make another ajax call within success function of parent Ajax call but nothing is happening. For example:
function dealInfo(aparameter){
var requestData = {
"dataType": "json",
"type" : "GET",
"url" : REST resource URL+aparameter,
};
var request = $.ajax(requestData);
request.success(function(data){
alert(something from data); //this is a success
//I cannot get into the below AJAX call
$.ajax({
"type": "post",
"url": "info.jsp"
success: function(data){
alert("here");
("#someDiv").html(data[0].deviceModel);
}
});
How do I go about achieving this? Should I use some other approach rather than two Ajax calls? Any help is appreciated. Thank You.
You can use the following function:
function dealInfo(aparameter) {
$.ajax({
url: 'thePage.jsp',
type: "GET",
cache: false,
dataType: 'json',
data: {'aparameter': aparameter},
success: function (data) {
alert(data); //or you can use console.log(data);
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': data},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
});
}
Or make the AJAX call synchronous:
function dealInfo(aparameter) {
var request = $.ajax({
async: false, //It's very important
cache: false,
url: 'thePage.jsp',
type: "GET",
dataType: 'json',
data: {'aparameter': aparameter}
}).responseText;
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': request},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
In this way I'm using.
"type": "post" instead of type: 'post'
Maybe it will help. Try it please. For Example;
$.ajax({
url: "yourURL",
type: 'GET',
data: form_data,
success: function (data) {
...
}
});

How to get json data coming from ajax and show it prefilled in input box

Following is the code that Ii have used to get the response in json.
but when I add alert alert(response.Subject); it returns "undefined"
HTML:
<input type="text" id="subject" value='Subject'>
Javascript:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(response); // it show the json that response returns. I want to show in the input box prefilled with the data that response return
}
});
please help me out.
You can use val to set value in the textbox
$('#subject').val(response[0].Subject);
Also, you might want to change the ajax call:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
dataType: "json",
// ^^^^^^^^^^^^^
success: function (response) {
// response is JSON
$('#subject').val(response[0].Subject);
}
});
val
Set the value of each element in the set of matched elements.
http://api.jquery.com/val/#val2
ajax
Perform an asynchronous HTTP (Ajax) request.
http://api.jquery.com/jQuery.ajax/
It really depends the construction of your JSON object, but standart is responseText that you parse with JS
maybe you try to get the response text or response JSON
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(JSON.parse(response.responseText));
//or
console.log(JSON.parse(response.responseJSON));
}
});
you can write like this:
$('#subject').val(response.Subject);
I thinks it's really easy. Just add:
$('#subject').val(response.Subject);
in your success handler.

Not able to get result from data.responseText in IE but working in other browser

I am using the below code snippet to fetch data from a certain webAPI.
data.responseText works fine in FireFox but gives undefined in IE L
I have tried using data.responseJSON also but it doesn’t work in IE.
Please give me the solution to this.
Here is the code which I am using.
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data: "{'slid':'" + slidname + "'}",
async: false,
crossDomain: true,
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});
Which version of the IE? If IE9 or less, the issue could be your jQuery version - see http://jquery.com/browser-support/.
Otherwise, you could try if letting the browser do the formatting of the ajax request data helps:
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data:JSON.stringify( {"slid": slidname} ),
async: false,
crossDomain: true,
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});
If this also fails, you may want to try "jsonp" as dataType for the ajax call since you have a cross-domain request.
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data: JSON.stringify( {"slid": slidname} ),
async: false,
crossDomain: true,
dataType: "jsonp",
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});

Categories

Resources