When I try To get Dynamic Content from Websql jQ Mobile Collapsibles stops working but when i enter some input in search bar it start working agin..so plz help me wid this problem ,,,,, just copy and pest the code and help me...
THANK YOU IN ADVANCE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
var myFilter = document.querySelector("#myFilter");
for (i = 0; i < len; i++){
var row = results.rows.item(i);
myFilter.innerHTML += '<div data-role="collapsible" data-filtertext="Cities"><h3>Cities</h3><ul data-role="listview" data-inset="false"><li>Copenhagen</li><li>Mexico City</li><li>Oslo</li><li>Paris</li></ul></div>';
}
}, null);
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Filter Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<input data-type="search" id="filterCollapsibles">
</form>
<div data-role="collapsibleset" data-filter="true" data-inset="true" id="myFilter" data-input="#filterCollapsibles">
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
Try refreshing the widgets after dynamic modifications, like this:
$("#myFilter").collapsibleset("refresh");
I hope this helps!
Related
I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.
I'm just starting out in jQM development and have hit a bit of a brick wall.
In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.
In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).
I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events!?
The closest post I could find on SO was Pagebeforeshow not fired on second time change Page event however it doesn't particularly deal with listviews so I'm not sure if it's related or not.
Thanks,
Matt
Index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
</ul>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
details.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<b>Page placeholder</b>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
jquery.custom.js (JS Library)
$(document).on("pagebeforechange", function (event, data) {
alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var max = 200;
var limit = 0;
var itemslist = [
{"id":1, "desc":"item1"},
{"id":2, "desc":"item2"},
{"id":3, "desc":"testitm1"},
{"id":4, "desc":"testitm2"}
];
$.each(itemslist, function (i, val) {
if (limit < max) {
if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
$ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');
$('#' + val.id).off();
$('#' + val.id).on('tap', function (event) {
var elementId = $(this).attr('id');
$.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
});
limit++;
}
}
});
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
});
});
You are incorrectly binding page event.
Instead of this:
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
Use this:
$(document).on("pagebeforeshow", "#detailsPage",function(event){
alert('about to show page...');
});
Remember, jQuery Mobile page events must always be added with event delegation.
Also your don't need to use off() with page events, they do not suffer from multiple event binding problem. If you have more question feel free to ask in comments.
I have an index page that dynamically loads a json object. if I go to a second page and then I try to go back to the index using back button I'd like to reload index page, so it reloads the json object that could be changed. This is my index.html page code:
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>
<body>
<div data-role="page" id="pagina">
<div data-role="header" data-position="fixed" data-theme="d">
<h1 style="font-size:14px">test</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<ul data-role="listview" id="ul_id" data-theme="b" data-inset="true">
</ul>
</div><!-- /content -->
</div>
</body>
</html>
<script>
$.getJSON('http://www.test.com/test.php', function(data) {
var items = [];
$.each(data, function(key, val) {
$('#ul_id').append($('<li><h3>' + key + '</h3></li>'));
});
$('#ul_id').listview('refresh');
});
</script>
How can I do it?
You can utilize pagebeforeshow or pageshow event like so:
$(document).on("pagebeforeshow", "#pagina", function() {
//put your code here to manipulate the content
});
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>
I init my accordion in the following way:
$(function() {
$("#gallery_accordion").accordion({ event: false });
$("#gallery_accordion").click(function(e) {
var contentDiv = $(this).next("div");
contentDiv.load($(this).find("a").attr("href"));
});
});
The content is loaded onclick but the accordion is invisible.
Nothing is shown. Any help highly appreciated.
Thanks.
Update: The height stays at '0'. Any reason for that?
Here is the markup:
<div id="gallery_accordion">
<h3>My first gallery</h3>
<div id="gallery369">
</div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
Try changing your initial call to:
$("#gallery_accordion").accordion({ header: "h3", event : false });
And your HTML to:
<div id="gallery_accordion">
<div>
<h3>My first gallery</h3>
<div id="gallery369">
</div>
</div>
<div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
</div>
Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.
Hope this helps.
Here is a sample doc that loads the accordion:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#gallery_accordion").accordion({ header: "h3"});
$("#gallery_accordion a").click(function(evt) {
var galleryId = $(this).attr('href').split('#')[1];
var contentDiv = $('#' + 'gallery' + galleryId);
if(contentDiv.html() == " ") {
var galleryContent = getGallery(galleryId);
contentDiv.html(galleryContent);
}
});
var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
var contentDivI = $('#' + 'gallery' + galleryId);
var galleryContentI = getGallery(galleryId);
contentDivI.html(galleryContentI);
});
</script>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="gallery_accordion">
<div>
<h3>Gallery 1</h3>
<div id="gallery369"> </div>
</div>
<div>
<h3>Gallery 2</h3>
<div id="gallery381"> </div>
</div>
<div>
<h3>Gallery 3</h3>
<div id="gallery392"> </div>
</div>
</div>
</body>
</html>