Jquery mobile - Refreshing checkboxes with pageinit - javascript

I am calling a page (see code below) from a list of links on another page using. A list like this
<ul data-role="listview" data-theme="g">
<li>test</li>
</ul>
with the code below being the test.html page.
I am using jquery mobile on these pages. Only the checkboxes after the first 3 checkboxes seem to get refreshed properly (appear as checked) when the page is loaded by clicking on the link. The first three checkboxes always appear to be unselected and their checked value is set to false. What is unusual is that if I place an if statement right after the statement that is setting the checkbox to true the checkbox checked value evaluates to true, but appears to be false on the rendered page and you look at the checked value in the elements area of the web inspector. When you refresh the page (using F5 or the refresh button near the address bar) the checkboxes refresh as you would expect. Any help would be greatly appreciated. While the sample code below appears to just be setting all the checkboxes to a checked value I am really (in my real page) setting their value based on data from a recordset so I cannot just do a mass setting to true and refresh. I have to loop through the recordset and set the checkbox values accordingly. The code below is just a simple reproduction of the error I am having. Thank you!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" />
<script src="jqm/jquery-1.7.1.min.js"></script>
<script src="jqm/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="loadCB" data-role="page">
<script type="text/javascript">
$("#loadCB").live('pageinit', function() {
// do something here...
for (i=0;i<=5;i++)
{
$("#checkbox-"+i).prop("checked", true);
$("#checkbox-"+i).prop("checked", true).checkboxradio("refresh");
}
});
</script>
<article data-role="content">
<form id="frmR">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/>
<label for="checkbox-0">checkbox-0</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/>
<label for="checkbox-1">checkbox-1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/>
<label for="checkbox-2">checkbox-2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/>
<label for="checkbox-3">checkbox-3</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/>
<label for="checkbox-4">checkbox-4</label>
<input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/>
<label for="checkbox-5">checkbox-5</label>
<input type="submit" value="Set Rules" />
</form>
</article>
</body>
</div>
</html>

Check this code
$("#loadCB").live('pageinit', function() {
// do something here...
$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
});

I wrote a fairly comprehensive list of widgets and the method by which you refresh them:
http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields
Perhaps that will answer your question?

Related

radio boxes are not setting attribute checked

I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>

I have to show/hide a message in a div below checkbox (in each record/row) when either one of the checkbox(pair) is checked

I have a table with 4 column and n rows. Based on records i get from back end, the no. of rows increases. In each row, last column has two checkbox with different ids. On page load these check boxes may or may not be checked from backend. I have to show/hide a message in a div below checkbox when either one of the checkbox is checked. So it has two parts.
1. This message will be shown for already checked checkbox on page load as the check box may be already checked
2. This message will be shown for newly checked checkbox on click.
I tried using document.getelementbyID in $(document).ready(function(){}); but i get a list of row where each row has pair of checkbox in last column.
I tried to make changes in onClick event but the javascript called on click is on different jsp. Also, each checkbox hits its onclick event where i am not able to check whether the second checkbox is checked or not.
To solve this issue I've created a function that first clears out any text in the .msg div so that it's refreshed each time the function is run. Then each checked input has a function run on it that grabs it's labels text content, which identifies the individual checkbox name, and append that text to the .msg div. I run this function on page load and each time a checkbox is checked. You could probably optimize this function a bit but this gets the point across.
I've modified your markup and written new jQuery to handle this issue - https://jsfiddle.net/Shuaso/xebjc8gb/1/
HTML:
<div class="checkbox-container">
<div id="one">
<input type="checkbox" id="chk1" />
<label for="chk1">Checkbox 1</label>
</div>
<div id="two">
<input type="checkbox" id="chk2" checked />
<label for="chk2">Checkbox 2</label>
</div>
<div class="msg "></div>
</div>
<div class="checkbox-container">
<div id="three">
<input type="checkbox" id="chk3" checked />
<label for="chk3">Checkbox 3</label>
</div>
<div id="four">
<input type="checkbox" id="chk4">
<label for="chk4">Checkbox 4</label>
</div>
<div class="msg"></div>
</div>
<div class="checkbox-container">
<div id="five">
<input type="checkbox" id="chk5" />
<label for="chk5">Checkbox 5</label>
</div>
<div id="six">
<input type="checkbox" id="chk6" />
<label for="chk6">Checkbox 6</label>
</div>
<div class="msg"></div>
</div>
jQuery:
function chk() {
$(".msg").empty();
$("input:checked").each(function() {
var isChecked = $(this).siblings("label").text();
$(this).parents(".checkbox-container").find(".msg").append(isChecked);
});
};
//run the chk function on page load
$(function() {
chk();
});
// run the chk function on click of any checkbox
$("input").on("click", function() {
chk();
});

div disappears when page refreshed

Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly

How to make the checkbox unchecked by default always

I have 2 checkboxes inside a form and both those checkboxes were wrapped inside a form.
For one of form I have added the attribute autocomplete="off".
Below is the code snippet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<form name="chkBoxForm" >
<div>
<input type="checkbox" value="100" name="product"/>My Checkbox1
</div>
</form>
<form name="chkBoxForm" autocomplete="off">
<div>
<input type="checkbox" value="200" name="product"/>My Checkbox2
</div>
</form>
</body>
</html>
Now my problem here if we check those checkboxes manually and if we press F5, then the checkbox with attribute autocomplete="off" got unchecked. But the checkbox which doesn't have that attribute remains checked. This happens in FireFox 22.
This behavior varies from Browser to Browser.
In IE, both the checkboxes remains checked and in Chrome both the checkboxes were unchecked.
But when I press enter in the address bar, it gets unchecked in all the browsers.
Can someone tell me how to have those checkboxes unchecked always when we press F5?
I am aware that this can be handled through Javascript.
Is there any other html way of handling this?
No, there is no way in simple HTML. Javascript might be your only solution at this time..
Loop through all inputs in javascript, check if they're indeed a checkbox and set them to unchecked:
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked = false;
}
}
wrap it up in a onload listener and you should be fine then :)
jQuery < 1.6
jQuery
$('input[type=checkbox]').removeAttr('checked');
Or
<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/>
<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/>
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/>
$('input.inputUncheck').removeAttr('checked');
jQuery >= 1.6 (pointed out by Wilfred Hughes)
jQuery
$('input[type=checkbox]').prop('checked', false);
Or
<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/>
<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/>
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/>
$('input.inputUncheck').prop('checked', false);
If you have a checkbox with an id checkbox_id, you can set its state with JS with prop('checked', false) or prop('checked', true)
$('#checkbox_id').prop('checked', false);
One quick solution that came to mind :-
<input type="checkbox" id="markitem" name="markitem" value="1" onchange="GetMarkedItems(1)">
<label for="markitem" style="position:absolute; top:1px; left:165px;">&nbsp</label>
<!-- Fire the below javascript everytime the page reloads -->
<script type=text/javascript>
document.getElementById("markitem").checked = false;
</script>
<!-- Tested on Latest FF, Chrome, Opera and IE. -->
An easy way , only HTML, no javascript, no jQuery
<input name="box1" type="hidden" value="0" />
<input name="box1" type="checkbox" value="1" />
This is browser specific behavior and is a way for making filling up forms more convenient to users (like reloading the page when an error has been encountered and not losing what they just typed). So there is no sure way to disable this across browsers short of setting the default values on page load using javascript.
Firefox though seems to disable this feature when you specify the header:
Cache-Control: no-store
See this question.
Well I guess you can use checked="false". That is the html way to leave a checkbox unchecked.
You can refer to http://www.w3schools.com/jsref/dom_obj_checkbox.asp.

Javascript onclick in radio button does not work in Chrome

I have looked at this: Radio Button change event not working in chrome or safari and it didn't give me the solution I was looking for. I have a simple form with radio buttons and an onClick="jarod();" and jarod() is a function called above. See Code:
<script type="text/javascript">
function jarod()
{
alert('yes');
}
</script>
The HTML form is:
<form id="form_601799" class="appnitro" method="post" action="/formbuilder/view.php">
<div class="form_description">
<h2>Input Information to Prepare Answer</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Number of paragraphs: </label>
<div>
<input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_2" >
<label class="description" for="element_2">Paragraph 1: </label>
<span>
<input id="element_2_1" name="element_2" class="element radio" type="radio" value="1" />
<label class="choice" for="element_2_1" >Admit</label>
<input onClick="jarod();" id="element_2_2" name="element_2" class="element radio" type="radio" value="2" />
<label class="choice" for="element_2_2">Qualified Admission</label>
<input id="element_2_3" name="element_2" class="element radio" type="radio" value="3" />
<label class="choice" for="element_2_3">Deny</label>
<input id="element_2_4" name="element_2" class="element radio" type="radio" value="4" />
<label class="choice" for="element_2_4">Qualified Denial</label>
<input id="element_2_5" name="element_2" class="element radio" type="radio" value="5" />
<label class="choice" for="element_2_5">Legal Conclusion</label>
</span>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="601799" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
As you can see there is onclick="jarod();" attempting to call the javascript function. This does nothing when the onclick="jarod();" is in the input tag section but if I move it to the label section like:
<label class="choice" for="element_2_1" onClick="jarod();">Admit</lable>
This "label" works just fine in Chrome. I'm going to use this to reveal a text area if the Qualified Admission or Qualified Denial is selected.
Thanks for any help.
PS - I also tried putting the onclick="jarod();" in the text field and it works just fine in Chrome. What is the deal with radio buttons and Chrome?
EDIT: This is frustrating. I used phpform.org to create the form to save me time. It uses this DOCTYPE at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
When I use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
It works just fine. Someone commented about it being a form of XHTML / XML and sure enough it is. At least I was able to spend the last few hours sleeping instead of sitting at the computer trying to figure out the solution!
Bad thing is now, my CSS doesn't look right. I think I'd rather have a formatting issue than a programming issue.
jarod
Is your document written as any XML-based form of HTML? Because if so, then onClick will be ignored, as names are case-sensitive. If you put your whole document up, then someone can test everything within the context of the original document, and someone can definitely give you a definitive answer (I'm going to bed pretty soon).
For now, my answer is try to change onClick to onclick in the attribute of the radio button.
Also, you need to put onclick inside of every single radio button, not just one of them. The other radio buttons are separate HTML elements, and so the onclick event from one of them does not apply to any of the others.
As you havent provided your DOCTYPE issue here might be onclick or onClick
you should check this.
onclick or onClick?
Also try
onclick="javascript:jarod();"
as of onclick for radio its working on chrome for OSX
here's a fiddle on that
http://jsfiddle.net/9efbR/
I had a similar issue with radio inputs (couldn't get onclick="" to work), and the solution has been changing onclick to onchange.

Categories

Resources