How to replace text of element after AJAX request using Jquery - javascript

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

Cant get value from ajax request to be save in variable outside the success

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,
})
}

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) {
...
}
});

Jquery ajax post via link

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
}
});
});
});

jQuery placing .each() functions inside a .click() function

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
});

Variable not working in simple Ajax post

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}

Categories

Resources