im making an internal page jquery mobile ive search question here in stackover but those are not similar to mine.i want to know if it is possible to use ajax in loading internal pages.i want to load my about1 page and about2 page in the about page here is my sample code:
<!-- start about -->
<div data-role="page" id="about" data-url="about" data-theme="a">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About</h1>
</div>
<!-- start ajax -->
<ul data-role="listview" data-theme="a" id="mylist" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-screen-hidden">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">
</span>
</div>
</li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-a">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about2
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
<!-- end ajax -->
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about -->
<!-- start about1 -->
<div data-role="page" id="about1" data-url="about1">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About1</h1>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about1 -->
<!-- start about2 -->
<div data-role="page" id="about2" data-url="about2">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About2</h1>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about2-->
If you want to do jquery mobile page load as AJAX,
Your AJAX should be,
$( "#your_success_ele_id1" ).load( "about1.html", function() {
$('#your_success_ele_id1').trigger('create');
});
$( "#your_success_ele_id2" ).load( "about2.html", function() {
$('#your_success_ele_id2').trigger('create');
});
trigger('create') should be used, otherwise you will get an normal html page
This you can use for onclick of an element.
Related
I tried to write a form in jquery mobile. all field labels have a popup icon. This form worked well but now there is a problem! When I clicked in bottom popup icon, popup open in top of form and in a fixed position. I dont know what's happened. please help me. thank you.
<form class="form-inline" role="form" method="post" action="php/formUserP1.php" id="formP1" name="formP2">
<fieldset class="ui-grid-a">
<h2 class="ui-block-a">
<sup class="dont-print">
<a href="#Page01Tooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a>
</sup>
<div data-role="popup" id="Page01Tooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Personal Information
</p>
</div>
</h2>
<div id="imageBlock" class="ui-block-b" align="center">
<!-- Image -->
<div id="imagePreview"></div>
<div class="fileUpload">
<span>
Image
</span>
<input id="uploadImage" type="file" class="upload" name="image" />
<sup class="dont-print">
<a href="#uploadImageTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a>
</sup>
<div data-role="popup" id="uploadImageTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Your Image
</p>
<img src="images/image-sample.jpg">
</div>
</div>
<!-- End of Image -->
</div>
</fieldset>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="FirstNameFa" id="00" >
FirstNameFa
<sup class="dont-print">
<a href="#FirstNameFaTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="FirstNameFaTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your first name using the Persian alphabet.
</p>
</div>
</label>
<input type="text" class="form-control input" data-clear-btn="true" placeholder=" "
name="FirstNameFa" id="FirstNameFa" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="FirstNameEn">
FirstNameEn
<sup class="dont-print">
<a href="#FirstNameEnTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="FirstNameEnTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
In Latin script, write your first name as it appears in your passport.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder="Your First Name in English"
name="FirstNameEn" id="FirstNameEn" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="LastNameFa">
LastNameFa
<sup class="dont-print">
<a href="#LastNameFaTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="LastNameFaTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your family name using the Persian alphabet.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder=" "
name="LastNameFa" id="LastNameFa" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="LastNameEn">
.
<sup class="dont-print">
<a href="#LastNameEnTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="LastNameEnTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p>
In Latin script, write your family name as it appears in your passport.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder="Your Last Name in English"
name="LastNameEn" id="LastNameEn" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<fieldset data-role="controlgroup" data-type="horizontal" id="Gender">
<legend>
Gender
<sup class="dont-print">
<a href="#GenderTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="GenderTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
What is your gender
</p>
<ul dir="ltr">
<li>
Male
</li>
<li>
Female
</li>
</ul>
</div>
</legend>
<label for="Male" class="radio-inline">
<input type="radio" class="form-control" name="Gender" value="1" id="Male" required>
</label>
<label for="Female" class="radio-inline">
<input type="radio" class="form-control" name="Gender" value="2" id="Female"
</label>
</fieldset>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="PassportNo">
PassportNo
<sup class="dont-print">
<a href="#PassportNoTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="PassportNoTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your passport number.
</p>
</div>
</label>
<input type="text" data-clear-btn="true" class="form-control" placeholder=": A11487661"
name="PassportNo" id="PassportNo" maxlength="30" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
Nationality
<sup class="dont-print">
<a href="#NationalityTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="NationalityTooltip" class="ui-content" data-overlay-theme="a">
What is your nationality
</div>
</div>
<div>
BirthDate
<a href="#BirthDateTooltip" data-rel="popup" data-transition="flip"
class=" ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title="Help"></a>
<div data-role="popup" id="BirthDateTooltip" class="ui-content" data-overlay-theme="a">
Write your birthdate as it appears in your passport (day, month, year according to the Gregorian calendar)
</div>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="CountryBirth">
CountryBirth
<sup class="dont-print">
<a href="#CityBirthTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="CityBirthTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write the name of the country and the city in which you were born.
</p>
</div>
</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<select class="form-control" name="CountryBirth" id="CountryBirth" dir="ltr">
<option value="">
</option>
</select>
</fieldset>
<input type="text" data-clear-btn="true" class="form-control" placeholder=" . : "
name="CityBirth" id="CityBirth" maxlength="30">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="CountryResidence">
CountryResidence
<sup class="dont-print">
<a href="#CountryResidenceTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="CountryResidenceTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write the name of the country and the city in which you live now.
</p>
</div>
</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<select class="form-control" name="CountryResidence" id="CountryResidence" dir="ltr">
<option value="">
</option>
</select>
</fieldset>
<input type="text" data-clear-btn="true" class="form-control" placeholder=" . : "
name="CityResidence" id="CityResidence" maxlength="30">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="HomeTel">
HomeTel
<sup class="dont-print">
<a href="#HomeTelTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="HomeTelTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your home phone number, including the city and country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393"
name="HomeTel" id="HomeTel" maxlength="15">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="Mobile">
Mobile
<sup class="dont-print">
<a href="#MobileTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="MobileTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your cell phone number, including the country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 0098912345678901"
name="Mobile" id="Mobile" maxlength="15" >
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="WorkTel">
WorkTel
<sup class="dont-print">
<a href="#WorkTelTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="WorkTelTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your work phone number, including the city and country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393"
name="WorkTel" id="WorkTel" maxlength="15">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="Email">
Email
<sup class="dont-print">
<a href="#EmailTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="EmailTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Your email address.
</p>
</div>
</label>
<input type="email" data-clear-btn="true" class="form-control" name="Email" id="Email" disabled/>
</div>
<br>
<input type="submit" class="form-control dont-print" data-icon="arrow-l" data-inline="true" name="next02" id="next02" value=" ">
<br>
</form>
Add data-position-to="window" to the buttons that open the pop-ups.
jQuery Mobile pop-up position.
href="#Page01Tooltip" data-rel="popup" data-transition="flip"
Use there: data-position="window"
I'm having trouble with the display of my webpage. I used a unordered list with item inside. But after the unordered list is added by items resulted from javascript code, they appear in wrong way and don't follow the css rule of the unordered list
Plus, I'm using jquery mobile 1.4.2 css and js
this is the html code :
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" >
<li>1Data Mining</li>
<li>1Ethics</li>
<li>1HCI</li>
<li>1Mobile Dev</li>
<li>1Software Testing</li>
</ul>
</div>
And this is the javascript code that insert new item into list
function getDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var deadline = results.rows.item(i);
$('#allList').append('<li>1Software Testing</li>');
}
;}
Here's a jsfiddle with your code: http://jsfiddle.net/ruslans/dKy3B/
Edit: alternative solution (as per suggestions from many):
$("button#btn").click(function () {
$('#allList').append('<li>1Software Testing</li>');
$("#allList").listview('refresh');
});
http://jsfiddle.net/ruslans/tUJt5/
the mark-up you've pasted is not the mark-up it generates after rendering, it's actually a lot messier than that:
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" class=" ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Data Mining</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Ethics</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1HCI</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Mobile Dev</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Software Testing</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
</ul>
</div>
to add an item to this list and keep the styling, you'll have to do some thing like this as per this answer Dynamically adding <li/> to <ul/> in jquery mobile:
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
Please use Google or the stackoverflow search function next time.
The first hit for me: https://stackoverflow.com/a/5926112/994304
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
The last line (refresh) is very important for jQuery Mobile to layout the UI controls again.
I'm not sure it's needed for all jQuery controls but i'm sure for this one :).
Stefan.
Try refresh the listview
$("#all").listview('refresh');
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");
});
I've created a button
<a data-role="button">
inside a Popup. Here is Popup:
<div data-role="popup" id="popupRegister" data-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Success!!</h1>
</div>
<div data-role="" data-theme="a" class="ui-body-a"
role="main" style="padding:15px;">
<h1>Thank you for regestering with us.</h1>
<p>You may now continue to the app.</p>
<!-- this is the button -->
<a href="#" id="takeMeHome" data-role="button" data-rel="back"
data-theme="a" data-inline="true"
data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span"
class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-a">
<span class="ui-btn-inner"><span class="ui-btn-text">GO</span></span>
</a>
</div>
</div>
When I click the button, console.log is responding but page does not redirect. Why?
Here is how I redirect:
$("#takeMeHome").click( function(){
console.log("lets go home");
//window.location.href = "home.html";
//localStorage.registered=true;
//window.location.replace("home.html");
window.location.href = ("home.html");
});
Replace
window.location.href = ("home.html");
with
$.mobile.changePage('home.html');
And add data-history="false" to popup div.
I'm using custom icons but they're appearing in a circle. Is here a class I need to turn off to stop this?
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
<span class="foot_font">test1</span>
</a>
</li>
<li>
<a href="page40.html" id="test2" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test2</span>
</a>
</li>
<li>
<a href="page44.html" id="test3" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test3</span>
</a>
</li>
<li>
<a href="page22.html" id="test4" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test4</span>
</a>
</li>
<li>
<a href="page47.html" id="test5" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test5</span>
</a>
</li>
</ul>
</div>
</div>
You can override this css behavior by adding
.ui-icon
{
border-radius:0px!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
-ms-border-radius:0px!important;
-o-border-radius:0px!important;
}
To remove the circle gray background behind simply add the
ui-nodisc-icon
class to the link/button
for example, your code can be changed to
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active ui-nodisc-icon">
<span class="foot_font">test1</span>
</a>