Checkbox not being checked when running function - javascript

I have a checkbox that when it is clicked it submits the form to the server to store the detail. All works fine except that after the form is submitted I update a div to say submitted but the checkbox isn't ticked. The page isn't refreshed of course and upon page refresh it is ticked.
I thought I might be able to check the box myself as I'm using jQuery but I have a lot of these checkboxes each with a dynamic name so I'm not sure how I would call them. I thought something like:
$('input[name=("favourite" + id)]').attr('checked', true);
might work but no luck. If I don't call the function on the checkbox being ticked the checkbox behaves normally.
Thanks for anything that could help.

You should break your string in order to introduce the value of the id variable into your selector, you can do it like this:
$('input[name="favourite' + id + '"]').attr('checked', true);

Try doing
$('input[name=("favourite" + id)]').checked = true;
instead.
The issue may be that setting the attribute is not automatically interpreted by your browser as changing the DOM property. This is a bit confusing, but on browsers like Firefox, etc, HTML attributes and DOM properties are stored separately (most are named the same, but there are exceptions - such as the class attribute being represented by the className property).
Changing properties affects the behavior of the Elements, while attributes do not always have the same effect - on some browsers they are only parsed during initial render.

Related

If 2 radiobuttons have the same value, open the page with the first one selected

Let's say because of database restrictions 2 radiobuttons have the same value ( I know that it's better without using this ). Is it possible accordingly to this picture:
to select the first of two the same values when opening the page? So in this example "Geen" has the same value as "Dagelijks". When the page opens it should be "Dagelijks" that is pre checked (this depends on the value with this client ID, could also be wekelijks or maandelijks prechecked). Does anyone know if this is possible? Thanks in advance!
Assuming you are using javascript, it is certainly possible. Target the first element, something like this should work:
$('input[value="Geen"]').filter(':visible:first').prop('checked', true);
It can be done by making those radio buttons as default or checked true.

How can I exclude controls from making form Dirty?

I'm using this: $('form').dirtyForms(); from https://github.com/snikch/jquery.dirtyforms to check if my form is dirty. However, on my page I have some dropdown's that are simply used for filtering (they should not make my form "dirty"). Right now when I select any of these drop down's it causes my form to become dirty. Using jquery.dirtyforms (I read their docs but do not see how), how do I exclude selectors (dropdowns, textboxes, etc.) maybe via a class name so that they do not mark the form as dirty.
I tried various things like assigning these dropdowns / filters a class called ignoreDirty then in my jquery I did this:
$('form').dirtyForms().ignoreClass('ignoreDirty');
This produces an error, so I must be doing something wrong.
Note I've also tried setting it via property:
$('form').dirtyForms({ ignoreClass : "ignoreDirty" });
But this still makes my form dirty for any control whose class name is still ignoreDirty
Please note these filters cause postbacks but lets say I go to my form and have not made a single change. I start clicking on these filters and the minute they post back this happens:
What can one say, the plugin code makes almost no sense to me :D However to make it quickly work for ignoring select boxes, you could replace its onSelectionChange with following
Original function
var onSelectionChange = function() {
$(this).dirtyForms('setDirty');
}
New version
var onSelectionChange = function () {
//this is the new line. self explanatory
if ($(this).hasClass($.DirtyForms.ignoreClass)) return;
$(this).dirtyForms('setDirty');
}
After this you should rely on the original developer for a proper fix. I just posted this as an answer because of space in comments
There seems to be 2 different issues here.
First of all, you are attempting to set the ignoreClass to ignoredirty. ignoredirty is the default value, so there is no reason to set it. However, if you do need to set it to something else, you can do so using the syntax:
$.DirtyForms.ignoreClass = 'my-ignore-class';
Secondly, in version 1.0.0 the ignoreClass only worked on Hyperlinks. This behavior has been amended to work with input and selection elements in version 1.1.0.
In version 1.2.0, you can now also set the ignoreClass to parent container elements to ignore input or clicks from any element within.

Updating a jQuery Mobile checkbox (with GWT)

I'm using jQuery Mobile enhanced GWT and have a checkbox. But when I set the GWT checkbox using a normal check.setValue(false); it sets the value, but does not change the jQM enhanced display.
I have tried various combinations of refresh and prop/attr but they all seem to either do nothing at all or fail with a message saying it's not initialised.
The code is various variants of $('input[name="gwt-debug-cwCheckBoxMonday"]').prop("checked", true).checkboxradio('refresh');
I gout it to work using $("input[type='checkbox']").checkboxradio("refresh"); but I want to only do it for a specific one, not every one.
I made a fiddle at http://jsfiddle.net/liftarn/38uch/ to illustrate the problem.
The HTML is from http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCheckBox
It is a bit tricky. First you have to get the input element. One way to do it is (where w is your CheckBox):
NodeList<Element> nl = w.getElement().getElementsByTagName("input");
Element e = nl.getItem(0);
Now you have the input element and can get the id using getId()
Then you just make a native function taking the id and the boolean value and do
$wnd.$("#" + id).prop("checked", false).checkboxradio("refresh");

How to reset specific form element in a search form?

I have a search form that has different elements in it, checkboxes, selects, text fields etc. Each change is accompanied by an ajax call that gets the number of results as a sort of counter. I would like to reset only the previous element that caused the counter to return a value of 0.
I was thinking about keeping track of each change in a variable, and each time the counter evaluates to 0, I would then reset the element that caused the change. I however fear that this could force me to handle all the different elements differently with a lot of code and jumping around.
Is there a possible more elegant solution to the problem that anybody can think of? I would appreciate the help.
I cannot comment your question, but : if I understand correcty, there is a big form, and each change on any element, triggers an ajax call, that returns a resultset.
If this resultset size is zero, then, you want the form to reset to previous value.
That would mean, that only the last-changed value has to be tracked down, and reset ?
In this case, your onchange event callback should use this value to get current form element value, and ID. Then, as the resultset comes back, set back the stored value to that element if there are no rows.
Otherwise, if the form is managed globally, you could always store it with a .clone() call, then .remove() it and .insert() the clone back if the resultset is empty.
PS : i know this solution not really elegant :)
Your AJAX module could return a JSON-Encoded string with the data causing this event to occur (PHP-Function: JSON_encode) and from there on, you can cycle through the erroneous values resetting them and displaying further informations. i.e. "Your E-Mail seems to be invalid".
PHP: See JSON_encode
JavaScript: See getElementsByTagName('input') (or textarea or select)
Note: In case of a select item, you may rather want to change the Attribute "selectedIndex" than "value".
I solved the problem by recording each change to the form with
$("#form_id").on("change", function(event) {
//Event bubbling
type = $(event.target).get(0).type;
selector = $(event.target);
}
Then using the Strategy design pattern (Javascript Strategy Design Pattern), I reset each possible field type accordingly. Example for text field,
var Fields = {
"text": {
resetAction: function(fieldSelector) {
fieldSelector.val('');
}
}
};
//To call the reset action for the type of field,
Fields[type].resetAction(selector);
I had to trigger a change event for hidden fields to have their changes also bubble.

How can I change the inline attribute checked="checked" in javascript?

I'm working on a move up/move down function on one of my lists and the things I need to move contain checkboxes. However, I set the checked attribute in PHP and when I switch the innerHTML of the elements, the checked status always reverts to what the checked attribute is set. I tried making an onchange function to change the attribute as I click it with
if(el.checked == true)
el.setAttribute("checked", "checked");
else
el.setAttribute("checked", "");
but that doesn't work (and i don't know why I even expected it to work, to be honest)
Any idea how I could do it? Switching the elements alltogether in the dom tree would be problematic as would be not setting the checked attribute in PHP.
edit: aparently there's no way to do what I asked but my problem is fixed by not being a lazy bastard and moving things around in the DOM like i'm suppsoed to.
When the checked attribute is present in HTML (no matter what value it has), then the IDL (DOM) attribute checked is initialized to true, as opposite to its default value false. Your code seems to expect otherwise. I don’t understand what you are trying to do, since you should be able to move a checkbox element withouh such operations. If you move the element node, there is no need to play with the attributes.
Set the checked property:
checkboxObject.checked=true|false
You can try this way
if(true) document.getElementById("check1").checked = true;
else document.getElementById("check1").checked = false;
Check on w3School.com
Hope this resolves your issue.

Categories