I have been trying to stop form submission on event click of a checkbox. But unable to show checked state in the UI. I have also tried to use a separate event loop as mentioned in this answer.
First the checkbox will be loaded by ajax, and append as HTML so I had been using on an event
discountElement.rentalCompanyWithDiscountDiv
.on('click', discountElement.rentalCompanyCheckBox, this.loadCamperFromCountryAndRentalCompany);
Here is code for adding checked attribute to the HTML and calling another request via ajax
loadTakeOverAndReturnableStation: function (e) {
if (e.target.checked) {
e.target.setAttribute('checked', 'checked');
discountElement.camperIds.push(e.target.value);
} else {
e.target.removeAttribute('checked');
discountElement.camperIds.splice(discountElement.camperIds.indexOf(e.target.value), 1);
}
if (discountElement.camperIds.length>0 && discountElement.rentalCompanyIds.length>0){
var country_id = discountElement.country.val();
var _token = discountElement._token.val();
$.ajax({
url: discountElement.fetchStations.val(),
method: "POST",
headers: {
'X-CSRF-TOKEN': _token
},
data: {
country_id: country_id,
_method: 'POST',
'discount_id': discountElement.discountId.val(),
'rental_company_id': discountElement.rentalCompanyIds,
'camper_id': discountElement.camperIds
},
success: discountModule.fillDiv
});
}else{
discountElement.takeOverStationsDiv.empty();
discountElement.returnableStationsDiv.empty();
}
}
This is my initial state of code which will resubmit form on every click. When I add e.preventDefault(); It will not show checked state in UI but worked as if it is checked.
When I tried to implement checked state on setTimeout as suggested on the above answer like this
e.preventDefault();
setTimeout(function () {
if (e.target.checked) {
e.target.setAttribute('checked', 'checked');
discountElement.camperIds.push(e.target.value);
} else {
e.target.removeAttribute('checked');
discountElement.camperIds.splice(discountElement.camperIds.indexOf(e.target.value), 1);
}
},1);
It does not work, either showing checked in the UI or on background,
Related
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);
I know about event.preventDefault() and event.stopImmediatePropagation(). But it doesn't work for me. In my case I have such ajax call:
$('#templateConfirmDialog').on('show.bs.modal', function (event) {
$(this).find('.modal-yes').click(function(){
var form = form2js('search_form', '.', true, function (node) {}, false);
var requestData = JSON.stringify(form, replacer);
var $formErrors = $('.search_form').find('.alert-danger');
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: 'POST',
contentType : "application/json",
url: '/fraud/template/testCreate',
data: requestData,
dataType: 'json',
success: function (data) {
$formErrors.text('');
//if no errors just reload
if (data === undefined || data.length === 0) {
location.reload();
}
else {
//else bind error messages
data.forEach(function(error) {
$('#new-' + error.field + '-error').text(error.defaultMessage);
})
}
}
});
});
My problem is that the ajax call is prevented as much times as I made attempts to input data. If I entered invalid data once - ajax is called twice. If twice - 3 times. What may be a reason of such behavior?
Every time this event happens:
$('#templateConfirmDialog').on('show.bs.modal', function (event) {
You bind a new click event handler:
$(this).find('.modal-yes').click(function(){
So if you show.bs.modal twice, then you have two click event handlers both submitting the AJAX request. Instead, just bind the click event handler once to the target clickable element, instead of binding it every time the modal is displayed.
Replace this:
$('#templateConfirmDialog').on('show.bs.modal', function (event) {
$(this).find('.modal-yes').click(function(){
//...
});
});
With this:
$('#templateConfirmDialog').find('.modal-yes').click(function(){
//...
});
Or, if that element is dynamically added to the DOM, this:
$(document).on('click', '#templateConfirmDialog .modal-yes', function(){
//...
});
That way there's just a single click event handler created when the page loads, rather than adding a new handler every time you display the modal.
I am doing some AJAX when a button is clicked
$btn.button('loading');
$.ajax({
type: 'PUT',
url: 'event/',
data: put_data,
dataType: 'json',
success: function(data){
if (data.redirect) {
window.location = data.redirect;
}
else {
$btn.button('reset');
if ($btn.is('#my-btn')) {
console.log('disabling button');
$btn.prop('disabled', true);
}
}
}
});
disabling button shows up in the console, but the button does not get disabled. Loading and resetting the button works just fine. I tried .addClass('disabled') and .attr('disabled','disabled'), but those also don't work.
See here: http://codepen.io/anon/pen/Wvbeeg
The problem is that button('reset') is asynchronous. You can watch the changes live in the html an see they aren't immediate
A short delay after reset resolves the problem, but personallly i would just code this whole process myself instead of using the bootstrap API
$(document).ready(function() {
$('#mybutton').click(function() {
var $btn = $(this);
$btn.button('loading');
setTimeout(function() {/// mimic ajax delay
$btn.button('reset');
setTimeout(function() {// short delay after reset
$btn.prop('disabled', true);
}, 200);
}, 1000);
});
});
DEMO
Remove:
$btn.button('reset');
For some reason, this doesn't evaluate until after you disable it. (It's asynchronous)
Rather than resetting the button using the 'reset' code, it might be better to just remove the disabled property if it exists. That will effectively enable the button if it should be active.
Modified code:
$btn.button('loading');
$.ajax({
type: 'PUT',
url: 'event/',
data: put_data,
dataType: 'json',
success: function(data){
if (data.redirect) {
window.location = data.redirect;
}
else {
if ($btn.is('#my-btn')) {
console.log('disabling button');
$btn.prop('disabled', true);
} else {
$btn.prop('disabled', false);
}
}
}
});
Bonus tip: Don't use .removeProp() to re-enable the button. That will completely remove the property and you won't be able to use it again. More about prop() here: https://api.jquery.com/prop/
It's because you are using jQuery to bind a click event to the button. So the disable property won't be able to stop it. In your code you will need to add this:
$('#mybutton').off('click');
That will unbind the event from the button.
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 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 {
// ...
}
});
});