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>
Related
i try to make a multiple dialog form from some data in the database but when i clicked the button, the dialog form not showed
i use PHP increment numeric to differentiate the attribute id
then i use for to sync the id on my php code with the id on jquery code
when i try on jsfiddle, it says "Functions declared between loop referencing an outer scoped variable may lead to confusing semantics"
this is my php code:
<button class="btn btn-danger" id="create-user<?php echo $no2++; ?>">Buka Blokir</button>
<div id="dialog-form<?php echo $no++; ?>" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason">Reason</label>
<input type="text" name="reason" id="reason" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
and thisis my jquery code:
$( function() {
var dialog, form,
reason = $( "#reason" ),
allFields = $( [] ).add( reason ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
function unBlock() {
var valid = true;
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( reason, "reason", 6, 80 );
if ( valid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + dasar.val() + "</td>" +
"</tr>" );
dialog.dialog( "close" );
}
return valid;
}
for (var i = 1; i < 50; i++) {
dialog = $( "#dialog-form"+i ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Unblock": unBlock,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
}
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addUser();
});
for (var b = 1; b < 50; b++) {
$( "#create-user"+b ).button().on( "click", function() {
dialog.dialog( "open" );
});
}
} );
I think you're making it overly complicated. Consider the following code.
$(function() {
var reasons = $("[id^='reason']"),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
$("[id^='dialog-form']").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Unblock": function() {
var valid = true;
reasons.removeClass("ui-state-error");;
var reason = $(this).find("[id^='reason']");
valid = valid && checkLength(reason, "reason", 6, 80);
if (valid) {
/*
$("#users tbody").append("<tr>" +
"<td>" + dasar.val() + "</td>" +
"</tr>");
*/
$("[id^='dialog-form']").dialog("close");
}
return valid;
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$(this).find("form")[0].reset();
reasons.removeClass("ui-state-error");
}
});
$("div[id^='dialog-form'] form").on("submit", function(e) {
e.preventDefault();
/*
addUser();
*/
});
$("button[id^='create-user']").on("click", function(e) {
var selfId = $(this).attr("id");
var d = selfId.match(/\d+/g).map(Number);
var dlg = $("#dialog-form-" + d);
dlg.dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="btn btn-danger" id="create-user-1">Buka Blokir</button>
<div id="dialog-form-1" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-1">Reason</label>
<input type="text" name="reason" id="reason-1" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<button class="btn btn-danger" id="create-user-20">Buka Blokir</button>
<div id="dialog-form-20" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-20">Reason</label>
<input type="text" name="reason" id="reason-2" value="John Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
With a selector that encompasses more than one element, you can still assign UI Widgets to it. You just have to understand how to use this and $(this) to your advantage.
I really need some help on the following: I am currently developing a shopping cart. Whenever a new product is appended to shopping cart it becomes a button. This button (product) is used to add some modifiers to each product. The button definition can be seen below:
var productAdded = $('<tr class="product" data-real_id = "'+ id +'" data-id_modal="'+ mod_id +'"><td class="product_name2"><button href="#0" class="button2" style="background-color:#00a65a;" data-comment="" data-modifiers="" data-span_mod = "" data-real_id = "'+ id +'" data-id_modall="'+ mod_id +'" id = "'+ comment_id +'">' + product_name + '</button></td><td class="quantity"><span class="select"><select id="cd-product-'+ id +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></td><td class="price">' + product_price + '</td><td><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></td></tr>');
Whenever each of the product's button is pressed a JQUERY UI dialog window is opened whic contains a JQUERY UI SELECTABLE object:
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" style="margin-top:5px;">
<div style="width:100%; float:left;">
<label for="modifier">Τροποποιητές: </label>
<span id="select-result" data-modifiers_span=""></span>
<ol id="selectable" class="txt-modifiers">
<!-- INSERTED BY JQUERY DYNAMICALLY PER PRODUCT -->
</ol>
</div>
<label for="comment">Σχόλιο: </label>
<textarea rows="4" cols="50" name="comment" id="comment" value="" class="form-control txt-comment" style="vertical-align: top;"></textarea>
</div>
<div class="modal-footer" style="margin-top:10px;">
<button class="btn btn-success btn-save" data-id="" data-id_modall="">Αποθήκευση</button>
<button class="btn btn-default" data-dismiss="modal">Κλείσιμο</button>
</div>
</div>
</div>
</div>
As you can see below the modifiers of the product are extracted using AJAZ+PHP from mysql database:
$(document).on('click touchstart','.button2',function(e){
e.preventDefault();
var id = $(this).attr('id'); //Get element id
var real_id = $(this).attr('data-real_id');
var comment = $(this).attr('data-comment'); //Get comment
var modifiers = $(this).attr('data-modifiers'); //Get modifiers
var teeee = $(this).attr('data-id_modall');
$('#modal .txt-comment').val(comment);
$('#modal .btn-save').attr('data-id',id);
$('#modal .btn-save').attr('data-id_modall',teeee);
//alert(modifiers);
if (modifiers.length == 0)
{
$("#selectable").html('<img src="images/ajax-loader.gif" />');
var request = $.ajax({
url: 'http://127.0.0.1:8080/Food%20Ball/backup/FoodBall%20Site%20form_dt_2/Food%20Ball%20Site/get_item_modifiers.php?item_id=' + real_id,
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get',
success: function(data) {
if( data.result != 'Not'){
$("#selectable").html(data.options);
$('#modal .txt-modifiers').val(data.options);
}
else{ $("#selectable").html('Δεν υπάρχουν!');
$('#modal .txt-modifiers').val('Δεν υπάρχουν!'); }
}
});
}
else { $('#modal .txt-modifiers').val(modifiers); $("#selectable").html(modifiers);}
$('#modal').dialog('open');
});
And the selectable object:
$(function () {
$('#selectable').on('touchstart mousedown', function(e) {e.metaKey = true;})
.selectable({
selected: function(event, ui) {
var result = $( "#select-result").empty();
$( ".ui-selected", this ).each(function() {
result.append($(this).attr('data-product_modifier') + ', ');
});
},
unselected: function(event, ui){
var result = $( "#select-result");
$( ".ui-unselected", this ).each(function() {
result.remove($(this).attr('data-product_modifier') + ', ');
});
}
});
});
And finally the "Save" button for each dialog modal window:
$(document).on('click touchstart','.btn-save',function(e){
e.preventDefault();
var id =$(this).attr('data-id'); //Get data id
var comment =$('.txt-comment').val(); //get the comment
var modifiers =$('.txt-modifiers').val(); //get the modifier
//update the "order" note column modal
var note_modal = '#' + $(this).attr('data-id_modall'); //get the id row of the order modal
var note_modal2 = '#2' + $(this).attr('data-id_modall'); //get the id row of the order modal
$(note_modal).find('#note_modal').text(comment+'--'+modifiers);
$(note_modal2).find('#note_modal2').text(comment+'--'+modifiers);
$('#'+id).attr('data-comment',comment);
$('#'+id).attr('data-modifiers',modifiers);
//Save it in data base..s
$('#modal').dialog('close');
$('.txt-comment').val('');//clear text area
$('.txt-modfiers').val('');//clear text area
});
$(document).on('click','.btn-default',function(e){
e.preventDefault();
//Save it in data base..s
$('#modal').dialog('close');
$('.txt-comment').val('');//clear text area
$('.txt-modfiers').val('');//clear text area
});
My problem is that if i add more than one products to my cart the selected modifiers appear for all products. How can i have multiple selectable objects defined dynamically and save each product's selected modifiers?
If anyone can help on this i will really appreciate it
Thank you
ok solved it:
simply put the following code within the successful return of the Ajax call:
var request = $.ajax({
url: 'http://127.0.0.1:8080/Food%20Ball/backup/FoodBall%20Site%20form_dt_2/Food%20Ball%20Site/get_item_modifiers.php?item_id=' + real_id,
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get',
success: function(data) {
if( data.result != 'Not'){
$("#selectable").html(data.options);
$('#modal .txt-modifiers').val(data.options);
$( "#selectable" ).selectable({
stop: function() {
result_mod = $( ".select_result" ).empty();
$( ".ui-selected", this ).each(function() {
result_mod.append(' +' + $(this).attr('data-product_modifier'));
//array_mod = array_mod + (' +' + $(this).attr('data-product_modifier'));
$('#modal .select_result').val(result_mod);
});
}
});
}
else{ $("#selectable").html('Δεν υπάρχουν!');
$('#modal .txt-modifiers').val('Δεν υπάρχουν!');
$( ".select_result").html('');
$('#modal .select_result').val('');
}
}
});
I would like to get tabs in a dialog box. Here's the code :
HTML :
<div id="box_form1">
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li>TOTAL <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
</ul>
<div id="tabs-1">
<table>
<thead>
<tr>
<th>title</th>
<th>2015</th>
</tr>
</thead>
<tbody>
<tr>
<td>INV</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT :
$(document).ready(function () {
$('#box_form1').dialog({
title: "test",
autoOpen: false,
height: 600,
width: 600,
modal: true,
});
$('#module_ppi').button().click(function (e) {
$('#box_form1').dialog('open');
});
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $("#tabs").tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find("form").submit(function (event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
tabCounter++;
}
// addTab button: just opens the dialog
$("#add_tab")
.button()
.click(function () {
dialog.dialog("open");
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
http://jsfiddle.net/y25zw254/1/
The problem is : when I add a tab, the content of all tabs display.
How can I fix it ?
Thanks
You can have a look at this solution
$(document).ready(function() {
$("div#tabs").tabs();
$("button#add-tab").click(function() {
var num_tabs = $("div#tabs ul li").length + 1;
$("div#tabs ul").append(
"<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
);
$("div#tabs").append(
"<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
);
$("div#tabs").tabs("refresh");
});
});
http://jsfiddle.net/axrwkr/ujUu2/
In this I am adding a tab on click of a button you can extend that inside your dialog box.
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.
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