I have created a function wherein I edit every value in my datatable.
here is my code:
$('#xin_table2').on('click', 'td', function () {
$(this).children('span').addClass("none");
$(this).children('input').removeClass("none");
$(this).children('input').focus();
$(this).children('input').on('keyup', function (e) {
if (e.keyCode == 13) {
$(this).addClass("none");
$(this).siblings('span').text($(this).val());
$(this).siblings('span').removeClass("none");
$.ajax({
url: site_url+"payroll/edit_data_payroll/",
type: 'POST',
data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',id: $(this).attr("data-id"), column:$(this).attr("data-column"), data:$(this).val()},
error: function() {
toastr.error('Something is wrong');
},
success: function(data) {
toastr.success(data);
}
});
}
});
$(this).children('input').blur(function(){
$(this).addClass("none");
$(this).val($(this).siblings('span').text());
$(this).siblings('span').removeClass("none");
});
});
When you click a td element, the span will hide and the input field will show and you can save the new data by pressing the enter button. The span will also change its value. This code works fine.
The problem is, when I print the datatable it shows the older value even though the value of the span changed. Thanks in advance.
I finally solved my problem.
I added this code inside the success function of my ajax:
$('#xin_table2').dataTable().api().ajax.reload(function(){ }, true);
Related
On a page with a tab control, each tab contains a table, each tr contains a td with a button which has a value assigned to it.
<td>
<button type="button" class="btn" name="deleteEventBtn" value="1">Delete</button>
</td>
This code below works for the first delete. After the AJAX call & the refresh of the div, no further delete buttons can be clicked. The .on is attached to the document. The same happens if I attach it to the body or anything closer to the buttons.
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
}
});
}
$(document).ready(function () {
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
}
});
});
Any ideas? Could it be related to the wildcard for starts with [name^="delete"]? There are no other elements where the name starts with 'delete'.
EDIT
When replacing
$(container).trigger('refresh');
with
location.reload();
it "works", however that refreshes the whole page, loses the users position and defeats the point of using AJAX.
As the button click is firing at first attempt, there is no issue in that code. All you have to do is, put the button click event in a method and call it after the refresh. This way, the events will be attached to the element again. See the code below,
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
BindEvents();
}
});
}
$(document).ready(function () {
BindEvents();
});
function BindEvents()
{
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
});
}
Apologies to all and thanks for your answers. The problem was due to the way the popup was being shown & hidden.
$('#delete-popup').modal('show');
and
$('#delete-popup').hide();
When I changed this line to:
$('#delete-popup').modal('hide');
it worked. Thanks to LShetty, the alert (in the right place) did help!
If you are using Bootstrap Modal
After Ajax Request before Refreshing page add
$('.modal').modal('hide');
This Line will Close your Modal and reload your page. Before that it will complete all Ajax Request things.
But for google chrome there is no issues :) hope this help someone.
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.
I've recently discovered a problem when submitting forms using TinyMCE Jquery-plugin. When trying to submitting normal input fields such as text fields, select boxes and so on, everything works as it should. However, using TinyMCE on a textarea doesn't work correctly; i have to submit two times to save. Is there a fix for this particular problem?
<script>
$(function () {
$('.message').removeClass('hidden');
});
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
HTML
<textarea id="cotent" name="content" style="width:100%"><?php echo $entry->content; ?></textarea>
Answer to my question.
I needed to add tinyMCE.triggerSave();
<script>
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
tinyMCE.triggerSave();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
I am learning jquery and i am stuck with a problem. Here is the code
$(function(){
var gotProducts=new Array();
var productsWithDelete=new Array();
$('.addProducts').on('keyup',function(event) {
var searchVal=$(this).val().trim();
if(searchVal.length > 0) {
$.ajax({
url: 'http://localhost/url',
data: { products: $(this).val(), },
type: 'POST',
dataType: 'html',
success: function(msg) {
$('#printTheProducts').html(msg);
}
});
}
});
$('.productsButton').click(function() {
alert('yes');
});
});
The response I am getting from the ajax call is a button having class productsButton.
Now when i try to click that button I got through ajax then it does not alert yes. I mean it does nothing.
Question:-
What might be the problem?
Try event delegation using .on() for generated button, As they are generated dynamically
$('#printTheProducts').on('click','.productsButton',function(){
alert('yes');
});
Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!
Syntax:
$(closestparentelement).on('event','targetselector',function(){
});
I have the following that fires off when a checkbox is changed.
$(document).ready(function() {
$("#reviewed").change(function(){
if ($('#reviewed:checked').val() !== null) {
$.ajax({
url: "cabinet_reviewed.php?reviewed=yes",
cache: false,
success: function(html){
$("#reviewDate").replaceWith(html);
}
});
} else {
$.ajax({
url: "cabinet_reviewed.php?reviewed=no",
cache: false,
success: function(html){
$("#reviewDate").replaceWith(html);
}
});
}
});
})
This only works once. I'm looking to see when the check box is changed and what the value of it is once changed.
UPDATE:
I've change the code around to the following (based on everyone's comments)
$(document).ready(function() {
$("#reviewed").click(
function() {
var rURL = 'cabinet_reviewed.php?reviewed=';
if ($("#reviewed").is(":checked"))
rURL = rURL + "yes";
else
rURL = rURL + "no";
alert (rURL);
$.ajax({
url: rURL,
cache: false,
success: function(html){
$("#reviewDate").replaceWith(html);
}
});
});
})
The file cabinet_reviewed.php simply echos the value of $_GET['reviewed']
With this updated code the alert shows the correct URL but the second click does not run the .ajax.
Do I need to do something so the .ajax is run again?
Try with != instead of !==
And also this as an alternative:
$('#reviewed').is(':checked')
The below code works consistently in FF 3.5 and IE8:
$("#reviewed").click(
function() {
if ($("#reviewed").is(":checked"))
alert('checked');
else
alert('not checked');
}
);
After your update:
This code...
success: function(html){
$("#reviewDate").replaceWith(html);
}
... is replacing the element with ID=reviewDate in the DOM with the HTML that is returned from the Ajax call, so it is no longer present the second time the Ajax call is made.
Will something simpler like this work for you?
success: function(html){
$("#reviewDate").html(html);
}
There are apparently some bugs with the change() event for checkboxes in IE. Try using the click() event instead and see if it works better.
You normally want to use click event to track changes in checkboxes/radiobuttons. The change event is only fired if the new value differs from the old value. In checkboxes/radiobuttons there's no means of an initial value, only the checked attribute which is often not predefinied, hence the need to click twice before the change event is fired.
In checkboxes/radiobuttons you also don't want to check the value by val(), it's always the same. You rather want to check the checked state using this.checked.
Thus, the following should work:
$(document).ready(function() {
$("#reviewed").click(function() {
if (this.checked) {
// ...
} else {
// ...
}
});
});