I managed to style my checkboxes in JQuery as I wanted them to look:
var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' +
'<div class="ui-controlgroup-controls">' +
'<div class="ui-checkbox">' +
'<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' +
'<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' +
'<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"> </span></span></label></div>' +
'<div class="ui-checkbox">' +
'<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' +
'<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' +
'<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label></div>' +
'</div></fieldset>';
The result is static (no action or status change when clicking the button).
How do I get them to act as a normal checkbox, changing its checked status when clicked?
Thank you!
I suppose you append your html string to the div which has the id myCheckBoxes
e.g: <div id="myCheckBoxes"></div>
try as below
$('#myCheckBoxes').html(content);
$('#myCheckBoxes').trigger("create");
jQuery Mobile is not only styling elements but also adds some event handling and class/attributes switching (similar for JUI, but you have JQM in a tag). So you either need to add this behavior on your own or insert standard elements before JQM starts parsing or insert standard elements and make JQM parse them again.
To make JQM re-render mobile page markup you need to call something like this:
$jqueryElement.trigger("create");
Where $jqueryElement is e.g.:
$jqueryElement = $('#elementId');
EDIT:
In another words you shouldn't use classes like ui-checkbox. You should add a simple input with label and a fieldset like this:
<fieldset data-role="controlgroup" data-type="vertical">
<input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>`
<input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>`
</fieldset>
Related
I'm having trouble with the display of my webpage. I used a unordered list with item inside. But after the unordered list is added by items resulted from javascript code, they appear in wrong way and don't follow the css rule of the unordered list
Plus, I'm using jquery mobile 1.4.2 css and js
this is the html code :
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" >
<li>1Data Mining</li>
<li>1Ethics</li>
<li>1HCI</li>
<li>1Mobile Dev</li>
<li>1Software Testing</li>
</ul>
</div>
And this is the javascript code that insert new item into list
function getDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var deadline = results.rows.item(i);
$('#allList').append('<li>1Software Testing</li>');
}
;}
Here's a jsfiddle with your code: http://jsfiddle.net/ruslans/dKy3B/
Edit: alternative solution (as per suggestions from many):
$("button#btn").click(function () {
$('#allList').append('<li>1Software Testing</li>');
$("#allList").listview('refresh');
});
http://jsfiddle.net/ruslans/tUJt5/
the mark-up you've pasted is not the mark-up it generates after rendering, it's actually a lot messier than that:
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" class=" ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Data Mining</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Ethics</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1HCI</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Mobile Dev</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Software Testing</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
</ul>
</div>
to add an item to this list and keep the styling, you'll have to do some thing like this as per this answer Dynamically adding <li/> to <ul/> in jquery mobile:
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
Please use Google or the stackoverflow search function next time.
The first hit for me: https://stackoverflow.com/a/5926112/994304
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
The last line (refresh) is very important for jQuery Mobile to layout the UI controls again.
I'm not sure it's needed for all jQuery controls but i'm sure for this one :).
Stefan.
Try refresh the listview
$("#all").listview('refresh');
I was wondering if it is possible to display an icon on an element that is not <a> or <button>. Say a <p> or an <h2> element for instance.
If you are looking to use the icons inline within the text of a <p /> element for example, you can try this:
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
.nonbuttonicon .ui-btn {
cursor: default;
border: 0;
margin: 0;
}
By using spans, you can insert any number of icons in any position within the paragraph.
Here is a DEMO
I think you can.
Demo JsFiddle
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>
<p class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">p</p>
<h2 class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">h2</h2>
ive been studying this link but i cant figure out how he resize the option box and i want to know how to resize option box text box buttons etc. in jquery mobile but i cant find a way to resize them i also want to know if it is possible to impelement ajax on a jquery mobile that uses internal pages?and also how can you set the distance between label and textbox?here is the code of the link
http://jsfiddle.net/HwFFU/1/
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<form method="post" action="processForm.php">
<li data-role="fieldcontain">
<label for="children" class="select">Number of Kids</label>
<select name="children" id="children" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</li>
<div id="kidsFields"></div>
</form>
</div><!-- /content -->
</div>
var html = '';
$('#children').on('change', function() {
children = $(this).val();
html = '';
for (var i = 0; i < children; i++) {
html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
}
$('#kidsFields').html(html);
$('#kidsFields').append('<input type="submit" value="Submit" />');
$('.ui-page').trigger('create');
});
I have updated your fiddle: http://jsfiddle.net/ezanker/HwFFU/20/ Here each Name/Age input field pair is on a single line with the inputs resized and the distance between label and input set.
When inserting the form elements, you can surround them with a div set to a data-role of fieldcontain (this also automatically stacks the elements on narrow screens):
for (var i = 0; i < children; i++) {
html += '<div data-role="fieldcontain"><label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" /></div>';
}
Then use CSS to set input field size and distance between label and input e.g.
#kidsFields .ui-input-text{
width: 80px;
margin: 1em;
}
And, yes you can use AJAX with jQM internal pages. Perhaps you should create a separate and more specific question about that...
I am creating an editor application which requires dynamically appending HTML into the document. I am using JQuery UI tabs to divide the document into sections. I want to be able to dynamically add tabs and then use append() to add content into the tabs.
The page has 3 tabs when it loads and I want to be able to dynamically add more when required.
Currently my code works when appending content into the 3 non-dynamic tabs, and when creating a new tab. For some reason I cannot append any content into a new, dynamically created tab.
Why won't my code work for adding content to a dynamically created tab?
$(function () {
$('#addTab').click(function () {
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '></div>');
$('#tabs').tabs("refresh");
$('#tabs').tabs("option", "active", -1); //makes the new tab active
});
});
//Insert content into the currently selected tab
function insertContent(content) {
var activeTab = $("#tabs").tabs('option', 'active');
activeTab += 1;
console.log(activeTab);
$("#tab-" + activeTab).append(content);
}
HTML after creating a 4th tab:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="false">Section 1</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false">Section 2</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false">Section 3</li>
<li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab4" aria-labelledby="ui-id-7" aria-selected="true">Section 4</li></ul>
<div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><br><p contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_83" style="position: relative;">Paragraph text</p></div>
<div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display:none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_153" style="position: relative;">Paragraph text</p></div>
<div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor3" title="Rich Text Editor, editor3" aria-describedby="cke_223" style="position: relative;">Paragraph text</p></div>
</div>
After looking at the HTML generated following are the problems I found with your code:
1) The following line generated li with wrong Id i.e. tab4 instead of tab-4
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
change <a href="#tab' to <a href="#tab-'
2) The following line was missing " in id because of which the div wasn't appended in the tabs
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Once you fix there, you'll see your code is working properly
See working fiddle
My real desire is to create a selectable tree for JQM (with 3 values for each element). I tried to do with nested collapsible divisions, and this works fine. But when I tried to add the 3 radios on each collapsible bar, the events don't fire properly.
I think the collapse/expand event hooks the click event of the radios. The effect is when you click the radios, the collapsible is expanded and the radio is not checked.
<div data-role="collapsible" data-theme="b" data-content-theme="d" id="accordion1">
<h3>60
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-asign" value="60-asign">
<label for="selcrit-CLP-60-asign">Asign</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-omit" value="60-omit">
<label for="selcrit-CLP-60-omit">Omit</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-nothing" value="60-nothing">
<label for="selcrit-CLP-60-nothing">Nothing</label>
</fieldset>
</h3>
<div stylee="margin: 0 10px;">
Content for 60
</div>
Here is the jsfiddle with the example: http://jsfiddle.net/Hz8Ef/
Any idea? Can I do in other way?
Solved!
$(document).ready(function() {
$("div .ui-radio").click(
function(e){
var radioId = $(this).children(":first").attr('name');
$('input[name=' + radioId + ']').checkboxradio( "refresh" );
e.stopPropagation();
}
);
});
Here the complete solution: http://jsfiddle.net/VuaQg/1/