JqueryMobile navigation Title problem - jquery-mobile

here is the html file which calls the above method. When call "callAjax" is clicked, i can get the listview displayed. These listview when clicked will not show navigation bar title.
<body>
<div data-role="page" >
<div data-role="header" data-theme="b" >
<h1>NDUS Directory</h1>
</div><!-- /header -->
<div data-role="content" >
<div id ="divsearch" class ="LogoImage" >
<img src="Images/logo.gif" align="middle" />
</div>
<p></p>
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" value="" />
<label for="lname">Last Name: </label>
<input type="text" name="lname" id="lname" value="" />
<p></p>
<input id="callAjax" type="button" value="Search" data-theme="b" />
<!-- TO SHOW PEOCESSING LAG INFORMATION -->
<span id="sp" class = "spanRed"></span>
<div id="resultLog">
</div>
<div id="ajaxBusy" class ="busyAJAX">
<p>
<img src="Images/progress.gif">
</p>
</div>
<span id="placeholder"></span>
<ul id = "idul" data-role="listview" data-theme="b" data-inset="true">
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
here is a sample ajax call which dynamically generates the listview. The code does its job..but the window which shows the details about the listview(when clicked) does not get any title for the navigation bar. In code..it needs to display the txt.firstname and txt.lastname.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DirectoryData.asmx/TestSearch",
data: argument,
dataType: "json",
beforeSend: function () {
$("#resultLog").html("Loading" + '<img src="Images/progress.gif" />');
},
success: function (msg) {
var items = [];
$("#unfinshed").remove();
var public_tweets = JSON.parse(msg.d);
if (public_tweets.length > 0) {
// remove older values
$("#placeholder").after('<ol id="unfinshed" data-role="listview" data-theme="b" data-inset="true" data-dividertheme="c"></ol>');
$('<li data-role="list-divider">Records found: ' + public_tweets.length + '</li>').appendTo("#unfinshed");
// $('#unfinshed').empty();
for (var x = 0; x < public_tweets.length; x++) {
var txt = public_tweets[x];
var imageName;
if (txt.type == "Faculty") {
imageName = "Images/BusinessPerson.png";
} else {
imageName = "Images/StudentPerson.png";
}
//<img src="images/gf.png" alt="France" class="ui-li-icon">
$('<li><img src="' + imageName + '" class="ui-li-icon">
<a href="#" >' + txt.firstname + ' ' + txt.lastname + '
</a><p></p><p>' + txt.title + '</p>' +
'<ul data-theme="c" data-inset="true">' +
'<li><span class="dirHeaderFont">' + 'Institution:</span><p></p>
<span class="footerTextFont">' + txt.institution + '</span></li>' +
'<li><span class="dirHeaderFont">' + 'Department:</span><p></p>
<span class="footerTextFont">' + txt.department + '</span></li>' +
'<li><span class="dirHeaderFont">' + 'Title:</span><p></p>
<span class="footerTextFont">' + txt.title + '</span></li>' +
'<li data-icon="grid"><span class="dirHeaderFont">' +
'Phone:</span><p></p><span class="footerTextFont">
<a href="tel:' + txt.phonenumber + '">' + txt.phonenumber +
'</a></span></li>' +
'<li data-icon="search"><span class="dirHeaderFont">' +
'Email:</span><p></p><span class="footerTextFont">
<a href="mailto:' + txt.email + '">' + txt.email +
'</a></span></li>' +
'<li><span class="dirHeaderFont">' + 'Active:</span><p>
</p><span class="footerTextFont">' + txt.active +
'</span></li>' + '</ul>' +
'</li>').appendTo("#unfinshed");
}
$("#unfinshed").page();
} else {
// display no records found
$("#placeholder").after('<ul id="unfinshed" data-role="listview" data-theme="c" data-inset="true"></ul>');
$('<li>' + 'No records found' + '</li>').appendTo("#unfinshed");
$("#unfinshed").page();
} // end of public_tweets check
$("#resultLog").html(' '); // remove the loading image
}
}); // end of ajax
$("#resultLog").ajaxError(function (event, request, settings, exception) {
$("#resultLog").html("Error connecting to database. Try again later.");
//$("#resultLog").html("Error connecting to database. Try again later.: " + settings.url + "<br />HTPP Code: " + request.status);
});


You could try to add a custom title like this:
$("div:jqmData(role='header')").prepend('<h1>Custom Title</h1>');
Might need to tinker with it a tad but it works
UPDATE:
Live Example:
http://jsfiddle.net/phillpafford/trdYP/51/
JS:
$("div:jqmData(role='header') > h1").replaceWith('<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">New Title</h1>');
HTML:
<div data-role="page" id="home">
<div data-role="header">
<h1 >Home</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li>Page 2</li>
</ul>
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1 >Page 2</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li>Home Page</li>
</ul>
</div>
</div>

Related

Delete list element from a confirmation popup

I have a list with delete button for each element , when the user click on the delete button a confirmation dialog appear ,if the user press the OK button i want to delete the list element my problem is how to get the <li> list element index in order to remove it from the list , my code not return the correct index , please help me ..
<div data-role="page">
<div data-role="content">
<ul data-role="listview" id="employeesList" data-inset="true" data-split- icon="delete">
<li><a href="#">
<font class="line1" > Emp1Name</font>
<font class="line2" >Emp1Salary</font>
</a><a href="#DeleteConfirm" data-rel="popup" data-position-to="window" data- transition="pop" >Delete</a></li>
<li><a href="#">
<font class="line1" > Emp2Name</font>
<font class="line2" >Emp2Salary</font>
</a>Delete</li>
</ul>
<div data-role="popup" id="DeleteConfirm" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="width:400px;height:200px;" class="ui-corner-all">
<div data-theme="c" style="text-align:center;float:center;height:53px;padding-top:13px;" >
<font size="6px" >Delete</font>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<font size="5px" >Do you want to delete this Employee?</font>
<BR>
<div style="text-align:center;font-size: 22px;" >
<input type="button" id="No" data-inline="true" data-icon="delete" data-theme="c" value="No " />
<input type="button" id="Yes"data-inline="true" data-icon="check" data- theme="c" value=" Yes" data-corners="false"/>
</div>
</div>
</div>
</div>
Java script code:
var SelectedLi ;
$('#DeleteConfirm').on('click',function(){
SelectedLi= $(this).parent().index();
});
$('#Yes').on('click',function(){
$('#employeesList').remove(SelectedLi);
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});

You have mistake in binding event to split button, it should be as follows:
var SelectedLi ='' ;
$('[href=#DeleteConfirm]').on('click',function (e) {
// store parent of clicked button
SelectedLi = $(this).closest("li");
});
$('#Yes').on('click',function(){
$(SelectedLi).remove();
$('#employeesList').listview("refresh");
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});
Demo

This is how I do my popup:
HTML:
<div data-role="popup" id="sterge" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Delete?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">To Delete Product from Bonus?</h3>
<p>This action cannot be undone.</p>
<input id="giveupButton" data-inline="true" type="button" value="Cancel"/>
<input id="delButton" data-inline="true" onclick="deletebonusproduct();" data-theme="b" type="button" value="Delete"/>
</div>
</div>
JS:
$(document.body).on('click', '.del' ,function(){
li = $(this).parent();
$('#sterge').popup("open");
});
$(document.body).on('click', '#delButton' ,function(){
$('#sterge').popup("close");
li.remove();
});
$(document.body).on('click', '#giveupButton' ,function(){
$('#sterge').popup("close");
});

JQuery Mobile dynamic background color of 'li'

Trying to set the background color of my dynamic li. li is not given 'class' or 'id' since each li needs to have an assigned color in code.
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
$('li').css({backgroundColor: bgcolor});
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh'); // not working!
});
HTML:
<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
<div data-role="header">
<h1>HOSP-HEADER</h1>
<a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<h4>Information</h4>
<ul data-role="listview" data-inset="true" id="information">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region IV</h4>
<ul data-role="listview" data-inset="true" id="region4">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region V</h4>
<ul data-role="listview" data-inset="true" id="region5">
<!-- AJAX CONTENT -->
</ul>
</div>
</div>
<div data-role="footer">
<h1>Powered by CM</h1>
</div><!-- /footer -->
</div>
Results I'm getting now. text background color needs to fill the list view area not black:

1
▲
text-align: center; to li as well. Even simpler. – Omar yesterday

Why page call number of time when user come switching different pages in jquery mobile

I am using jquery mobile.Actually my problem is the my page is call 3 time when user come switching from different pages .At first time my "Home" call one time.i add some data on data base using (+)button in header .it show in list view. But after clicking to row it show second page .on click the second page row it show third screen.while using back button it show second the again first .But again user press + button now page call three time .? why it call three time i don't know?
here is my code in fiddle..
http://jsfiddle.net/ravi1989/AkX7t/2/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- Case Information Pop up-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="caseNameValue" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="caseDate" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="caseTextArea"></textarea>
</div>
</div>
</div>
<!-- Case Information Pop up End-------------------------->
<!-- User setting Pop up-------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
<!-- User setting Pop up End-------------------------->
</div>
<script>
$(document).on('pagebeforeshow', '#Home', function() {
});
</script>
</div>
<!-----------Document screen------------------->
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png" id="realTimeImaage"/></div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
<script>
$(document).on('pagebeforeshow', '#DocumentScreen', function() {
console.log("init");
loadFolderContent();
});
function loadFolderContent() {
for (i = 0; i < 40; i++) {
$('#folderInside_Data').append(
'<li class="rowID" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folderInside_Data').listview('refresh');
}
$(document).on('click', '.rowID', function() {
// $.mobile.changePage($("#realTimeScreen"));
$.mobile.changePage($("#realTimeScreen"), {
transition: "pop",
reverse: false,
changeHash: false
});
console.log(this.id)
});</script>
</div>
<!-----------Document screen End------------------->
<!-----------------------Real Time screen----------------------------->
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
Back
<h1 class="ui-title" id="" style="text-align:left;margin-left: 100px;">Document name</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a><img src="img/Follow-Realtime.png" id=""/></a>
<a><img src="img/Stop-Realtime.png" id=""/></a>
<a><img src="img/Email-Document.png" id=""/></a>
<a><img src="img/Connect-Realtime.png" id=""/></a>
<a><img src="img/Manage-Case-Folders.png" id=""/></a>
<a><img src="img/Export-Realtime.png" id=""/></a>
</div>
</div>
<div data-role="content" data-theme="d">
<div id="realTimeContents"></div>
</div>
<script>
<!-----------------------add data Time screen----------------------------->
for (i = 0; i < 400; i++) {
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>'+ '<br>'+ '<br>'
);
}
</script>
</div>
$(document).ready(function() {
$.mobile.loading('hide');
onDeviceReady();
});
$(document).bind('pagecreate', function(e) {
if (e.target.id == 'Home') {
$("#headerButtons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
$('#caseNameValue').val('');
$('#caseDate').val('');
$('#caseTextArea').val('');
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
}
});
}
$(document).on('click', '.caseRowClick', function() {
// $.mobile.changePage($("#DocumentScreen"));
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
$("#AddButton").click(function() {
var isvalid = validationField();
if (isvalid) {
insertData();
window.localStorage.setItem("isAddSomeData", "yes");
$.mobile.changePage($("#Home"));
/*$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
}
});
$("#Cancel").click(function() {
$.mobile.changePage($("#Home"));
/*$.mobile.changePage($("#Home"), {
transition: "pop",
reverse: false,
changeHash: false
});*/
});
$("#CancelSettingButton").click(function() {
$.mobile.changePage($("#Home"));
/* $.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
});
});
function validationField() {
if ($('#caseNameValue').val() == '') {
alert("Please Enter the Case Name");
return false;
} else if ($('#caseDate').val() == '') {
alert("Please Enter the Case Date");
return false;
} else if ($('#caseTextArea').val() == '') {
alert("Please Enter the Case Text Area");
return false;
}
return true;
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
document.addEventListener("deviceready", onDeviceReady, false);
var db = "";
//will create database Dummy_DB or open it
//function will be called when device ready
function onDeviceReady() {
db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
if (window.localStorage.getItem("isAddSomeData") == "yes") {
alert("Yes");
db.transaction(queryDB, errorCB);
}
// db.transaction(populateDB, errorCB, successCB);
}
function insertData() {
db.transaction(populateDB, errorCB, successCB);
}
//create table and insert some record
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("' + $('#caseNameValue').val() + '", "' + $('#caseDate').val() + '","' + $('#caseTextArea').val() + '")');
}
//function will be called when an error occurred
function errorCB(err) {
alert("Error processing SQL: " + err.code);
}
//function will be called when process succeed
function successCB() {
console.log("success!");
db.transaction(queryDB, errorCB);
}
//select all from SoccerPlayer
function queryDB(tx) {
tx.executeSql('SELECT * FROM CaseTable', [], querySuccess, errorCB);
}
function querySuccess(tx, result) {
var len = result.rows.length;
$('#folderData').empty();
for (var i = 0; i < len; i++) {
$('#folderData').append(
'<li class="caseRowClick" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>' + result.rows.item(i).CaseName + '</h2>' + '<p>' + result.rows.item(i).CaseDate + '</p>' + '<p>' + result.rows.item(i).TextArea + '</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folderData').listview('refresh');
}

I hope I understood you correctly, this is a common jQuery Mobile problem with multiple event binding. Basically, depending on page events you are using, when you reopen some page all event bindings like click will be bound again. So you can have more then one click event on an object.
Best solution to handle this problem is, bind click and every other events (except page events, they don't suffer from this problem) ONLY like this:
$(document).off('click', '.caseRowClick').on('click', '.caseRowClick', function() {
// $.mobile.changePage($("#DocumentScreen"));
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
In this case each time this click event is going to be bound, jQuery Mobile will first try to remove previous click even (if it exist) and then add a new one.
There are some other solutions to this problem and they can be found in this ARTICLE, to be transparent it is my personal blog. Just search for a chapter called: Prevent multiple event binding/triggering. This problem is described here with much more details + examples.

jquery mobile fieldcontain css error

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.

jQueryMobile : How to add contents to Collapsible Div Dynamically

I have a collapsible-set div and within that 2 collapsible divs.
And I have to dynamically add elements to these collapsible divs dynamically, when clicking a plus button. I have tried many codes, but didn't work. Could you please tell me how to do that?
HTML Code
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory1">
<h1 ><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory2">
<h1 ><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
JavaScript
var subCatObject = "<div class='ui-grid-b'>"
subCatObject +="<div class='ui-block-a'><label>Hi</label></div>"
subCatObject +="<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject +="<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject +="</div>";
$('#btnAddSubCat1').click(function (){
var temp = $(subCatObject);
$(temp).appendTo('#setCategory1').page();
$("#setCategory1").collapsibleset('refresh');
});

I changed your HTML as below
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory" data-content-theme="d">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory1">
<h1><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
<div id="setCategoryContent1"></div>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory2">
<h1><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
</div>
and your javascript as below
var subCatObject = "<div class='ui-grid-b'>"
subCatObject += "<div class='ui-block-a'><label>Hi</label></div>"
subCatObject += "<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject += "<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject += "</div>";
$('#btnAddSubCat1').bind('click', function () {
$("#setCategoryContent1").html(subCatObject);
$('#home').trigger('create');
});
I hope you will be able to take up from here.
Check out the working fiddle here http://jsfiddle.net/PKeSB/2/

Resources