I'm trying to use the new flipswitch control of jquerymobile instead of the slider, but it has a strange behavior: "flipping" the switch doesn't make knockoutjs update values accordingly.
But calling .val() on the select element I get the right value as it should be from the visual state of the flipswitch.
I've made a demo on jsfiddle
http://jsfiddle.net/Dn3Fz/3/
<select data-bind="value: Partecipating" id="switch" data-role="flipswitch">
<option>Yes</option>
<option>No</option>
</select>
<br>Value is: <span data-bind="text: Partecipating"></span>
As you can see, the normal dropdown menu, and the slider update the label, while the flipswitch doesn't.
I cannot understand if this is a bug in the flipswitch widget or in the library. Or something else.
Would appreciate some help in debugging and possibly solving this problem.
Thank you
Simone
It was a bug of jquerymobile 1.4 beta
Related
Hello to all I read that this issue
https://github.com/angular-ui/bootstrap/issues/274
is was closed... I've this jsfiddle
https://jsfiddle.net/qq4gqn6t/12/
but when I change the model the label not change... Can help me?
Thanks
Checkout if this jsfiffle, if that is your desired behavior?...
All I've done is:
<input ng-model="selected.descrizione" class="form-control">
replaced state.descrizione with selected.descrizione
Thing is, that state is not available outside uib-typeahead directive, but at the same time selected becomes handle that we can use.
I'm using select2.full.js
I'm not using any require.js to help me pull in modules, I'm basically using my know how from everything I learned in v3.5
I've been trying countless of hours, wrapping my head around this, but I have no idea how to make ajax cascading dropdowns.
Example: You load up the page, there is the first select2 dropdown that pulls data using ajax automatically (you don't enter anything.. data is there on the page load from the server), a default value is selected. Since that default value is selected, the second select2 drop down will use that value to make an ajax call to populate its own list. Now, when I select another value in the first select2 dropdown, the second select2 dropdown will reflect those changes with the new dataset.
What I've able to come up with was a 3 dropdowns that you can populate on a page load, but when you do any ajax request, the dropdown data doesn't change.
It's been two years since I used select2, and the library keeps changing, the documentation keeps changing, I'm at my wits end with this library. But I feel drawn to it by the bootstrap support, and the look and feel. The functionality, the way to implement things, the documentation is just so unbelievably awful.
I don't have any useful code at all, I've been pulling, plugging, modifying, etc.. and now I'm moving to my hair and teeth.
ANY useful example to do this would be awesome.
Just found my answer..
I was using the templating:
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
</select>
to:
data = [{id: "1", text: "1"}, {id: "2", text: "2"}];
<input id="test" type="hidden" />
and just kept my jquery on select2 the same. So it was really just a change in the templating from to that solved it.
However, the only downside to this is that when you are refreshing new data from these drop downs, the highlighted (selected value) is always the first item in the drop down list, even though that's not the selected value shown in the dropdown.
Here is a small code snippet to make Select2 (v4.x) cascading dropdown - https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
Using this module, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box.
Example use -
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
Selected value of parent select2 listbox will be set to the parent_id of the data object before ajax call.
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
I have the following HTML on my page:
<input id="chkIncludeCA3" type="checkbox" /><label for="chkIncludeCA3">Category 3:</label>
And on my code page, the following piece of script:
$('#chkIncludeCA3').prop('checked', true);
Can someone explain to me how I would also update the visual state of the label to show that the checkbox is indeed checked?
EDIT
Thanks to Christophe Roussy for the correct pointer, have discovered the following works perfect:
$('#chkIncludeCA3').prop('checked', true); $("label[for='chkIncludeCA3']").addClass('ui-state-active');
If anyone knows if there is a more official way, I'd appreciate it.
You mean something like this to get the label ?!
$("label[for='chkIncludeCA3']")
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}