So I'm trying to load dynamic content straight into my checkbox container (group_checkboxes)
<div id='group_checkboxes' data-role="fieldcontain">
</div>
This is the statement I'm running to populate the container:
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');
The checkboxes are all populated but the jQuery style is not applied.
According to the docs all I need to do is call this function to update the checkbox style...
$("input[type='checkbox']").checkboxradio("refresh");
That doesn't work though... Any idea what I'm doing wrong?
When appending checkboxes or radio buttons to a controlgroup dynamically, you deal with two jQuery Mobile widgets, .checkboxradio() and .controlgroup().
Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.
The way to achieve this is different in latest stable versions and RC version, but the methods are the same.
jQuery Mobile 1.2.x - 1.3.x (stable versions)
After appending checkbox / radio button to either a static or dynamic controlgroup, .checkboxradio() should be called first to enhance checkbox / radio button markup and then .controlgroup("refresh") to re-style controlgroup div.
$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");
Demo
jQuery Mobile 1.4.x
The only difference here is elements should be appended to .controlgroup("container")
$("#foo").controlgroup("container").append(elements);
and then enhance both controlgroup and all elements within it, using .enhanceWithin().
$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");
Demo
First try their own static demo code:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
They are using just one fieldset as I mentioned in comments.
If this works, then adjust your script to generate the same markup dynamically and then refresh them
$("input[type='checkbox']").checkboxradio("refresh");
If this will work with their code, you will know that you have error in markup. If not, there is an error with that refresh function. (I know it's not final solution but you have to do a bit of debugging sometimes :)
Edit:
Found similar problems, solved by using Page()
JQM FAQ
SO Question
try with $("#<id of fieldset controlgroup>").trigger("create");
http://jsfiddle.net/YKvR3/36/
try
$('input:checkbox').checkboxradio('refresh');
<!DOCTYPE HTML>
<html>
<head>
<title>checkbox</title>
<link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
var myArray = [];
$(document).ready(function() {
// put all your jQuery goodness in here.
myArray[myArray.length] = 'Item - 0';
checkboxRefresh();
});
function checkboxRefresh(){
var newhtml = "<fieldset data-role=\"controlgroup\">";
newhtml +="<legend>Select items:</legend>" ;
for(var i = 0 ; i < myArray.length; i++){
newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
}
newhtml +="</fieldset>";
$("#checkboxItems").html(newhtml).page();
//$('input').checkboxradio('disable');
//$('input').checkboxradio('enable');
//$('input').checkboxradio('refresh');
//$('input:checkbox').checkboxradio('refresh');
$("input[type='checkbox']").checkboxradio("refresh");
$('#my-home').page();
}
$('#bAdd').live('click', function () {
myArray[myArray.length] = 'Item - ' + myArray.length;
checkboxRefresh();
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="my-home">
<div id="my-homeheader">
<h1 id="my-logo">checkbox</h1>
</div>
<div data-role="content">
<div id="checkboxItems" data-role="fieldcontain"></div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
</div>
</fieldset>
</div>
</div>
</body>
</html>
It works just ones for me. Any idea why?
The Answer for me is:
$("input[type='checkbox']").checkboxradio();
What work out for me was to remove the whole fieldset then replace place a new fieldset with the new item I wanted to add then I called the .trigger('pagecreate'); method on the whole page. This is not the most efficient solution but that is the only one that worked in my case.
Related
I have a webpage with the page div set to data-theme D
<div data-role="page" data-theme="d">
I also have several inputs on the page with the data-theme set to A
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
Is there an easier way to set all the input's data-theme's to A without having to set each input individually?
1- Solution 1:
Wrap them in data-role="content", but this will change the background color of the div.
<div data-role="content" data-theme="a">
<input type="text" />
</div>
Demo
2- Solution 2:
Globally, set theme to all input on mobileinit event.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.textinput.prototype.options.theme = "a";
});
</script>
<script src="jquery.mobile.js"></script>
</head>
Demo
3- Solution 3:
Set input theme on pagebeforecreate.
$(document).on("pagebeforecreate", function () {
$("input").textinput({
"theme": "a"
});
});
Demo
I am trying to figure out a way to have jqueryui datepicker inside handlebars template. So far I have the following that doesn't seem to work:
> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
> <script>
> $(function () {
> $(".datePicker").datepicker();
> }); </script>
<script id="template-row" type="text/x-handlebars-template">
<div class="returnRow{{#if altRow}} returnRow-alt{{/if}} clearfix">
<input type="hidden" class="return-id" value="{{ID}}" />
<input type='hidden' class='return-last-updated' value='{{LastUpdated}}' />
<div class="pull-left returnRow-date">
<input type="text" class="datePicker" />
</div>
<div class="pull-left returnRow-return">
<input type="text" style="width: 90%" class="return-value" onchange='SaveSingleRow(this)' value="{{textValue}}" />
</div>
<div class="pull-left returnRow-message">
<span class="row-message"></span>
</div>
</div>
</script>
I think you have two options:
Bind the datepicker after adding the filled-in template to the DOM.
Bind the datepicker to a jQuery-wrapped version of the filled-in template and then add that jQuery object to the DOM.
The first option looks like this:
var t = Handlebars.compile($('#template-row').html());
$(something_already_in_the_dom).append(t(data));
$('.datePicker').datepicker();
Demo: http://jsfiddle.net/ambiguous/w2wyU/7/
The second option looks like this:
var t = Handlebars.compile($('#template-row').html());
var $html = $(t(data));
$html.find('.datePicker').datepicker();
$(something_already_in_the_dom).append($html);
Demo: http://jsfiddle.net/ambiguous/PMP8R/
Note that both options take place outside the template. The underlying problem is that .datepicker needs to be called on a jQuery object but everything is only text inside the template, you can't have a jQuery wrapped version of that text until after the template has been processed and filled in.
When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works
please go to this link 'here' on jsfiddle and click on "load mobile view"
javascript code
$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");
$("#load_mobileview").click(function(){
var content = ' <form class="fbm_contactform">\
<div>Contact Us</div>\
<div data-role="fieldcontain"><label for="name" >Name</label>\
<input name="name" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label for="email">Email</label>\
<input name="email" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label >Message</label>\
<input name="message" type="text" class="m-field" /></div>\
<input name="submitButton" type="submit" class="m-field" value="Send Message" /></div>\
</form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");
});
html code
<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>
iFrame contents should not be "easily" accessible, so to me this is correct behavior.
If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.
So if you have an iframe, include JQM inside the iFrame and everything should be allright.
I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.
in iFrame
<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>
parent
window.frames[0].trigerCreate();
I've a <fieldset> of checkboxes with custom labels that contains both item names and descriptions, as you can see here:
Demo: http://jsfiddle.net/Zw823/
On the third checkbox I need to have a custom <input type="number" /> below description, which will be editable only if its checkbox is checked. Is it possible? I tried to put a <div data-role="fieldcontain"> with label+input below the <p>, but the <input/> number didn't display as expected... How can I achieve that goal? Thank you in advance!
This is how I managed to do what you want. The trick is to load the jquery scripts at the bottom of the page, so you don't have to call trigger('create') and break your code.
<fieldset data-role="controlgroup" >
<label for="check-1" >
<a class="ui-li-heading" href="">Service 1</a>
<p class="ui-li-desc">Lorem ipsum text</p>
</label>
<input type="checkbox" id="check-1" data-iconpos="left">
</fieldset>
<!-- rest of your data-role="page" -->
</div> <!-- end of page -->
<script src="jquery.min.js"></script>
<script src="jquery-mobile.min.js"></script>
</body>
</html>
I have use a jquery mobile form on php using Dreamweaver cs5.5.. a form is use in order to include the post function.. my server is mysql in zymichost.com.. it happen that everytime i run the form.. null value is send to my database.. even when value is inserted into the textfield and press submit.. still null value is send to the database.. may i know wat the problem is? your cooperation is appreciated... i have jz updated the code with remove the space between $_POST and ['name'] and change the $_POST ['password'] to $_POST['pass']..
it happen to be the same result as before..
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Cloud</title>
<?php
$un = $_POST['name'];
$em = $_POST['email'];
$pw = $_POST['pass'];
//$un = 'abc';
//$pw = 'abc';
$mysql_hostname = "localhost";
$mysql_database = "mycloud_zymichost_register";
$mysql_user = "user";
$mysql_password = "pass";
$conn = mysql_connect($mysql_hostname,$mysql_user,$mysql_password);
mysql_select_db($mysql_database, $conn );
if (isset($_POST['submit'])){
//$query = "SELECT * FROM Login WHERE username = '$un' AND password = '$pw'";
$query = "INSERT INTO Register (name,email,pass) VALUES ('$un','$em','$pw')";
$result = mysql_query($query) or die("Unable to verify user because : " . mysql_error());
// if(mysql_num_rows($result) > 0)
//echo 1;
//else
//echo 0;
echo print_r($_POST, true);
}
?>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">Register
<form action="index.php" method="post" name="form">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" value="" />
</div>
Submit
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
I have use a jquery mobile form on php using Dreamweaver cs5.5.. a form is use in order to include the post function.. my server is mysql in zymichost.com.. it happen that everytime i run the form.. null value is send to my database.. even when value is inserted into the textfield and press submit.. still null value is send to the database.. may i know wat the problem is? your cooperation is appreciated... i have jz updated the code with remove the space between $_POST and ['name'] and change the $_POST ['password'] to $_POST['pass']..
it happen to be the same result as before..
I think you will get null value because you have used <a> tag for submit button, it will not submit the page but it will redirect you on page specified.
Instead of it(<a>) try to use button code:
<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
also view this link:
http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/forms-sample.html
It will gives you example of ajax form submit and non-ajax form submit
One other thing I want to suggest you that, use latest stable version of jquerymobile and its supported jquery.js file
Hope this will help you
Here's the issue:
$pw = $_POST ['password'];
...and...
<input type="password" name="pass" id="pass" value="" />
Note that the name of your input is pass, but you're using $_POST['password']
Remove the value="" field from the password input, and also, change the name="password" to name="pass"
The password field should look like this:
<input type="password" name="pass" id="pass" />