I have three tabs on the footer: home, promotions and events. I have notification badge implemented such that when a new promotion is loaded in the database, the footer of the mobile page shows 1 and if more are inserted, the number gets incremented in real time. Now, say, if I started with home page, and I see real time notifications on the promotions and events tab. But, when I navigate to the events tab, the notifications go away, but if I click back to the home tab, the notifications show up. I have tried "pageinit" and "pageshow" separately, with the alert message for test as suggested in other stackoverflow questions. Alert messages show up at each click on the tabs. But, when I tried to modify with the append or html, it does not output me with notification badge. I tried adding id to data-role=page for home, promotions and events, alerts show up, but the append or html functions do not give me results as expected. What I am missing here?
<div data-role="page">
<div data-role="header">
........
</div>
<div data-role="content">
.......
</div>
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<!---- The notification badge from jquery script get appended in these IDs----->
**<li><div id="home"></div>...........</li>**
**<li><div id="promotion"></div>......</li>**
**<li><div id="event"></div>..........</li>**
</div>
</div>
</div>
I figured that if my first page is the home page, JQuery Mobile stores it in its history, and any other pages visited will be the ajax calls. And, I have been saving notification badges in the page that they belong to. for eg. if a new promotion is being added, it is being appended to promotion.mobile.erb and if a new event is being added, it is being appended to a div element in event.mobile.erb. I would be able to see it only if my current page is the home page. This was my the issue earlier.
How I resolved it?
I unDRY'ed my footer and page elements from the application.mobile.erb and added page ids to home , promotions and events pages. Then, I added different ids to the div elements where the notification badges go.
for div element in the home_page , I added 0 (you can choose any thing that makes it unique)
for div element in the promotion_page I added 1 and
for div element in the event_page I added 2 like in the code below...
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<!---- The notification badge from jquery script get appended in these IDs----->
**<li><div id="home0"></div>...........</li>**
**<li><div id="promotion0"></div>......</li>**
**<li><div id="event0"></div>..........</li>**
</div>
</div>
Now, when any real time notification comes up, add it to either promotion0 or event0 div so that whenever we navigate away, we can get the old badge from the that div, and repost it to the navigated page div element using pageinit like in the example below...
$('#promo_page').live('pageinit',function(event){
$('#promotion2').badger(oldBadge0);
$('#event2').badger(oldBadge_e0);
});
Related
I have html tabs and a continue shopping button. Every tab contains few products. When we land on the page by default first tab is opened. The requirement is this when we click on continue shopping button, user will automatically goes to next tab say tab2, tab3 and then finish i.e. user will have to traverse each tab after clicking on continue shopping button.
Here is my tab code
<ul class="tabs-menu">
<li class="current">Warranty</li>
<li class="">Accessories</li>
<li class="">Software</li>
</ul>
<div class="tab-content" id="tab-1">
Content of Tab 1
</div>
<div class="tab-content" id="tab-2">
Content of Tab 2
</div>
<div class="tab-content" id="tab-3">
Content of Tab 3
</div>
Continue Shopping
Complete code of tabs are here:
http://jsfiddle.net/syahrasi/us8uc/
I made a quick demo here it will try to find the next tab, please have a look for more details and as if you need:
demo http://jsfiddle.net/Us8uc/4696/
use simple setters in your javascript code
$( ".tab-content" ).tabs( "option", "active", 1 );
for more info check out the api documentation
http://api.jqueryui.com/tabs/
Your button can have a click event that does this:
$("a[href='#tab-2']").trigger('click');
Replace #tab-2 with whatever tab you want to have open by the button
--edit--
Your button logic will look at the tab sequence and just add 1 to the end until there is no more tabs to traverse through. Alternatively, have a "Continue Shopping" button in each of the tab content moving forward
I have added a list in my website like this;
<ul>
<li>Video</li>
</ul>
Currently, when the user click this button the video page opens, however, what I want to do is, along the video page opening up, I also want to add a pop, saying "This is the video page".
I have searched online but I can't seem to find anythiing that I need, I found this but I can't seem to intergrate my list with this code;
Open Popup
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
Also, if possible, I want the popup to close automatically after certain amount of time e.g. 3 seconds
I have tried this but only the first link opens;
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<ul>
<li>Video</li>
</ul>
this uses jquery ui to accomplish what you want. it pops up a dialog waits 3 seconds then closes it 3 seconds later
JSFiddle: jsfiddle.net/mcf2280/tbyuys9w/7/
$(function() {
$("#popupBasic").dialog({ autoOpen: false });
$(".navButton").click(function() {
var text = $(this).text();
$("#popupBasic").html('<p>'+text+'</p>');
$("#popupBasic").dialog('open')
window.setTimeout(closeAlert, 3000);
});
function closeAlert(){
$("#popupBasic").dialog('close');
}
});
Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
loading div content only on click and not page load
targeting a div to load other div content into
when link is clicked to open a new hidden div, the other hidden div that was showing goes away
and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
edit: Ill add code but I don't think it'll help much.
<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>
<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>
<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>
</div>
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
and div cgcontent into center-content
and div cg2 into div-pic-2
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="navigation">
Welcome
Frog
Lamma
</div>
<div id="content"></div>
<div id="image"></div>
<script>
$(function(){
$('#navigation').on('click','a',function(e){
e.preventDefault();
$($(this).attr('rel')).load($(this).attr('href'));
});
});
</script>
</body>
</head>
</html>
Demo: https://oteck.co.uk/sample/load.html
I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.
First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600