I'm using Jquery V1.11.1 and I want to replace a cell in a HTML table after a Jquery AJAX request. I want the result in the cell.
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});
});
});
When I click on the text in the desired cell, nothing is replaced. How can i fix this?
You need to set the context in ajax call to current object. You can use context option from ajax to do that:
context: this,
Modified ajax call:
$.ajax({
url: "/permissions/update",
type: "POST",
context: this,
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});
Your context has changed. in the 'click' function this referce to the button. But in the callback function the context has changed. You should save the context to a variable first (var self).
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
var self = this;
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
self.html(html);
}
});
});
});
Related
Once again I've been beating my head against the wall, trying to pull this part of returned data from ajax to a variable outside the function.
When I return the value it always comes up undefined when I alert() inside it shows the proper values.
function getItemInfo(itemHashPass) {
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
return data.Response.data.inventoryItem.itemName;
}
});
}
I've also tried
function getItemInfo(itemHashPass) {
var tmp = null;
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
tmp = data.Response.data.inventoryItem.itemName;
}
});
return tmp;
}
Like Jonathan said you should write your business logic in the callback or you can try Deferred syntax. In this case it will looks like
function yourBusinnesLogicFunction() {
...
getItemInfo("password_hash_value").done(
function(data){
alert(data.Response.data.inventoryItem.itemName);
}
)
}
function getItemInfo(itemHashPass) {
var tmp = null;
return $.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
})
}
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) {
...
}
});
I am trying to post via link. But I think there is a problem. I am not good at Javascript.
I want to send attribute and show with div.
Here is my Code :
<script type="text/javascript">
$(document).ready(function() {
$("#slidingProduct").click(function() {
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
dataType: "POST",
data: {
"number1": aa
},
success: function(json) {
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
You can do something like this:
$(".slpd").on('click',function(){
var aa = $(this).data('urun_id');
var json={"number1":aa};
$.ajax({
url: "data.php",
type: "POST",
dataType:'JSON',
data: JSON.stringify(json),
success: function(result){
$("#result").html(result.number1);
}
});
});
As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and
some modifications in html - It's good to use data-* property of html5:
A
B
O
$(document).ready(function() {
$("a").on('click', function(e) {
e.preventDefault(); // Stop redirection
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
type: "POST"
dataType: "JSON",
data: {
"number1": aa
},
success: function(response) {
$("#result").html(response.number1); // This depends on how you've sent response from server
}
});
});
});
The .each() functions inside the .click() are not running. I do not know how to structure them to make it syntactically correct so jQuery will recognize and run them.
I tried tacking them on before the closing }); but I either didn't do it right or that isn't how it's done. I tried Googling but other than my topic title I was at a loss for what to search. I did try jquery function inside function but that turned out to be a lost cause.
EDIT: I have managed to get the first one to fire properly (//POST specials) however, the second one still isn't working. I even tried to put the extras POST inside the .ajax() of the specials and it didn't work.
$('.class').find('#button').click(function() {
//all kinds of variables here
var dataString = {//variables:variables}
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/reserve.php",
data: dataString,
cache: false,
success: function(html)
{
//POST specials
$('#specialscheck input:checked').each(function() {
var reservation = $('#reservation').val();
var special = parseInt($(this).attr('id'));
dataString = {reservation:reservation, special:special};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_specials.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
//POST extras
$('#extrascheck input:checked').each(function() {
var reservation = $('#reservation').val();
var extra = parseInt($(this).attr('id'));
dataString = {reservation:reservation, extra:extra};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_extras.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
}
});
});
You should move the .each up into the success function of the jquery post, or set its async: false, to follow this pattern.
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType,
async:false
});
Can't seem to get the variable getID to work. I'm trying to change the html of the div. I know that the variable has the right value.
$('.cardid').change(function() {
var getID = $(this).attr('value');
$.ajax({
type: "POST",
url: "inc/change_thumbnail.php",
data: "id="+getID,
cache: false,
success: function(data) {
$("#"+getID).html(data);
alert("success");
},
error: function (err) {
alert("error");
}
});
});
Write data in $.ajax as data: {id : getID}, instead of data: "id="+getID,
Use val to get the value of an input :
var getID = $(this).val();
As you're making a POST request, you should also use the data argument to let jQuery properly send the value :
$.ajax({
type: "POST",
url: "inc/change_thumbnail.php",
data: {id:getID},
cache: false,
success: function(data) {
$("#"+getID).html(data);
alert("success");
},
error: function (err) {
alert("error");
}
});
You can try this:
$('[id="'+getID+'"]').html(data);
and yes you should pass it this way:
data:{id:getID}