Updating a jQuery Mobile checkbox (with GWT) - javascript

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");

Related

jquery: comboBox.trigger(´chosen:update´) documentation?

comboBox.trigger(´chosen:updated´) what does this do in Jquery?
Anyone can give an example?
I dont see any effect or utility.
I really search over 20 links over google and I cannot find the documentation.
---- correcions ----
´chosen:update´ to ´chosen:updated´
comboBox.trigger(´chosen:update´)
comboBox
You will have a variable that points to a jquery collection containing a select, likely setup using
let comboBox = $("#mySelect");
.trigger
Raises the named event
'chosen:update'
the name of the event to raise.
In this case, the event is namespaced, this just allows it to be specifically looked for in the chosen namespace. It could also be .trigger("updated") and chosen2 will likely pick it up - this stop other code such as .on("update".. from triggering.
It also appears to be a typo as the event (depending on the version of chosen2) should be updated.
All together, you call this code when you change the value of the underlying select, eg:
var comboBox = $("#mySelect");
comboBox.val("newValue");
comboBox.trigger(´chosen:update´)
when your select has been converted to a select2 combo box. Without which, the select2 UI would not be updated to match the new value.
NB: The event to trigger appears to change with each version of select2, it could be one of:
comboBox.trigger('chosen:updated');
comboBox.trigger('change');

How to detect the id of an element in js [duplicate]

How can I get the control ID of a asp.net control while mouseover on a control dynamically. For example, I've page called "Default.aspx" which has 5 text boxes, two check boxes, 2 radio buttons. So, when I mouseover a specific control I should be able to get the currently hovered controls ID using javascript or jquery. I dont want to write code for every control, instead the javascript should be able to detect the mouseover event when the mouse is moved over any control and in the backend the controld ID should be returned.
Any solution ?
$("input").mouseenter(function(e){
e.stopPropagation();
$id=$(this).attr("id");
});
this will return the id of input control currently being hovered
I chuckle a bit when jQuery developers use jQuery in their handler function when it's the long way to get the answer. Here's a shorter/faster way:
$("input").mouseenter(function(e){
var id = this.id;
// do whatever you want with the id here
});
If you're truly trying to pass this to your back-end web server (a part of your question that was not clear to me), then you will need to initiate communications to the web server either using a posted form or an ajax call.
This might not be the best practices way, but I would set the onmouseover event to trigger a function that sets the value of a hidden field. In your JQuery read the value of that field and you will know which one they did the mouseover on...
$("input").hover(function(){
// hover on
var theId = $(this).attr("id");
if(theId) {
// do something
}
else {
// no id found
}
},
function(){
// hover off
});
I suppose you won't need to check if an id exists since it's a .NET control though

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

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.

Checkbox not being checked when running function

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.

Categories