I am trying to append buttons to a header if a case is true, but it ends up looking like this:
The edit and new event buttons are supposed to be a control group...
HTML
<div data-role="header">
<h1 class="ui-title" role="heading" id="hdr"></h1>
<div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
</div>
</div>
JAVASCRIPT
$('#addbuttons').append('<div data-role="button" data-icon="gears" data-theme="b">Edit</div>');
$('#addbuttons').append('<div data-role="button" data-icon="plus" data-theme="b">New Event</div>');
Whenever you do any changes to header or footer, you need to re-enhance the markup this way.
$('[data-role=page]').trigger('pagecreate');
You also can use this,
$('[data-role=header]').trigger('create');
Related
I have a form with three different data-role="page" with three different data-url="abc".
Based on some condition I am rendering/displaying some fields on the second page after clicking the button on the first page.
Now I am getting the second page
<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a>
Now in the second page URL i can able to see http://www.test.com/index.html#secondPageId
when i am in the second page If i refresh the browser,
Its showing all available controls in the second page.
But i need to display only few fields based on the button click.
How can i do that ?
If that is not possible, then:
While refreshing the browser by clicking "Browser Refresh button" or Pressing F5 I need to remove the #secondPageId from the URL.
So that i can able to go back to first page.
I have made a jsfiddle that illustrates a possible solution.
Basically, you can do this in two ways:
Initially hide all elements and use jQuery to show the required ones at pagechange.
Initially hide nothing at all, and use jQuery to hide the required elements at pagechange.
The fiddle uses the latter one.
HTML:
<div data-role="page" id="first">
<div data-role="header">
<h3>
First Page
<a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a>
</h3>
</div>
<div data-role="content">
<p>
Please go to next page.
</p>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
<a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a>
</h3>
</div>
<div data-role="content">
<div>
<p class="tobehidden">
This text was visible, but has been made hidden.
</p>
</div>
<div>
<p>
This text only is visible.
</p>
</div>
<div class="tobehidden">
<h4>
This text was also visible, but has now been made hidden.
</h4>
</div>
</div>
</div>
jQuery:
$(document).ready(function(e) {
//Change to first page at load
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#first");
/*
* Read more about page handling here:
* http://api.jquerymobile.com/pagecontainer/#method-change
*/
//Click event for the "NEXT" button
$( document ).on("click", "#Goto_page2", function(){
//Hide elements that has the class "tobehidden"
$(".tobehidden").hide();
//Switch to page 2
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#second");
});
});
I've got a page with three tabs on it, each with different content. I also have a div with a select and a button. I would like this div to display on the first two tabs but not the third. I know one option would be to just duplicate the content on both tabs, but then I would have to keep their data in sync with javascript and I feel like there has to be a better solution than that.
So I tried putting the div between where the tabs are defined and where the tab content starts, which works fine, but it makes it show in all three tabs. In the javascript, I tried binding click events to the tab buttons
$("#pushingInfoTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
$("#addInspection").hide();
});
and showing the div in two tabs and hiding with the third, but after putting debugger inside of the click events, they never fire. Is there an easier way to do this that I'm just unaware of?
Here's the corresponding HTML. Sorry for not having it at first.
<div data-role="tabs" class="ui-content insetContent infoContent" >
<div data-role="navbar">
<ul>
<li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
<li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
<li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
</ul>
</div>
<div id="addInspection">
<div class="ui-block-a" style="width:30%;margin-right:0px;">
<a data-role="button" data-inline="false" data-theme="b" style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
</div>
<div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
<select data-inline="true" data-native-menu="true">
<option value="" id="Option1">Select</option>
</select>
<a data-role="button" data-inline="true" data-theme="g" style="margin-left:-7px;" id="A2">Clr</a>
</div>
</div>
<div id="pushingInfoTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingInspTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingGridTab" class="ui-content insetContent infoContent">
</div>
Notice: Didn't put any of the content that's actually in the tabs, because it's hundreds of lines of unnecessary markup, and I don't think it's the issue.
There is a typo error here:
text-align:right" style="wi
Then, put the JS at the bottom of the body, or at jQuery Document Ready.
Here is the working demo.
I'm developing a web app using jQuery Mobile.
I have a single html file that contains more jQM pages.
These jQM pages have fixed headers and content loaded dynamically via jQuery (in this case I'm using a Listview with filtering option).
This is the HTML structure of all jQM pages:
<div data-role="page" data-theme="a" id="pageTemplateList">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
<a role="button" data-role="button" href="#" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-action ui-btn-icon-notext" data-theme="a">Pubblica</a>
<h1 aria-level="1" role="heading" class="ui-title">Videothron</h1>
<a role="button" data-role="button" href="#panelMenu" class="ui-btn-right ui-alt-icon ui-nodisc-icon ui-btn ui-icon-bars ui-btn-icon-notext" data-theme="a">Menù</a>
</div>
<div data-role="content" id="templateListViewContainer">
<ul id="templateListView" data-role="listview" data-inset="true" data-hide-dividers="false" data-filter="true" data-filter-placeholder="Cerca template...">
</ul>
</div>
</div>
The jQuery code that I call for moving between jQM pages is the following:
location.href = "#pageTemplateList";
When I move from the "first" page (in the image below is "BEFORE") to a "second" page and then come back to the "first" page (in the image below is "AFTER") the Listview content is positioned under the fixed toolbar and the filter input field is partially hidden.
What do you suggest to solve this issue? Do you need further information?
Thanks,
Alex.
I executed each single line of JS code until I found that this issue was caused calling this:
$('div[data-role="page"]').trigger("create");
Removing this line of code (that I was calling after adding input text fields via jQuery) solved the issue.
Instead of calling .trigger("create") on the page div, create a div inside of the page div (eg. <div id="insideThePageDiv">) and call .trigger("create") for the inside div (eg. $("#insideThePageDiv").trigger("create");).
I have a form in which on clicking submit button the form data is sent through ajax and the related message may it be error or confirmation details from the server script which has been written in php is displayed . For now every thing is working fine . But what I want to know is that the message whcih is being displayed with help of JS can I change it into JQM popup as I am using JQM 1.4.2 for my design .
Popup
<div data-role="popup" id="mDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Attention!!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">{Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.} <?php if($this->error->description!='')echo trim($this->error->description)?> </p>
Cancel
Delete
</div>
</div>
Thanks in advance
Try this;
Put this in your HTML, above your <form>
<div id="formNotice"><img src="loading.gif" alt="Loading" /></div>
Now put this where you handle the AJAX response
$("#formNotice").html(AJAXResponse);
$("#formNotice").popup("open");
Here's the docs
Jsfiddle (Without JQM - but you get the idea)
My site is built in HTML5, CSS3 and Jquery-moblie..
I use pop-ups of Jquery-mobile.
On a popup window I have a button that when pressed I want the current pop-up window will close and another will open.
I tried it this way:
popup windows:
<div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
<a data-role="button" data-transition="none" data-theme="b"
onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
</a>
</div>
<div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
...
</div>
JS:
function ShowSecond()
{
$('#MyFirstPopup').popup('close');
$('#MySecondPopup').popup('open');
}
It did not work.
Does anyone have a solution?
First don't use onclick="ShowSecond();" directly on an a tag.
I have created you a working example: http://jsfiddle.net/Gajotres/8Arrt/
Add click event like this:
$('#popup-button').live('click', function(e) {
setTimeout(function(){$('#MySecondPopup').popup('open');},500)
$('#MyFirstPopup').popup('close');
});
Or use .on( if you are using new jQuery library. You can not open new popup unless old one is close but you also can't open now popup in event that closes last one, so setTimeout function is needed. Set whatever timeout you need/want.
Try this:
<div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
<a id="btOpenSecPopup" data-role="button" data-transition="none" data-theme="b"
onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
</a>
</div>
<div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
...
</div>
Your js file
$('#btOpenSecPopup').live('click', function(e) {
$('#MyFirstPopup').popup('close');
$('#MySecondPopup').popup('open');
}