Tab switching - Am loading a page, which has a page url, Then i switch tab which makes an AJAX call to the server. Say i have auto-refresh for all the tabs, after second tab switch it goes back to the first tab because of auto-refresh. Please let me know how this should be handled properly, as i have many tabs within one tab where am doing AJAX there also.
I would simply add a tap event handler to your menu and re-load content every tab click
On every tab link you can add some data attribute like data-target="mypage.html"
and then just handle it:
$( "#mymenu a" ).on( 'tap', tapHandler );
function tapHandler(event) {
var target = $(this).attr("data-target");
$.get(target, function(data) {
$('#my_content_div').html(data);
$("#my_content_div").trigger("create"); // trigger pagecreate instead if loaded content includes headers or footers
});
return false;
}
Related
I came across history.js as a possible solution to some issues i am having. For the website i am building i decided to create a static page where my content would be loaded into. So i would have 3 Divs, (one for the header, one for the menubar and one for the content) When clicking a link in the menu that page would be loaded into the content div. Because of this all traffic stays in the index.php page so clicking on the back button i would go to the last visited content but last visited page. Its my understanding i can solve this with history.js.
So on my page i have several links in the menu bar where onclick a function is called upon. For instance
<li><a href="javascript:void(0);" onclick="myprofile()" ><span>my profile</span></a></li>
<li><a href="javascript:void(0);" onclick="mysettings()"><span>Settings<small>
A function would look something like this.
function myprofile() {
$('#content').load('members.php');
}
function mysettings() {
$('#content').load('settings.php');
}
I added some javascript for history.js (found on this forum) And although it does change the urls inside my index.php but when clicking back it doesnt load the pages. How would i let history.js work when functions are used? (some links i do really need functions so just putting the onload inside link would not be an option for me)
<script>
$(function() {
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
// History.js is disabled for this browser.
// This is because we can optionally choose to support HTML4 browsers or not.
return false;
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
var State = History.getState();
$('#content').load(State.url);
/* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
$.get(State.url, function(response) {
$('#content').html($(response).find('#content').html()); });
*/
});
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('a').click(function(evt) {
evt.preventDefault();
History.pushState(null, $(this).text(), $(this).attr('onclick'));
});
});
</script>
The first parameter of the History.pushState is "data", which is for additional information.
So to save the History entry you could do this in your click event:
History.pushState({ href: 'members.php' }, $(this).text(), $(this).attr('onclick'));
And then when reading it back out you would do this in your History.Adapter.bind function:
$('#content').load(State.data.href);
So i have tried this tutorial and the tabs work flawlessly:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
But the problem is as follows:
I am able to click on the tabs and navigate, but if i use the link directly to a specific tab, it will open the first (default) tab.
Example:
Appending #menu2 does not open the tab assigned with the id #menu2 when visiting the link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2
Thank you!
Maybe you should try this:
$( document ).ready( function( ) {
var hash = document.location.hash;
if( hash.length > 1 ) {
$( "a[href='" + hash + "']" ).trigger( "click" );
}
} );
It checks if there is a hash when the document opens, and then clicks on the correct link
If you add it in between "<script></script>" in the "tryit", and click on "See results", you'll see it happen.
Ex:
That's because bootstraps menu works through javascript, not through the actual anchors.
When clicking on a tab a javascript function is activated that sets an active class on the tab and the content pane, which will cause the tab to be highlighted and the content to be display: block and not display: none anymore (which is the default).
You would have to read the anchor from the URL when generating the page and then set the active classes depending on that.
Addition:
Alternatively you could use the javascript snippet as suggested by #VirginieLGB, but then you will have a short moment of transition every time the page is loaded. Especially when you have a bigger page that takes longer to load, you may have to wait a little for the document to be "ready" so the function starts working. In that timespan, the first tab will be displayed before transitioning and showing the second tab.
I think what you are asking is:
When you click a tab you want a new page to open and the active tab to be shown.
The css indicates the active tab as having the class .active
you will need to append the .active class to the relevant tab on the newly opened page.
I have a strange problem with my jQuery mobile application.
I used a single html file with multiple pages.
My problem is in the navigation, here is what append :
PageA ==(navigate)==> PageB ==> PageC => Click Home button (from dialog) -> Back to PageA.
Everything is fine, my page shows events are as I want.
I can do these actions 2-3 times and the 4th time here is the problem :
Page A
Page B
Page C
Open Dialog, Click Home Button
PageA fire show event
PageC fire show event too
PageC is visible even if in the navBar I have PageA
This is my OnClick :
$("#VisitHomeButton").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$.mobile.navigate('#patientListPage');
return;
});
I noticed, by using breakpoints, that the PageC event fires just after PageA event but not wait the end of my PageA method.
I am stuck on this since 3 days. If someone have any idea how to find the source of this problem it would be great.
Thanks
What a stupid error.
On my PageB :
$(document).on("pageshow", "#PageB", function() {
$("#checkIDButton").click(function(event) {
$.mobile.navigate("#VisitPage");
});
});
just add :
$("#checkIDButton").off();
Fixed everything.
Is it possible to capture what link on the web page the user clicked on?
Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.
This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.
They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.
I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.
I am using JQuery & Javascript.
Instead of having a completely different set of headers/footers you could replace all links in certain areas with links that open in a new window like so:
$('#header a, #footer a').each(function() {
$(this).attr('target', '_blank');
});
This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.
I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.
$('body a').click(function(e) {
//if link is reference to page element
if ($(this).attr('href').charAt(0)=="#") {
return;
}
//check if link is to same window
var pathname = window.location.pathname;
var pathname2 = $(this).attr('href');
pathname2 = pathname2.replace(/^.+\.\//, '');
if (pathname.indexOf(pathname2) >= 0) {
//link clicked is contained on same page
//prevent page from getting reloaded & losing data
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
//link clicked on is another page
if (hasMerchandise) { //var to indicate user has items on order form
//give user options: leave page, open link in other page, stay, etc.
// $('.popupForm-handleExitRequest').click(); //roll your own code
//prevent page from getting reloaded & losing data
//in case user wants to cancel page change or open link in another window
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
} else {
//load new page
$(this).removeAttr('target');
}
});
So problem is that there, we have a 2 tabs, 1st tabs loads a content by ajax1, and 2d tab loads a content by ajax2. So use case: Click 1st tab, loading ajax content. Did a fast click, do not wait while ajax finished. The tab2 content (ajax2 finished faster than ajax1) is shown, but ajax1 just finished and override a content block. In general we had a 2d tab selected but 1st tab content loaded.
The solution looks like below code I know and I want more fancy solution. Please:
var isLoading = false;
tabs.on({
click: function () {
if (isLoading) return;
isLoading = true;
tab.load(function () {
isLoading = false;
});
}
});
Disable the click event of other tabs when one tab is clicked, then enable them afterwards?