I have total four pages: Page1, Page2, Page3 and Page4. Page3 contains Select dropdown menu. Previously, when I was selecting a value from the dropdown of Page3 and move to Page4 and return back to Page3, the selected value does not get retained and the Page3 get reset to its default value. So one of the developer suggest me to use data-dom-cache="true" on Page3 and my problem was resolved. But it has created an another problem.
Page1 -> Page2 -> Page3 (No problem)
Page3 -> Page2 (No problem)
Page2 -> Page3 (Problem! No data was displayed except Header, Footer,
Logos and Select dropdown box)
If I remove data-dom-cache="true" from the Page3 then data get displayed but the selected value get lost when revisited from Page4.
Page3 code: http://jsbin.com/owodon/14/edit
//Code for triggering Page3 from Page2
$('.clsChangeLi').live("click", function () {
var Pg3URL = $(this).attr("data-url");
if (Pg3URL != null)
$.mobile.changePage(Pg3URL, {
transition: "flip",
reloadPage: true
});
});
//Code snippet for Page3
$('#CAL').live('pagebeforecreate', function (event) {
var html = "";
(AJAX request goes here and data is received in html variable)
html = "Data returned by AJAX";
$('#divContentCAL').append(html);
});
I tried each of the following after $('#divContentCAL').append(html); but not working:
$('ul').listview('refresh');
$('#divContentCAL').listview('refresh');
$.fn.listview('refresh');
Your help will be greatly appreciated...thanks.
Related
I've got a navbar outside the page div in a footer (it is on every page) I tried to do a simple fix for the persistent active state of the navbar It worked for the tabs on one of the pages but does not seem to work for this.
Actually, everything works except for some reason ui-btn-active does not get added
Here is the code
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function(e) {
$(this).html("abc");
$('div[data-role="footer"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
});
The html of the anchor changes, ui-state-persist gets added on the last line but ui-btn-active just does not get added for some reason...
Ok it seems jquery mobile automatically removes ui-btn-active on page transition, even if your navbar is out of page div (which I find kind of lame...) It seems it does this on or after pagebeforeshow, because this did not work with that event... so I just used pageshow instead.
Here is the working code:
var navbar;
$(document).on("pageshow", function() {
if(navbar) {
$(navbar).addClass('ui-btn-active')
}
});
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function() {
navbar = $(this);
});
});
I'm building a test mobile app using a multi-page template but JQM is incrementally registering the same event on the same object each time I'm navigating from the main page to the search page.
If I'm on the main page and navigate to the search page, the first time 1 onclick event attached to my "li a"'s within the UL but if I go back to the main page again using the standard JQM back button and click search page again there are 2 events exactly the same registered on the each "li a" with in the UL. If I do it a third time there are 3, and so on...
Relevant Search Page Markup:
<div id="searchResults">
<ul id="catResult" class="ui-listview" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="listdivider" data-theme="b">Search Categories</li>
</ul>
</div>
JQM Code for search page:
$('body').on('pagebeforeshow', '#searchPage', function(event){ // check if page is shown then execute code
setScrollBar("show");
buildCategoryList();
setListMenuHeight(".ui-2col-layout .ui-2column-grid .ui-block-a", wHeight);
// This event register is being registered multiple times
$('#catList').on('click', 'li a', function(){
var href = $(this).attr('href');
var id = href.split('=');
console.log('spLoadCategoryResults('+id[1]+')');
spLoadCategoryResults(id[1]); // return results from database
});
$("[data-rel=back]").click(function(){
// removes appended elements from the DOM is they exist
cleanPage(['#catResult li','#locationMap #mapCanvas','#searchResults #spResult']);
});
// DEBUG - shows how many times the event is registered
var data = jQuery._data( catList, "events" );
console.log(data);
});
Debug results:
click
[Object { type="click", origType="click", guid=306, more...}, Object { type="click", origType="click", guid=469, more...}, Object { type="click", origType="click", guid=537, more...}]
0
Object { type="click", origType="click", guid=306, more...}
1
Object { type="click", origType="click", guid=469, more...}
2
Object { type="click", origType="click", guid=537, more...}
delegateCount
3
remove
[Object { type="remove", origType="remove", guid=210, more...}]
Each of these are registered on the "li a".
I think it has to do with this code. You are attaching another click event to the anchor items every time you navigate to the search page.
Here is jsfiddle to demonstrate http://jsfiddle.net/d2Jzb/
// This event register is being registered multiple times
$('#catList').on('click', 'li a', function(){
var href = $(this).attr('href');
var id = href.split('=');
console.log('spLoadCategoryResults('+id[1]+')');
spLoadCategoryResults(id[1]); // return results from database
});
That click event appears to be independent from anything happening in the pagebeforeshow event. Just take the event declaration out of the pagebeforeshow event declaration.
I'm using jquery tab and following js method, how and what can i modify it to maintain state of tab between postbacks? (This resets tabs to first tab after page_load)
$(document).ready(function() { //When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content return false; });
I ran across this problem when I first started using jQuery. My solution was to use an <asp:HiddenField /> to store the active tab index on tabselect.
ASP.Net allows client-side code to modify an <asp:HiddenField /> so it will retain its value across postbacks.
On document.ready, simply restore the active tab by setting the selected tab during intialization:
Example:
$('div#divMyTabs').tabs({
selected: function () {
var tabFromPostback = $('input#<%=hfActiveTab.ClientID %>').val();
return tabFromPostback === '' ? 0 : tabFromPostback; //Default to first.
},
select: function (e, ui) {
$('input#<%=hfActiveTab.ClientID %>').val(ui.index);
}
});
I have a link which, when clicked, shows an image using Scriptaculous. When I click the link again, it hides the image again. Now, when the link is clicked, I call a function which is called toggle(). How can I change the links text when I click it and change it back to what it was when its clicked again? Thats my function:
<script type="text/javascript">
function toggle(element){
new Effect.toggle(element, 'Slide', {duration:0.5});
}
</script>
Thanks!
One solution would be to pass the object being clicked into the function and check its innerHTML.
click this
//replace my div with the name of the element to slide.
function toggle(element, obj){
if(obj.innerHTML == 'click this'){
obj.innerHTML = 'clicked';
}
else{
obj.innerHTML = 'click this';
}
new Effect.toggle(element, 'Slide', {duration:0.5});
}
This post talks about the problem that jQuery tabs is still having with the back button. What the customer needs is fairly simple - when they press back, they want to go back to what they were just looking at. But jQuery tabs loads the first tab, not the one that was selected when the user left the page.
I've read the accompanying link and it says "It is planned and Klaus is working on it whenever he finds the time."
Has anyone solved the back button problem with jQuery UI tabs?
Using the solution to the history problem easement posted, a dirty fix for the back button problem would be to periodically check the location.hash to see if it has changed, and if it has, fire the click event of the appropriate link.
For example, using the zachstronaut.com updated jQuery Tabs Demo, you could add this to the $(document).ready callback, and it would effectively enable the back button to switch tabs, with no more than a 500ms delay:
j_last_known_hash = location.hash;
window.setInterval(function() {
if(j_last_known_hash != location.hash) {
$('#tabs ul li a[href="'+ location.hash +'"]').click();
j_last_known_hash = location.hash;
}
}, 500);
Have you tired updating the browsers location as you switch tabs?
http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html
if you had a class on your tab container that was tabContainer, to update the url when user clicks a tab, you could do this:
$(".tabContainer").tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
then, instead of firing click, you could use the tabs select method if you have some getIndexForHash method that can return the right tab number for the selected hash value:
var j_last_known_hash = location.hash;
window.setInterval(function() {
var newHash = location.hash;
if(j_last_known_hash != newHash) {
var index = getIndexForHash(newHash);
$('.tabContainer').tabs("select",index);
j_last_known_hash = newHash;
}
}, 100);
window.onhashchange = function () {
const $index = $('a[href="' + location.hash + '"]').parent().index();
$('.tabContainer').tabs('option', 'active', $index);
}