When I create a popup dynamically, with a listview on it, I got extra (static) items in the listview. Here is the code on jsBin which shows the problem.
why is that two extra li in the list?
just to have the code here too:
$_coursemenu = function( params ) {
if ( window === this )
return new $_coursemenu( params );
var self = this;
this.params = params;
this.init();
};
$_coursemenu.prototype = {
init: function() {
this.page = $('<div id="' + this.params.id + '" data-theme="a" data-role="popup" data-history="false" data-position-to="window"></div>').appendTo( this.params.parent );
this.ul = $('<ul data-role="listview" data-inset="true" data-theme="b" data-autodividers="false"></ul>').appendTo( this.page );
this.lid = $('<li data-role="divider" data-theme="a">Popup API</li>').appendTo( this.ul );
this.li1 = $('<li><a>delete</a><li>').appendTo( this.ul );
this.li2 = $('<li><a>aha</a><li>').appendTo( this.ul );
this.page.popup();
this.params.parent.page('destroy').page();
},
relocate: function(parent) {
parent.append( $('#' + this.params.id + '-popup') );
parent.append( $('#' + this.params.id + '-screen') );
}
};
html:
<!DOCTYPE html>
<html>
<head>
<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> </head>
<body>
<div id='page' data-role='page'>
<div data-role='content'>
<a href='#mypopup' data-role='button' data-rel='popup'>popup</a>
</div>
</div>
<script>
$(document).ready( function(){
var cm = $_coursemenu({parent:$('#page'),id:'mypopup'})
console.log('done.');
});
</script>
</body>
</html>
Your problem is that you aren't closing your li tags,
$_coursemenu.prototype = {
init: function() {
this.page = $('<div id="' + this.params.id + '" data-theme="a" data-role="popup" data-history="false" data-position-to="window"></div>').appendTo( this.params.parent );
this.ul = $('<ul data-role="listview" data-inset="true" data-theme="b" data-autodividers="false"></ul>').appendTo( this.page );
this.lid = $('<li data-role="divider" data-theme="a">Popup API</li>').appendTo( this.ul );
this.li1 = $('<li><a>delete</a></li>').appendTo( this.ul );
this.li2 = $('<li><a>aha</a></li>').appendTo( this.ul );
this.page.popup();
this.params.parent.page('destroy').page();
},
And here's an update to your jsbin
Related
I have a navigation iFrame on the left side and I want to fire the $("#accordion").accordion("refresh"); event on asp:TreeNode (ClientExpand), so that the height of the nested asp:TreeView will determine the height of the surrounded DIV of the Accordion Tab of the JQuery UI Accordion.
Is there a way to react on the expanded asp:TreeView with a client-sided javascript $("#accordion").accordion("refresh");?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="js/displayToc.js"></script>
<style type="text/css">
.treeNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.rootNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.leafNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
var zuletztSelektiert = '';
$(function () {
var treeView1 = $('#<%= TreeView1.ClientID %>');
var treeNodes = treeView1.find('div[id$=Nodes]');
var treeImages = treeView1.find('img').not('img[alt=\'\']');
$("#searchField").keydown(function (e) {
if (e.keyCode == 13) {
$("#btnSearch").click();
e.preventDefault();
}
});
$("#btnSearch").click(function (event) {
var meineLinkTexte = '';
var parentEls = '';
treeNodes.css({ 'display': 'none' });
treeImages.attr('src', 'images/plus.gif')
$("a").each(function () {
//Do your work
var selectedElement = $(this).attr('id');
$("#" + selectedElement).css({ 'background-color': '#FFFFFF' });
if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) > -1) {
$("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' });
$("#" + selectedElement).css({ 'background-color': '#DEDEDE' });
meineLinkTexte += $(this).attr('id') + '';
}
})
event.preventDefault();
});
$("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1));
//return;
var isChecked = $(this).is(":checked");
if (isChecked) {
//zuletztSelektiert = zuletztSelektiert + $(this).next().text();
zuletztSelektiert = zuletztSelektiert + selectedStereoType;
}
else {
//zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), '');
zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, '');
}
if (zuletztSelektiert != '') {
// Welcher Stereotyp ist selektiert?
//var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»'));
var stereotype = selectedStereoType;
var letzteMeldung = '';
$("[id*=TreeView1] input[type=checkbox]").each(function () {
//var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»'));
var currentStereotype = $.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) );
if (currentStereotype != stereotype) {
var isChecked2 = $(this).is(":checked");
if (isChecked2) {
$(this).removeAttr("checked");
zuletztSelektiert = zuletztSelektiert.replace($.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) ), '');
letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert;
}
}
});
if (letzteMeldung != '') alert(letzteMeldung);
}
});
$("#accordion").accordion({
collapsible: true,
heightStyle: "fill"
});
})
function deselectAll() {
$("[id*=TreeView1] input[type=checkbox]").removeAttr("checked");
}
</script>
</head>
<body onload="tocInit();">
<form id="form1" runat="server">
<div>
<div id="accordion">
<h3>Navigation Tree</h3>
<div>
<asp:TextBox ID="searchField" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<asp:TreeView ID="TreeView1"
NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode"
runat="server">
</asp:TreeView>
</div>
<h3>Views</h3>
<div>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /> <br />
<asp:Label ID="Label1" runat="server"></asp:Label><br/>
</p>
</div>
</div>
</div>
</form>
</body>
</html>
It looks like i got the behaviour i was looking for with
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
Why does my html page with two 'Mobile' pages inside have to be refreshed or have the little edges moved to show my map in this? See my fiddle or the code below:
I have a mobile page document (html) that has two jQuery Mobile pages.
1. The landing page where you are asked to have your position known.
2. The OpenLayers3 map page which takes your position and centers the map on it when opened.
My trouble is: the map will build and it will center on the position but does not render until after I resize refresh the 'map' edges or the browser window. I suspect it has something to do with page events but am not sure.
Is there a property that I am missing?
Andy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MobilePg</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css"/>
<script type="text/javascript" src=" http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<style>
#myFooterPosit {
color: gray;
}
</style>
<script>
var x, y;
$(document).ready(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
</script>
</head>
<body>
<script>
$(document).on("pagebeforeshow", "#mapPage", function () {
makeMap();
})
</script>
<!-- Landing page Point of Entry-->
<div data-role="page" id="homePage">
<div data-role="header">
Map
<h1>Mbl Map Input</h1>
Search
</div>
<div data-role="main" class="ui-content">
<p>My Content..</p>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></span></h1>
</div>
</div>
<!-- Map Page -->
<script>
function makeMap() {
try {
alert(x + " : " + y);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
</script>
<div data-role="page" id="mapPage">
<div data-role="header">
Home
<h1>Map</h1>
</div>
<div data-role="main" class="ui-content">
<div id="map" class="map" style="height:200px;"></div>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></h1>
</div>
</div>
</body>
</html
>
You can use the pagecontainer widget's show event:
http://api.jquerymobile.com/pagecontainer/#event-show
Updated FIDDLE
var x, y;
$(document).on("pagecreate","#homePage", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
$(document).on( "pagecontainershow", function( event, ui ) {
if (ui.toPage.prop("id") == "mapPage"){
makeMap();
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
function makeMap() {
try {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
I'm facing the problem that i need to display the loader when the data loading from the loop.I'm using a large number of data in loop so it would be great if am show loader when occuring the loop cases.Tired the pagebeforeshow and pageshow methods.But it does not work for me.Here is my code.Kindly help me to do this.
var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;
$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {
$('#add_group-notification').empty();
$('#ul_group_list').empty();
loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
});
$( "#pg_sms-group" ).on( "pageshow", function( event ) {
$.mobile.loading( 'show', {
text: "loading...",
textonly: false,
textVisible: true,
theme: 'a',
html: ""
});
});
function loadSMSGroup(limit, page){
var xmlRequest = getXmlSMSgroupRequest();
var wsdlURL = getWSDL('callServer');
lazy_load_group_flag = true;
$.ajax({
url: wsdlURL,
type: "POST",
dataType: "text",
data: xmlRequest,
contentType: "text/xml; charset=\"utf-8\"",
success: function(xmlResponse) {
var obj_response = parseResponse(xmlResponse);
if (obj_response.flag){
loadGroupList(obj_response.data);
}
}
},
error: function(xmlResponse) {
//error
}
});
lazy_load_group_flag = false;
return false;
}
function loadGroupList(jsnObj){
var obj_group_list = jsnObj.groups;
sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));
$.each(obj_group_list, function(ctr, obj) {
$('#ul_group_list').append('<li>' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input name="chk_group" id="chk_group" type="checkbox" value="'+obj.groupname+'{group-'+obj.groupid+'}'+'" />' +
'<label class="lbl_add-container">' +
'<h3>'+obj.groupname+'</h3>' +'</div>' +
'</label>' +
'</label>' +
'</a>' +
'<a href="#pg_add-group" onclick="sessionStorage.group_id='+obj.groupid+'"</a>'+
'</li>');
});
$("input[name=chk_group]").checkboxradio();
$('#ul_group_list').listview('refresh');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Due to the single-threadedness of JavaScript, you cannot perform monolithic CPU intensive tasks in that way. You can use:
Web Workers (see examples here and here)
a setTimeout trick (JSFiddle)
In both cases, when the "completed" event fires, you have to call $.mobile.loading("hide");.
Regarding your code example, see my modified version (untested):
<script>
var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;
var obj_group_list = [];
var counter = 0;
$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {
$('#add_group-notification').empty();
$('#ul_group_list').empty();
loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
});
function loadSMSGroup(limit, page){
var xmlRequest = getXmlSMSgroupRequest();
var wsdlURL = getWSDL('callServer');
lazy_load_group_flag = true;
$.ajax({
url: wsdlURL,
type: "POST",
dataType: "text",
data: xmlRequest,
contentType: "text/xml; charset=\"utf-8\"",
success: function(xmlResponse) {
var obj_response = parseResponse(xmlResponse);
if (obj_response.flag){
counter = 0;
obj_group_list = obj_response.data.groups;
sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));
pump();
}
}
},
error: function(xmlResponse) {
//error
}
});
lazy_load_group_flag = false;
return false;
}
function worker(loops)
{
for (var l = 0; l < loops; l++)
{
if (counter >= obj_group_list.length)
break;
$('#ul_group_list').append('<li>' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input name="chk_group" id="chk_group" type="checkbox" value="'+obj_group_list[counter].groupname+'{group-'+obj_group_list[counter].groupid+'}'+'" />' +
'<label class="lbl_add-container">' +
'<h3>'+obj_group_list[counter].groupname+'</h3>' +'</div>' +
'</label>' +
'</label>' +
'</a>' +
'<a href="#pg_add-group" onclick="sessionStorage.group_id='+obj_group_list[counter].groupid+'"</a>'+
'</li>');
counter++;
}
}
function pump()
{
worker(100);
if (counter < obj_group_list.length)
setTimeout(pump, 50);
else
{
$("input[name=chk_group]").checkboxradio();
$('#ul_group_list').listview('refresh');
$.mobile.loading("hide");
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
I'm working in jquerymobile v1.3.2,Phonegap 2.9.0
i am getting photos from ajax webservice which is working fine. Now want to implement lightbox I get photos from ajax and concatenate in div. Here is my code. I have used this photo lightbox from jquerymobile demo help.
//var contenttype;
//var cookies;
//var aGallery;
var ItemsCount=photolink_arr.length;
var divGallery = document.getElementById("Gallery");
for (var i=0; i < ItemsCount; i++)
{
$.ajax({
type: 'get',
async: false,
url: photolink_arr[i],
dataType: "json",
contentType: contenttype,
headers: {Cookie: cookies},
success: function (data){
var photo= data.image_link;
var thumbphoto= data.thumbnail_link;
aGallery += ' <img class="popphoto" src="' + thumbphoto + '" alt="Photos" style="width:30%">';
aGallery += ' <div data-role="popup" id="popupPhoto' + i + '" data-overlay-theme="a" data-theme="d" data-corners="false">';
aGallery += ' Close<img class="popphoto" src="' + photo + '" style="max-height:512px;" alt="Paris, France"> </div>';
divGallery.innerHTML = aGallery;
},
complete: function() {
console.log ('LoadphotosView function complete');
},
error: function (request,data)
{
alert("load albums error request=" + JSON.stringify( request));
}
}) ;
}
html
<div id="ViewPhotopage" data-role="page" class="RedScreen">
<script type="application/javascript" src="js/AlbumCategory.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
console.log('Photo view device ready started');
tabBar.hide();
});
$(document).ready(function(){
console.log('albums category document ready');
LoadAlbums();
});
$( document ).on( "pageinit", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
</script>
<div id="Header" data-role="header">
<a data-rel="back" data-role="button" data-inline="true" data-theme="b">Back</a>
<h1>Photo View</h1>
<a rel="external" data-role="button" href="PhotoAdd.html" data-inline="true" data-theme="b">Add</a>
</div>
<div id="Gallery" data-role="content" class="gallery">
<div style='font-size:14pt;color:#fff;'>Loading..</div>
</div>
</div>
the images and popups both are shown hyper link is also not working. i only want to show thumbnail and on click large image should be shown in lightbox. i think i have to refresh div just as listview in jquerymobile.I have worked with photoswipe and the problem is same.Do you suggest anything or give Any alternative.
I can't seem to make the "reverse" slide effect while handling the "swiperight" event. So, the code below works fine but I would like when I make the "swiperight" that the next page would slide in from the left side and not right hand side. I did search the documentation and added the reverse: true as as it recomends in to the "swiperight":
$.mobile.changePage("#page"+nextPage, {transition : "slide", reverse:true});
but this does not provide the wanted effect. Can you point out where am I doing it wrong?
I have the following code on jsFiddle:
html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
jQuery:
(function($) {
var methods = {
init : function(options) {
var settings = {
callback: function() {}
};
if ( options ) {
$.extend( settings, options );
}
$(":jqmData(role='page')").each(function() {
$(this).bind("swiperight", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
if (nextPage === 0)
nextPage = 3;
$.mobile.changePage("#page"+nextPage, "slide");
});
$(this).bind("swipeleft", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
if (nextPage === 4)
nextPage = 1;
$.mobile.changePage("#page"+nextPage, "slide");
});
})
}
}
$.fn.initApp = function(method) {
if ( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( 'Method ' + method + ' does not exist' );
}
}
})(jQuery);
$(document).ready(function(){
$().initApp();
});
OK first off you're using a Alpha version of jQM and the docs you are referring to a for jQM 1.1.1. I've updated your jsfiddle to use the latest jQM 1.2
http://jsfiddle.net/GYAB7/2/
And I've added the correct syntax for the reverse swipe transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: false
});
});
and the reverse transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: true
});
});