I have a table with a td that updates when i press a button .pauseDocker
When It's paused I'm reloading the page. Surely there's a smarter way to just refresh just part of the page in this case the table.
$(document).on('click','.pauseDocker' ,function(){
var buttonClicked = $(this);
var containerName = $(this).attr('name');
$.ajax({
type: 'post',
url: '/container/pause',
data: {containerName: containerName},
success: function () {
location.reload();
},
error: function() {
}
});
});
You can get the first parameter of the success callback and this will contain data from the response of your server. Use that to retrieve the changed data and update client side accordingly
Related
Ajax is not working I have to reload the page to make it work. Because of ajax was not reloading i used location.reload but I don't want this so please anyone can help me out how to make ajax function work. Its removing data but I need to refresh the page to see
$(document).ready(function() {
$('.headertrash').click(function(e){
e.preventDefault();
var trashcartid = this.id;
var splittrash = trashcartid.split('-');
var cartdelid = splittrash[1];
//Ajax Request
$.ajax({
url: 'delusing.php',
type: 'POST',
data: { id:cartdelid },
success: function(response){
// Remove row from HTML Table
$(this).closest('li').fadeOut(300,function(){
$(this).closest('li').remove();
});
//I uses location.reload as alternative
// location.reload();
}});
e.preventDefault();
});
I am going to assume that your request is working and returns success.
From your code and question I am deducing that the actual issue is not with ajax not working but with the li not fading and disappearing.
The issue you are experiencing is due to the this you are using, the way you are using this it means the ajax request, but your intent is to get the element associated with $('.headertrash') to fix your issue:
$(document).ready(function() {
$('.headertrash').click(function(e){
e.preventDefault();
var trashcartid = this.id;
var splittrash = trashcartid.split('-');
var cartdelid = splittrash[1];
var clickedElement = $(this);
//Ajax Request
$.ajax({
url: 'delusing.php',
type: 'POST',
data: { id:cartdelid },
success: function(response) {
// Remove row from HTML Table
clickedElement.closest('li').fadeOut(300,function() {
clickedElement.closest('li').remove();
});
}
});
});
});
See: Ajax (this) not working for more details
I am adding data inside a table and I am preventing page to reload, so I use load function to just load the table and fetch data from it without reloading the page.
Sample output:
And then after I add payment:
I use this code to load the data without reloading the page:
$('#payment-body').load('client-info.php?id='+c_id+' #payment-body');
And now my problem is. As you can see there is X icon after the printer icon.
I set function with that icon. here is the function:
$(".remove-transaction").click(function()
{
var p_id = $(this).attr("id");
var c_id = $(this).attr("name");
var remove_payment = $(this).attr("id");
$.ajax({
url: 'proccess.php',
type: 'POST',
async: false,
data: {'p_id':p_id,'c_id':c_id, 'remove_payment':remove_payment},
beforeSend : function(){
$("#status").fadeIn(0).delay(2500).hide(0);
$("#recieptModal_"+p_id).modal("hide");
$("#statusModal").modal("show");
$(".header-status").html('<h4>Please Wait...</h4>');
$("#status").html('<h3 class="center"><em class="fas fa-sync fa-spin checking-client"></em> Deleting Payment...</h3>');
},
success: function(response){
$("#status").fadeIn(0, function(){
$(".header-status").html('<h4>Done!</h4>');
$("#status").html('<h3 class="center"><em class="far fa-trash-alt invalid-client"></em> Payment Removed!</h3>');
$("#payment-row"+p_id).fadeOut('slow');
$('#total-paid').load('client-info.php?id='+c_id+' #total-paid');
$('#total-balance').load('client-info.php?id='+c_id+' #total-balance');
$('#remarks').load('client-info.php?id='+c_id+' #remarks');
window.setTimeout(function () {
$("#statusModal").modal("hide");
}, 3000);
});
},
error: function(error){
console.log(error.responseText);
//you could debug your php code if some error raises
}
});
});
It is working when I reload the page. But what I want to happen is make it work without reloading the page. Or as you can see. just using .load() function.
try doing this, I think it is because the newly appended data function will not work,
$(document).on('click', '.remove-transaction', function(){
So, I have a jQuery AJAX call that gets data from the server (some text, some links).
Inside AJAX success callback function I got a .on that is bind to <a> that load for me next page and get me the text of the clicked link (let's say stackoverflow.com).
The problem starts here because in the newly loaded page I got anchors...
After every click on anchor links I got new .text() value.
$.ajax({
url: url,
type: type,
dataType: dataType,
success: function(data){
$('.container').append(data);
$('.container').on('click', 'a', function(e){
e.preventDefault();
var clickLinkName = $(this).text();
console.log(clickLinkName);
$('.container').load($(this).attr('href'));
});
}
});
I would like to know how to lock clickLinkName variable. OR any other way to save only first hit.
I think this would do the trick:
$.ajax({
url: url,
type: type,
dataType: dataType,
success: function(data) {
$(".container").append(data);
var clickLinkName; // Declared here.
$(".container").on("click", "a", function(e) {
e.preventDefault();
// If not initialized, initialize.
if(!clickLinkName) {
clickLinkName = $(this).text();
}
console.log(clickLinkName);
$(".container").load($(this).attr("href"));
});
}
});
That would save only the first value in the variable clickLinkName. This answers your question, but I'm sure there are better ways of doing this.
i have nested records of a table that i insert to a different table of a database with ajax, when i click on a particular button the value changes to data sent and so forth for the descending buttons. i perform this with two scripts that works perfectly, one insert data without refreshing and the other disables the particular button on click and changes the value to data sent. Now i want to put it all together so it becomes one.
Insertion
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function() {
Disable button
$(function(){
$(".btn-style").click(function(){
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
$(function(){}); is just a shortcut for $(document).ready(function(){});
Just place both pieces of code inside a single DOM ready handler. e.g.
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {});
});
$(".btn-style").click(function () {
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
Assuming ".btn-style" matches your submit button you can simplify this to:
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
// Disable submit button on this specific form
$('.btn-style', this).val('data sent').prop('disabled', true);
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {
});
});
});
The subsequent issue found (not working in Chrome) is down to using disabled via attr. For genuine properties (like checked and disabled) always use prop instead of attr.
The error in the title of the post came from jQuery version 1.10.2, line 637
I've got a modal that pops up on a button click with some textboxes and when a button inside the modal is clicked, the information that's in the text boxes is added to a database via AJAX. In order to make the page a little more user-friendly I added a setTimeout function to pause the hiding of the modal so the user can see a verification message that the data was added to the database. Block 1 of my code adds the record to the database, but the setTimeout call doesn't work right:
function insert(data) {
data = JSON.stringify(data);
$.ajax({
type: "POST",
url: "../Service.asmx/InsertPerson",
dataType: "json",
contentType: "application/json",
data: data,
//record gets added to the database
//something about the setTimeout function
//that gives the error in the title
success: function () {
console.log('success before setTimeout');
var successMessage = $('<div>').text('Successfully added to the database...').css('color', 'green');
$('.modal-body').append(successMessage);
//*******this function doesn't run
window.setTimeout(function () {
$('#contact').modal('hide');
$('.modal-body input').each(function () {
$(this).val('');
}, 1000);
});
}
});
}
I fixed it using the code:
(the success function is what we need to pay attention to here)
function insert(data) {
data = JSON.stringify(data);
$.ajax({
type: "POST",
url: "../Service.asmx/InsertPerson",
dataType: "json",
contentType: "application/json",
data: data,
//record gets added to the database
success: function () {
console.log('success before setTimeout');
var successMessage = $('<div>').text('Successfully added to the database...').css('color', 'green');
$('.modal-body').append(successMessage);
window.setTimeout(function () {
$('.modal-body input').each(function () {
$(this).val('');
});
$('#contact').modal('hide');
}, 1000);
}
});
}
I see that I in the first block I didn't close the each function, and I fixed that in the second block and that's why it works, but for future reference, what does this error really MEAN in this context?
It means that you left off the second argument to setTimeout and instead passed it as the second argument to .each().
edit — it looks like jQuery is picking up the argument (that 1000) and trying to pass it through to its internal each implementation. The .apply() function expects it to be an array.