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");
});
});
Related
I am working on a bootstrap page (3.0). I have several small panels across the top of the page that are visible. Below these panels I have larger panels that contain much more detail of the small panels across the top that are hidden by default. When a user clicks on one of the small panels across the top, it hides the small panel and displays hidden larger stacked vertical panels below it with the additional info.
I need to make it so that whichever hidden panel is selected to open, that it will always show 1st (above all other visible divs). The problem I am having is they are showing in the order the divs are hard coded in the HTML, however users will not see the new div load unless they scroll down to see it visible on the page. I need all newly clicked panels to load 1st, so users will always see it load above all other now visible divs.
I am still learning jQuery/js.
So, for my top (small) panels, I have a link in the panel-footer that opens the associated larger panels when clicked. It hides the small panel when clicked, then shows the hidden panel (adds a zommIn animation as well). Then when a user closes the larger panel, it hides it again, then adds the small panel back to the top panels.
It is all working great, I just need to prepend the hidden divs to ALWAYS display as 1st (above the other visible divs).
Here is an example of the jQuery I am using to show the larger panels and hide the associated small top panels...
//Device Panel
$("#openDashDevices").click(function(){
$("#dashDevice").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashDevice").removeClass("zoomIn");
}, 1000);
$("#dashDevice").removeClass("hide");
$("#topPanelDevice").addClass("hide");
$("#topPanelDevice").removeClass("show-inline zoomIn");
});
And here is the jQuery I am using that closes/hides the larger panels and re-shows the hidden small panel across the top...
//Device Panel
$("#closeDevicePanel").click(function(){
$("#dashDevice").addClass("hide");
$("#dashDevice").removeClass("show zoomIn");
$("#topPanelDevice").addClass("show-inline zoomIn");
window.setTimeout( function(){
$("#topPanelDevice").removeClass("zoomIn");
}, 1000);
$("#topPanelDevice").removeClass("hide");
});
HTML of ONE of the top panels:
<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns sortable">
<div id="topPanelDevice" class="dashboardDevices dashboardPanels show-inline animated">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
<div class="row">
<div class="col-xs-3 dashIcon">
<i class="icon-device"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">1344</div>
<div class="dashSubText">Computers</div>
</div>
</div>
</div>
<a id="openDashDevices" class="dashPanelFooter" href="javascript:void(0);">
<div class="panel-footer">
<span class="pull-left">View Devices</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
And here is the html of ONE of the larger panels (hidden by default)...
<!--Opened Dashboard Panels-->
<div class="openedDashboardPanelsGroup sortable">
<div id="dashDevice" class="dashboardDevices dashboardPanelsOpen col-sm-12 animated hide">
<div id="panelDevices" class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelBottom"><i class="fa fa-arrows"></i></div>
<div class="pull-right"><button id="closeDevicePanel" type="button" class="close" title="" rel="tooltip" data-original-title="Close Panel">×</button></div>
<div class="row">
<div class="openDashTitle">
<div class=""><i class="dashIcon fa fa-bar-chart"></i>Devices</div>
</div>
</div>
</div>
<div class="panelDashboardContent">
<div id="maintStatsContent" class="maintenanceStats" type="maintenanceStats">
Maint Stats goes here
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing my top panels and a couple of the larger panels opened...
Instead of hard coding the html I would create it dynamically with jquery. That way you can just prepend it to the container.
$("#closeDevicePanel").click(function() {
$('.containerclass').prepend('yourhtml');
}
I got it to work. I just needed to use prependTo. For example, to open the Alerts panel...
//Alerts Panel
$("#openDashAlerts").click(function(){
$("#dashAlerts").prependTo(".openedDashboardPanelsGroup");
$("#dashAlerts").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashAlerts").removeClass("zoomIn");
}, 1000);
$("#dashAlerts").removeClass("hide");
$("#topPanelAlerts").addClass("hide");
$("#topPanelAlerts").removeClass("show-inline zoomIn");
});
This now loads with my animation just like I need, and always prepends it as the 1st child of the parent div.
I would like to get a lightbox modal box to pop up automatically on page load.
My current anchor works perfect when I actually click it, and here is my bit of JQuery that I've been using so far.
<script>
$(document).ready(function(){
document.getElementById('popup').click();
});
</script>
And the HTML
<a id="popup" class="wb-lbx lbx-modal" href="#alert">test</a>
<section id="alert" class="mfp-hide modal-dialog modal-content overlay-def">
<div class="alert alert-info">
<h2 class="h4">header</h2>
<p>content</p>
</div>
</section>
Problem is, it just brings me to the #popup anchor location on the page, not actually triggering the lightbox that pops if you were to actually click it.
How do I trigger the click event on page load?
Thanks
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 trying to figure out how i can append a page to the bottom of another page after clicking on a button.
Usually the page with the button disappears and the next page is loaded.
I don't want the first page to disappear, instead just add the content of the second page at the bottom.
For example i have this structure of a page:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
If you click this button, this page will be hidden and the next page will slide up.
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>This is page2</p>
Go To Page 3
</div>
</div>
<div data-role="page" id="p3">
<div data-role="header" data-rel="back"><h1>Header Page 3</h1></div>
<div data-role="content">
<p>This is page3</p>
</div>
</div>
I created this jsfiddle for illustration.
I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.