The state of checkbox looks updated, but it is not updated actually - javascript

I have strange issue. I am developing something for Magento. I added link "Select all categories" and add a jQuery event to check all checkboxes when I click on it. It works great, but somehow the html is not updated and Magento can't see that all inputs are selected. But when I manually click on a checkbox, it updates html (I am looking at the console) and Magento save button works just fine.
How to resolve this issue? I am not sure what else should I do to perform updating html. It look like it works (checkboxes are selected), but please take a look at the console and html. Html must be updated.
I created jsfiddle: here

try this:
.attr('checked', 'checked');

Just check all checkboxes, like this .
Your is(':checked') IF statement seems wrong as it should be enclosed on an .each() so it applies to all checkboxes, try the more simple approach on the fiddle I linked.

Did you try prop('checked', true); instead of prop('checked', 'checked'); ?
That's what I see in all the examples.

I figured it out. It was Magento issue. Magento doesn't use that form, it uses hidden input and collects selected checkboxes. Will upvote all answers anyway. Thanks

You can use something like :
// custom jQuery added
jQuery(function() {
var to_check = false;
jQuery(".select-all-categories").click(function(){
if (!to_check)
to_check = true;
else
to_check = false;
jQuery("#banner-categories input[type=checkbox]").each(function(){
if (!to_check)
jQuery(this).removeAttr("checked");
else
jQuery(this).attr("checked","checked");
});
return false;
});
});
Code can be optimized

Related

Jquery radio prop not updated

Got a weird one.
I have the below code where I select a radio element and try to set it as disabled.
let radio = element.find('input[type="radio"]');
// radio.remove();
radio.prop("disabled", true);
If I use the remove() method, the element gets removed.
However, when I try to set the "disabled" prop to true, it just doesn't work.
Don't see the HTML updating either.
I've tried radio.attr("disabled", true); and radio.attr("disabled",'disabled');with no luck as well.
Any idea why this is happening?
Using jQuery v3.5.1.
Thanks
With jquery, it is easy to do as follows, means you are in right direction:
element.find('input[type="radio"]').prop('disabled', true);
or
$('input[type="radio"]').prop('disabled', true);
You need to verify what you have written in element. Can you write in detail how did you have declared element?

check box does not work properly using JQuery

What I want is to make checkbox checked when the required data == 1. For example, if data.add_content ==1 then make checkbox checked. The problem in my code is that checkbox only checked after I refresh the page. I do not want to refresh the page, could I use callback function to achieve that or what to do? please explain with code sample. thanks
UPDATED CODE fiddle
Have you tried change the following
data.add_content ==1
to
data.add_content =="1"

HTML Checkbox Click() Return FALSE or TRUE instead of READONLY or DISABLED using jQuery

Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.
I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.
"DISABLED" is NOT an option. It won't post with the form.
"READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like:
$(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
I've also messed around with swapping classes in case there was something limiting about the readonly attribute.
THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).
QUESTIONS
Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
Is there another alternative for toggling the ability to check the checkboxes?
Thanks a bunch.
jsFiddle DEMO
If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.
$(':checkbox[readonly=readonly]').change(function () {
if($(this).is(':checked'))
console.log("return false");
else
console.log("return true");
});
OK finally figured it out. I'll try to keep my points organized.
Include jquery-ui.js, not sure why, but it needs it.
Use a .change() event to add and remove two classes that designate READ/WRITE
Use $('.ReadClass').bind('click',false); to prevent checking
Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking
Here is a link to my jsFiddle demo.
The demo loops through all specified form element to toggle the ability for the user to enter data.
Hope this helps somebody else.

jqgrid - how do not show edit form if condition not met

Another jqgrid question. On my page i got a select drop down. If nothing is selecting and the user click to add record, the edit form should no popup. I can't seems to find how to do this in google. Here is what I have:
afterShowForm:function(formid) {
if ( ($('#listbox').val()) == "" ) {
alert('Please select an option.');
$('#'+formid, form).hide();
return false;
}
}
The above code is not working. It actually got error - form is not defined. Should I be using afterShowForm or is there a more proper way to do it.
Thanks.
Ok guys. I found a 'solution' but I am not sure if that is the best way to do it (I think it is not :) ) but it gets the job done.
Instead of using formid pass in through the function, I have view source and get the id of the edit form id. For my case the id is #editmodmy_table. So to hide the form from showing, I just use jquery to do it.
$('#editmodmy_table').hide();
Other than that, we have to get rid of the overlay that is attached to the edit form modal as well. Hiding the edit form don't hide the overlay automatically. So we have to do this:
$('.jqmOverlay').hide();
Hope this helps someone.
Please post a better solution to this if any. Thanks.
The error in this code means that the variable 'form' is not defined.
If I understand this correctly that variable is not needed.
To find the form and hide it you could try something like this instead:
$('form#'+formid).hide();

Setting the "type" attribute of an input does not work with jQuery attr() method

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.
Code for the form:
form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);
Code for the buttons:
form.append(
$(document.createElement('div')).
attr('class', classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type', 'submit').
addClass(classesHash.submitButton).
attr('title', i18n('Filter')).
attr('value', i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type', 'button').
addClass(classesHash.addButton).
attr('title', i18n('Add filter')).
attr('value', i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
I made a more simple test with this HTML code:
<form action="" method="get"><button id="test">test</button></form>
When Chrome doesn't finds a submit button, any button submits the form.
The following doesn't works, the form gets submitted on button click:
$('#test').attr('type', 'button');
The following does works, the form does not submit on button click:
document.getElementById('test').setAttribute('type', 'button');
The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.
First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!
The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.
If you look in your console you'll see this:
Error: Uncaught type property can't be changed
Here's a quick test showing this, check the console to see the error jQuery throws.
Use prop instead of attr. It`ll work for sure.
Please look at the below sample code:
$("input[name='email']").focusin(function() {
console.log("alert");
$('#email').prop('type','number');
});
Let me know your thoughts on this.
Thanks
jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...
I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?
$("#test").click(function(e) {
e.preventDefault();
//more work here....
});
EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?
So this post was helpful to me, but my solution was to clone the button in question and replace it
$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

Categories