I'm building JQM app using Font Awesome icons and all is fine if I add into HTML <i class=icon-XXX></i>. The problem appears if I create it through javascript. It never appears!
This icon is into a <ul /><li />and I've tried triggering "refresh", "create", ... but nothing happens.
Is there anyway to solve this? Thanks in advance.
Regards,
PS. I'm using bootstrap also and I load first bootstrap and then FA as says in FA webpage...
UPDATE (Easy code...)
JS
var elemHtml = "" +
"<div data-type=\"tlf\" id=\"XXX\">
<ul data-role=\"listview\" data-inset=\"true\" data-theme=\""+selectedTheme+"\">
<li data-icon=\"false\">
<i class=\"icon-phone\"></i>600123456
</li>
</ul>
</div>";
$("#screen").contents().find("#screenBody").append(elemHtml);
JSP
<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="resources/css/font-awesome.min.css" />
<div id="screen">
<div id="screenBody"></div>
</div>
I did test the below code and it works normally, using Font-Awesome (without Bootstrap.js). I also gave the listview an ID (#listviewtest).
$(document).on('pagebeforeshow', function(){
var elemHtml =
"<div data-type='tlf'>"
+ "<ul data-role='listview' data-inset='true' data-theme='' id='listviewtest'>"
+ "<li data-icon='false'><a href='tel:600123456'>"
+ "<i class='icon-phone'></i>600123456</a>"
+ "</li>"
+ "<li data-icon='false'><a href='tel:600123456'>"
+ "<i class='icon-remove-sign'></i>600123456</a>"
+ "</li>"
+ "</ul>"
+ "</div>";
$("div[data-role='content']").append(elemHtml); // append to data-role='content'
$('#listviewtest').listview();
});
Related
In 0.11.2 inputs in <accordion-heading> were possible like so:
<input type="text" value="Will open / close containing group on click" />
<input type="text" ng-click="$event.stopPropagation()" value="Will do nothing" />
In 0.12.0 a click into the second input seems to trigger navigation to the root page (.../#/path -> .../): http://plnkr.co/pyjENpDew621TLTb3Uom
Further investigation shows that the breaking change is make header links keyboard accessible
How do I correctly prevent elements to toggle the accordion in the new version?
Ugly Hack: I ran into the same issue and ended up overriding accordion-group.html template to remove the "href" attribute.
(function () {
'use strict';
function templateOverrides($templateCache) {
var accordionGroupTemplate =
'<div class=\"panel panel-default\">' +
' <div class=\"panel-heading\">' +
' <h4 class=\"panel-title\">' +
' <a class=\"accordion-toggle\" ng-click=\"toggleOpen()\" accordion-transclude=\"heading\"><span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span></a>' +
' </h4>' +
' </div>' +
' <div class=\"panel-collapse\" collapse=\"!isOpen\">' +
' <div class=\"panel-body\" ng-transclude></div>' +
' </div>' +
'</div>';
$templateCache.put('template/accordion/accordion-group.html', accordionGroupTemplate);
}
angular
.module('app')
.run(['$templateCache', templateOverrides]);
})();
I've added some selectboxes to data-role fieldcontain, but even though the append functions are correct, jquery mobile doesn't show properly the selectboxes.
JS:
var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
var day = getDay(i);
container.append("<label for='day-" + i + "' class='select'>" + day + "</label><select name='day-" + i + "' id='day-" + i + "'>");
for (var j = 0; j < eArray.length; j++)
{
container.append("<option value='" + eArray[j] + "'>" + eArray[j] + "</option>");
}
container.append("</select>");
}
HTML:
<div data-role="page" id="addprogram">
<div data-role="header" data-position="fixed">
<h1>Add Program</h1>
Back
</div><!-- /header -->
<div data-role="content" class='addprogramcontent'>
<div data-role="fieldcontain" class='addprogramlist'>
</div>
</div>
</div><!-- /page -->
I don't know if I understood your problem correctly, but this might be the answer:
try refreshing your selectmenus as follows:
$("select").selectmenu();
working example http://jsfiddle.net/PG2bV/54/
EDIT
I changed a little your code. That is how I usually do to build a select.
Here's my fiddle - http://jsfiddle.net/TTBzk/
I want to click the add tab button and have it automatically add a tab with prechosen content without a dialog window as seen on JQuery UI's manipulation example here - http://jqueryui.com/tabs/#manipulation
I don't know what I'm doing wrong. Any help would be greatly appreciated.
JQuery
$(function() {
var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
var tabs = $("#tabs").tabs();
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
function addTab() {
var label = tabTitle.val() || "" + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
tabs.tabs("refresh");
tabCounter++;
}
$("#add_tab").click(function() {
addTab();
});
});
HTML
<div id="tabs">
<ul>
<li>Home <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
<li style="float:right;"><a id="add_tab">+</a></li>
</ul>
<div id="tabs-1">
<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>
</div>
</div>
CSS
#tabs li .ui-icon-close {
float:left;
margin:0.4em 0.2em 0 0;
cursor:pointer;}
#add_tab {
cursor:pointer;}
div#tabs {
position:absolute;
top:0px;
left:50%;
width:98%;
height:98%;
margin-left:-49.5%;}
div#tabs div {
display:inline-block;
padding:0px;
width:100%;
height:90%;}
In your addTab function you use this line:
var label = tabTitle.val() || "" + tabCounter;
but you never declare a variable with the name tabTitle
Updated jsfiddle
Changes:
<li>
Home
...
var tabTitle = $('#tab_title');
Gave it an ID for testing purpose.
Declared variable.
Tabs get now added dynamically. You should of course change the tab headings name. For the <a href> value use .text() and e.g. add tabCounter to it so it becomes Home2 etc.
I've used the solution here http://jsfiddle.net/KADqA/23/ to add an image to a jquery mobile checkbox, and it works fine, but now the label text is out of alignment with the checkbox images (too high) and I can't figure out how to center it with css.
Here's a portion of the code to generate the html
<input type=checkbox id=chk" + ingindex + " class='chk chk" + ingindex + "' name=chk" + ingindex + "><label for=chk" + ingindex + ">" + item + "<a href='#' data-rel='dialog' ><img class=recimg src='http://webrecipemanager.com/images/recipe/" + image + "' alt='" + name + "'></a></label>
This is the generated html from firebug
<div id="div0" class="drag inaisle ui-draggable" name="div0">draggable=Object {
element={...}, options={...}, started=
false
, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}
<div class="ui-checkbox">
<input id="chk0" class="chk chk0" type="checkbox" name="chk0">checkboxradio=Object { element={...}, options={...}, label={...}, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmousedown=
true
, vclick=
true
}
<label class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-btn-up-i" for="chk0" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="i">corners=
true
shadow=
false
iconshadow=
true
wrapperEls=
"span"
icon=
"checkbox-off"
theme=
"i"
buttonElements=Object { bcls=
"ui-btn ui-btn-up-i ui-b...er-all ui-btn-icon-left"
, outer=label.ui-btn, inner=span.ui-btn-inner, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmouseover=
true
, vclick=
true
}
</div>
<input id="item0" type="hidden" value="1/2 c Baking Cocoa" name="item0">
<input id="ing0" type="hidden" value="Baking Cocoa" name="ing0">
</div>
you can use Firebug or another developer tool to examine the CSS to manipulate...
see the docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.
In your case add the following
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
see modified jsfiddle and the complete code of the working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" ><img src="http://dummyimages.com/25x25" /></a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
<script>
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
</script>
</body>
</html>
screenshot:
I'm using JQuery Mobile 1.2.0 version.
I want to put some html code in this context:
<div id="div-primeros" data-role="collapsible" data-theme="a" data-content-theme="c" data-collapsed="false">
<h2>Primeros</h2>
[I WANT TO ADD CODE DYNAMICALLY HERE]
</div>
And the code I want to add is:
<div class="ui-grid-a">
<div class="ui-block-a" style="width:93%">
<ul data-role="listview" style="width:100%">
<li id="4" data-icon="false">
<a href="index.html">
<img src="some.jpg"></img>
<h3>some text</h3>
<span class="ui-li-count">some text</span>
</a>
</li>
</ul>
</div>
<div class="ui-grid-b" style="width:7%">
<input cant="1" type="number" value="0" min="0" max="8" style="width:100%">
</div>
</div>
So I tried doing this using this code ("primero" is a JSON variable):
$("#div-primeros").append(
"<div id=\"" + i + "\" data-role=\"listview\" class=\"ui-grid-a\">" +
"<div class=\"ui-block-a\" style=\"width:95%\">" +
"<ul style=\"width:100%\">" +
"<li id=\"" + primero.id + "\" data-icon=\"false\">" +
"<a href=\"menu_detalle.html\">" +
"<img src=\"" + primero.thumb + "\"></img>" +
"<h3>" + primero.nombre + "</h3>" +
"<p>" + primero.descripcion + "</p>" +
"<span class=\"ui-li-count\">" + primero.precio + "</span>" +
"</a>" +
"</li>" +
"</ul>" +
"</div>" +
"<div class=\"ui-grid-b\" style=\"width:5%\">" +
"<input cant=\"" + primero.id + "\" type=\"number\" value=\"0\" min=\"0\" max=\"8\" style=\"width:100%\">" +
"</div>" +
"</div>");
The result is that the content not formatted correctly, and this content is out of collapsible "div-primeros".
What am I doing wrong??? I've tried with:
$("div-primeros").trigger("create");
and
$("div-primeros").page();
with no successful results.
Anyone knows how can I refresh all the code?
Thank you so much!!!
Bye
Don't break it up in multiple lines, use single quotes in place of the double quotes surrounding the html you want to append. Like so:
$('#div-primeros').append('<div class="ui-grid-a"><div class="ui-block-a" style="width:93%"><ul data-role="listview" style="width:100%"><li id="4" data-icon="false"><img src="some.jpg"></img><h3>some text</h3><span class="ui-li-count">some text</span></li></ul></div><div class="ui-grid-b" style="width:7%"><input cant="1" type="number" value="0" min="0" max="8" style="width:100%"></div></div>');
Here's a fiddle. http://jsfiddle.net/wU6pr/