Checking & Unchecking Checkboxes inside a JQuery Mobile Dialog - jquery-mobile

I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">

I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh

Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.

To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Related

_this.testFormEl.nativeElement.submit is not a function for Form Post

I have a hidden form in a dialog which I want to submit automatically.
HTML Code :
<form #formVal method="POST" [action]="urlvalue">
<p *ngFor="let item of redirectData.RedirectData.Form.Parameter;
let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</p>
</ form>
`
In my previous angular 1.5 code I was doing
$timeout(() => {
angular.element('#3DSForm').submit();
}, 100);
and it was working but here in Angular 6 I tried using ViewChild in ngAfteronInit but still no luck I am getting error for native element, I even used ngNoform in my HTML but didn't work out.
#ViewChild('formVal') form: ElementRef;
setTimeout(() => {
this.form.nativeElement.submit();
}, 200);
Kindly suggest what am I missing
You probably have some element called submit.
Example:
<input type="hidden" name="submit">
Rename it to something else, e.g btnSubmit.
You should call click event for submit button like this,
<form #formVal method="POST" [action]="urlvalue">
<div *ngFor="let item of redirectData.RedirectData.Form.Parameter; let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</div>
<input type="hidden" name="submit" #submitBtn>
</ form>
in ts file
#ViewChild('submitBtn') submitBtn: ElementRef;
submitForm() {
this.submitBtn.nativeElement.click();
}
after that call the submitForm() function from where you want to submit the function.
I was able to achieve it using HTMLFormElement.
<form ngNoForm name="myForm" id="myForm" [action]="urlvalue" method="POST">
<button type="submit" class="test" style="visibility: hidden;"></button>
</form>
This code in the component.
const form: HTMLFormElement = document.getElementById('myForm');
form.submit();

How to find the text in label-for of jQuery mobile Radio and Checkbox with knockout?

I'm using jQuery 1.9.1, jQM 1.3 & knockout 2.2.1.
My html is as follows:
<div data-role="page" id="coloursView">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Colour:</legend>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-1" value="1" />
<label for="radio-1">Red</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-2" value="2" />
<label for="radio-2">Blue</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-3" value="3" />
<label for="radio-3">Green</label>
</fieldset>
</div><!--/content -->
</div><!--/page -->
My view model is also very simple:
function ColoursViewModel() {
this.template = "coloursView";
this.colour = ko.observable("1");
this.label = ko.observable(); // custom binding
}
Now, i would like to get the description of the selected colour, not the value.
It seems to me, that i need a custom binding, like this one:
ko.bindingHandlers.label = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$("radio", element).filter(function(el) { return $(el).text() === value; }).prop("checked", "checked");
}
};
But i'm not able to get the text of the related label - the label-for text.
Someone could help?
Thanks in advance
Update
Here is another approach where to find only :checked items and remove white-space in text.
Checkbox
$('input[type=checkbox]').each(function () {
if ($(this).is(':checked')) {
var checkbox = $(this).prev('label').text();
alert('Checkbox: ' + checkbox.replace(/\s+/g, ' '));
}
});
Radio
$('input[type=radio]').each(function () {
if ($(this).is(':checked')) {
var radio = $(this).prev('label').text();
alert('Radio: ' + radio.replace(/\s+/g, ' '));
}
});
Updated Demo
Checkbox
$('div.ui-checkbox').find('span.ui-btn-text').text();
Radio
$('div.ui-radio').find('span.ui-btn-text').text();
Sorry if i answer myself, but i think i got it. At least for radio inputs.
Now, i have a custom binding handler at fieldset level, to keep the markup clean and more readable, as i can:
<fieldset data-role="controlgroup" id="front-colours" data-bind="frontColourLabel: frontColour">
<legend>Front Colour: <span data-bind="text: frontColourDescription"></span> (Value: <span data-bind="text: frontColour"></span>)</legend>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-1" value="red" />
<label for="fc-radio-1">Red</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-2" value="blue" />
<label for="fc-radio-2">Blue</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-3" value="green" />
<label for="fc-radio-3">Green</label>
</fieldset>
this is the binding handler i come up:
ko.bindingHandlers.frontColourLabel = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.unwrapObservable(valueAccessor());
var id = $('input:radio[name='+element.id+']:checked').prop("id");
var radioText = $('label[for=' + id + ']').text();
viewModel.frontColourDescription(radioText);
}
};
the only tricky part here, is that the id of the fieldset is equal to the name of the radio-group, as it's easy to filter out what radio-group i want to address.
WORKING EXAMPLE: http://jsfiddle.net/h7Bmb/1/
I try now to get the checkbox part to work. Someone can help?

jQuery Mobile: number input and plus/minus buttons inline

Is there a possibility to have a number input with minus-button on the left and plus-button on the right? Or maybe also -- ++ to change value in bigger steps.
I know that I'm not the first one asking this but:
This solution is not displaying correctly in the first turn and jQuery-Mobile-Stepper-Widget from Github (can't post another link because I'm new) does not work with current version of jQuery Mobile.
The result should look like the screenshot in this question: Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers? respectively horizontal grouped buttons in jQuery Mobile
Any ideas or new snippets, working with current version of jQuery mobile?
Here is a hint, the rest is purely CSS job and extra JS codes to control the value, e.g. maximum, minimum...etc.
HTML
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<button id="plus" data-inline="true">+</button>
<input type="text" id="number" value="0" disabled="disabled" />
<button id="minus" data-inline="true">-</button>
</div>
Code
$('#plus').unbind('click').bind('click', function () {
var value = $('#number').val();
value++;
$('#number').val(value);
});
$('#minus').unbind('click').bind('click', function () {
var value = $('#number').val();
value--;
$('#number').val(value);
});
JSFiddle
In jQM the input type number does the most of the magic you want
<input type="number" name="number" value="0"/>
If you require more fancy styling you have to follow Omar's code
<i onclick="qty('plus');" class="fa fa-plus c_pointer"></i>
<input type="text" id="prdqty" name="qty" value="1" placeholder="1">
<i onclick="qty('minus');" class="fa fa-minus c_pointer"></i>
function qty(val){
pqty = $('#prdqty').val();
if (val == "plus") {
var newVal = parseFloat(pqty) + 1;
} else {
if (pqty > 1) {
var newVal = parseFloat(pqty) - 1;
} else {
newVal = 1;
}
}
$('#prdqty').val(newVal);
}

Jquery-UI radio button

I am using two groups of radio buttons
Group 1:
State
City
Group 2:
A-C
D-H
I-M
N-R
S-Z
When I toggle between state and city, I want A-C from group 2 to be set to checked while the others are set to unchecked.
I have it working in this fiddle here fiddle
HTML:
<div id="sort-radio">
<input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
<input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
<label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
<label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
<label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
<label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
<label for="S-Z">S-Z</label>
</div>
JavaScript:
$(function () {
$("#sort-radio").buttonset();
});
$(function () {
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
document.getElementById("byState").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
document.getElementById("byCity").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
However, when I use this exact code in my website, it does not work (it leaves the previously selected button from group 2 selected). I am using jquery-ui-1.10.1.custom.css which displays the radio buttons nicely, as found here: jquery ui button.
Any clue why this would affect it? When I remove the line <link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" /> from my index.php, it works beautifully.
A few problems:
The button widget works by responding to click events on the radio button's label. This means that the click event you are listening to on the radio buttons themselves won't get fired, since you actually aren't clicking the radio buttons themselves, but their labels. You can work around this by using the change event.
You need to call .buttonset('refresh') after manually updating the checked state of a radio button.
Just setting the checked attribute on one radio button in a group is enough to make the rest become unchecked automatically. You shouldn't need to set the checked property on each one.
You should put your event handlers inside the document.ready handler as well. You can also just use one instead of two.
With all of those things in mind, here are the changes I would make:
$(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
document.getElementById("byState").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
document.getElementById("byCity").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
});
Example: http://jsfiddle.net/Fzq8L/2/
Since you are using jQuery, you can simplify this a great deal by adding a class to the radio buttons - of which only one can be "set" SO listen to the change event on those. Remove the extra function at the start, pick one of the "array" of buttons to click from the second group. (since only one can be picked)
Simpler version markup :
<div id="sort-radio">
<input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
/>
<label for="byState">By State</label>
<input type="radio" class="picker" id="byCity" name="sort-radio"
/>
<label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
checked='true' />
<label for="A-C">A-C</label>
<input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
/>
<label for="D-H">D-H</label>
<input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
/>
<label for="I-M">I-M</label>
<input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
/>
<label for="N-R">N-R</label>
<input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
/>
<label for="S-Z">S-Z</label>
</div>
Code:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
$('#alphabet-radio').buttonset('refresh');
});
Working example:http://jsfiddle.net/MarkSchultheiss/8x28x/2/
Set back second group, first to item when either of first group is changed:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq(0).prop("checked", true);
$("#alphabet-radio").buttonset("refresh");
});
Fiddle for that: http://jsfiddle.net/MarkSchultheiss/8x28x/3/

how to post form in MVC 3.0 razor on radio button change

I want to active and inactive user account on click on form post. I am using
#using (Ajax.BeginForm("SetStatus", "Home", null, new AjaxOptions() { HttpMethod = "Post" }, null))
{
if (res.Status == 1)
{
<span class="userStatusSpan statusActive"><input type="radio" name="status" value="1" checked="checked" />Active</span>
<span class="userStatusSpan statusInactive"><input type="radio" name="status" value="0" />Inactive</span>
}
else
{
<span class="userStatusSpan statusActive"><input type="radio" name="status" value="1" />Active</span>
<span class="userStatusSpan statusInactive"><input type="radio" name="status" checked="checked" value="0" />Inactive</span>
}
}
Can anyone please tell me how to post form on check box change?
You can call below javascript function onclick event of your radio button.
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
In my opinion in this case better to use plain jQuery ajax post. Some example you can find here: Submit form when checkbox is checked - tutorial
Just go for document.formid.submit();

Resources