We Keep Coding

Click automatically on Tabs Jquery with button

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

Tab as a button jquery ui

Have tab and 5 tabs for showing content and 1 tab for printing page, how to use print button just to onclick without refreshing page.
<div id="maintab">
<ul>
<li>HATPRO</li>
<li>Summary</li>
<li>Module List</li>
<li>Computer Infrastructure</li>
<li>All (Raw Data)</li>
<li class="myTab">Print</li>
</ul>
$("#maintab").tabs();
And 5 div
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
UPDATE 1
Sorry about all solutions, but it's not working, because it puts all content of all tabs to current tab when clicking on print button
UPDATE 2
I added ui-widget-content for print tab. Now it shows empty page

Add this to your jquery code
$(".myTab a").click(function(e){
e.stopPropagation();
});

There are many ways to approach this. In my opinion, this is the most elegant because it doesn't require any JQuery or any modifications of your printData() function.
Change
Print
to
Print
Returning false will stop the page from refreshing, as the event will never bubble up.

Hmm, I just added simple button
var textElement = $("<span></span>");
textElement.append('<button id="printBtn" onclick="window.print(); return false;">Print</button>')
textElement.css('position', 'absolute');
textElement.css('right', '20px');
textElement.css('top', '5px');
$("#maintab").append(textElement);
But it's ugly solution :(
Thanks everybody for efforts, if there any different solutions, just post or comment :)

jQuery Mobile objects stay in memory

I am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
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>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});

Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});

JQuery Mobile does not update or repost data when navigated away

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);
});

jQuery Toggle modification

I am using the below javascript (jQuery) to toggle open two DIVs. The DIVs open fine and open one at a time, which is what I am after. However, I also want the DIVs to close when they are clicked a second time, which doesn't happen despite my best efforts!
Javascript:
$(document).ready(function() {
$('.info_tab').click( function() {
var currentID = $(this).next().attr("id");
$('.toggle_info[id!=currentID]').hide(); /* the intention here is to hide anything that is not the current toggling DIV so as to close them as a new one is opened. I thought this would leave the currently selected DIV uninterrupted to toggle closed (below), but it doesn't */
$(this).next().toggle();
return false;
});
});
HTML:
<div class="info_tab">
<h1>Person One</h1><br />
<p>click for less info</p>
</div>
<div id="person_one_info" class="toggle_info">
<p>More information about Philip Grover</p>
</div>
<div class="info_tab">
<h1>Person Two</h1><br />
<p>click for less info</p>
</div>
<div id="person_two_info class="toggle_info">
<p>More information about Roy Lewis</p>
</div>
If any more info is needed, just ask and I'll be happy to edit the question.
Cheers,
Rich

you have the concept down, but not using the "currentID" correctly. You need to remember it's a variable, and can't be in another string if you want it evaluated.
With that said, try this:
$('.toggle_info[id!='+currentID+']').hide();
This makes the variable get evaluated in the selector, then passes it off to jQuery to find.
it looks like you're going to an accordian effect though. And jQuery UI has just such a control that you can use (if you're interested). if you're going for experience, then carry on. ;-)