I'm building a webpage with jquery mobile and try to link pages with parameters.
This works but the issue I have is that I'm not able to link to the same page I'm currently stay with different parameters.
Example:
<html>
<body>
<!-- START INDEX PAGE -->
<div data-role="page" id="index">
<div data-role="header">
<h1>Indexpage</h1>
</div>
<div data-role="content">
<a href="index.html#listpage?list=1">
<a href="index.html#listpage?list=2">
</div>
</div>
<!-- END INDEX PAGE -->
<!-- START LIST PAGE (page to list content i.e. user list)-->
<div data-role="page" id="listpage">
<div data-role="header>
<h1>Listpage</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="listview">
</ul>
</div>
<script>
//to get passed parameter (list id)
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '= ([^&#]*)').exec(window.location.href);
if (results==null){
return null;
} else {
return results[1] || 0;
}
}
var list = $.urlParam('list');
switch(list) {
case 1:
//insert list one into page
break;
case 2:
//insert list two into page
break;
}
</script>
</div>
<!-- END LIST PAGE -->
</body>
</html>
So when I click on the list2 link when im staying on the list1, it doesn't do anything.
Thanks for your help
You can append html data on click event of anchor tag if you are using same page
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
$.mobile.defaultPageTransition = "slide";
var href = $(this).attr("href");
event.preventDefault();
if ( event === "click" ) { return; }
$.mobile.changePage(href);
});
**PAGE-1**
<div data-role="page" id="index">
<div data-role="header"> </div>
<div data-role="content">
List 1
List 2
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /page1 -->
<div data-role="page" id="list1">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page1 -->
<div data-role="page" id="list2">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page2 -->
So I solved it this way:
First I changed the switch, which started at pageint, to a standalone function:
function displayContent(contentid) {
switch(contentid) {
case 1:
//change content
break;
case 2:
//change content
break;
}
}
Then I changed the way how I display the content:
$('#listpage-header-title').html('Alle Turner'); //change title on header
//CHANGED PART START
//check if navbar already exists
if($('#listpage-sub-nav ul').length != 0) {
//remove activestate from all active buttons
$('.ui-btn-active').removeClass('ui-btn-active');
$('.ui-state-persist').removeClass('ui-state-persist');
//add activestate to pushed button
$('[onclick*="alle_tu"]').addClass('ui-btn-active');
$('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {
//if navbar doesn't exists add html code of the navbar
$('#listpage-sub-nav').html('<ul><li>Überblick</li><li>Turner</li><li>Turnerinnen</li></ul>');
}
//CHANGED PART END
//add autodivers to listview
$('#list-page-listview').attr('data-autodividers', 'true');
//change/add data to listview
showTeilnehmer('listpageM');
//refresh listview
$('#list-page-listview').listview('refresh');
break;
Hope someone helps
Related
I have two .html pages: page1.html and page2.html
In page1.html I have a carousel
<!-- First -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 1</h2>
</div>
</div>
</div>
<!-- Second -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 2</h2>
</div>
</div>
</div>
<!-- Third -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 3</h2>
</div>
</div>
</div>
(That is the most important part)
In page2.html I have a link:
Click me to go to page 3!
What do I add to the link and my carousel to make it so this all works as it should? I found this answer but do not understand how to implement it.
Here's the code from your link I have added comments to explain what it's doing.
function getSlideParameter(key) {
/*I'm not sure why would anyone choose a key with these special characters but,
* but if they do, following RegEx will replace those special characters
*/
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
//searches the URL for occurrence of &key=some number, in case key is 'slide' it's searching for &slide=some number
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
//replaces any '+' with single space
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
//checking if 'slide' is an integer and not float and that 'slide' is not a string
if (Math.floor(slide) == slide && $.isNumeric(slide))
return parseInt(slide);
else
return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
//finally load a particular slide using qs() function
$('#myCarousel').carousel(getSlideParameter('slide'));
This function is just trying to find value of the URL's query parameter named 'slide'.
So if current url is http://stackoverflow.com?hello&slide=2 getSlideParameter('slide') would give us 2.
This code is to be added to the page where your carousel slide resides, in your case it's page 1.
Add it to the bottom of the page or using jQuery's ready() function.
<!-- First -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 1</h2>
</div>
</div>
</div>
<!-- Second -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 2</h2>
</div>
</div>
</div>
<!-- Third -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 3</h2>
</div>
</div>
</div>
<script>
//preparation of carousel
</script>
<!-- new script for loading a particular slide -->
<script>
(function () {
function getSlideParameter(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
if (Math.floor(slide) == slide && $.isNumeric(slide))
return parseInt(slide);
else
return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
$('#myCarousel').carousel(getSlideParameter('slide'));
})();
</script>
Now finally we can give the link to specific slide in page2 as below
Slide 1!
Slide 3!
That's all there is to it.
I created a multipage(data-role="page") html. In page1 i have username field when initially
fill the username it stores in localstorage and redirects to page2. It is working fine again open the app to check localstorage is present or not until hide the page1 in pagebeforeshow event so the problem occurs here the page2 is not created. How to solve this one. Here is the working Fiddle
*Note In fiddle type the text and submit then refresh the page.
Html is like:
<div data-role="page" id="page1">
<div data-role="header">
<h1>page 1 from html</h1>
<a >Go</a>
</div><!-- /header -->
<div data-role="content">
<label>Type text to store in LocalStoreage</label>
<input type="text" id="name" />
<button id="sub">Submit</button>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
Back
</div><!-- /header -->
<div data-role="content">
<p> Hi i am second page</p>
</div>
</div><!-- /page -->
script is:
$(document).on("pagebeforeshow","#page1",function(){
$("#page1").hide();
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage){
$.mobile.changePage("#page2");
}else{
$("#page1").show();
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
$.mobile.changePage("#page2");
});
When comment $("#page1").hide(); this line the page1 shows after that only navigate to page2 i don't want to show the page1 when localstorage is available.
EDIT : Set $.mobile.autoInitialize = false; before loading jquery mobile even though the page1 loads for few seconds.
Try something like this,
windows.location.href="index.html#page2"
OR
windows.location.href="#page2"
instead of
$.mobile.changePage("#page2");
So you can try this code,
$(document).on("pagebeforeshow","#page1",function(){
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage!=null){
windows.location.href="#page2";
}
else{
windows.location.href="#page1";
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
windows.location.href="#page2";
});
Hi I am trying to get the number of currently displayed posts in the content area. The number of Posts currently displayed is 3 but when I check the Length, its returning 1.
$(document).on("click", ".load-more", function() {
var currentPost = $('#postlist');
loadMore = currentPost.parent().find('.load-more');
initialPostcount = currentPost.length;
console.log(initialPostcount);
})
Current list of Posts:
Inspecting element:
<!-- Page: Blog Posts -->
<div id="blogposts" data-role="page">
<div data-role="header" data-position="fixed">
<h2>My Blog Posts</h2>
</div><!-- header -->
<div data-role="content">
<ul data-filter="true" data-filter-placeholder='Search blog posts...' id="postlist"> </ul><!-- content -->
</div>
<div class="load-more">Load More Posts...</div>
<div id='loader'><img src="css/images/loader.gif"/></div>
</div><!-- page -->
Your posts are in ul list. you need to count the length of the li's under this ul#postlist [assuming that each li is a post]
<ul data-filter="true" data-filter-placeholder='Search blog posts...' id="postlist"> </ul><!-- content -->
Change your $('#postlist')
var currentPost = $('#postlist');
with
var currentPost = $('#postlist li');
$('#postlist li') is what you are looking for,
Anyway to display some li tags while hiding some using Javascript? I'm sorry if my question doesn't make sense.
Let me write my codes here.
XML:
<array>
<words>
<name>Milk</name>
<background>Background of Milk</background>
<recipes>Recipes using Milk</recipes>
</words>
<words>
<name>Tree</name>
<background>Background of Tree</background>
<recipes>NIL</recipes> or Not Applicable
</words>
</array>
Script/Javascript:
<script>
var wordsName, wordsBG, wordsRecipes, wordsCurrent;
var wordsArray = new Array();
$.ajax({
type:"GET",
url:"words.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('words').each(function() { //find <words> in words.xml
wordName = $(this).find('name').text();
wordBG = $(this).find('background').text();
wordRecipes = $(this).find('recipes').text();
$('<li>'+threatsName+'</li>').appendTo("#testingList");
threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
})
$('#threats li').click(function(){ //li
wordsCurrent = $(this).index()
$('#description h1').text(threatsArray[wordsCurrent].threatsName);
$('#name').text(threatsArray[wordsCurrent].threatsName);
var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
$('#backgroundInfo').empty(); //empty the things inside
for (x in backgroundInformation) { //starts from zero and go to the last object
$('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
} //for loop CLOSE
var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
recipesInformation = recipesInformation("\\n"); //to clear the line
$('#recipesInfo').empty(); //empty the things inside
for (x in recipesInformation) { //starts from zero and go to the last object
$('#recipesInfo').append(recipesInformation[x]+ '<br />');
} //for loop CLOSE
})
}
</script>
Lastly, my HTML
<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Words</h3>
</li>
<li>
<h3>Not Available</h3> <!--Not Available-->
</li>
</ul>
</div>
</ul>
</div>
<div data-role="content"> <!--Start of DESCRIPTION content-->
<ul data-role="listview" id="informationList">
<li>
<h3>Background</h3>
</li>
<li>
<h3>Recipes</h3>
</li>
</ul>
</div> <!--End of DESCRIPTION content-->
</div> <!--End of DESCRIPTION-->
<div data-role="page" id="background"> <!--Start of BACKGROUND-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of BACKGROUND content-->
<p id="backgroundInfo">Not Available</p>
</div> <!--End of BACKGROUND content-->
</div> <!--End of BACKGROUND-->
<div data-role="page" id="recipes"> <!--Start of RECIPES-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of RECIPES content-->
<p id="recipesInfo"> Recipes</p>
</div> <!--End of RECIPES content-->
</div> <!--End of RECIPES-->
As the information above, the second element in the Array, Tree, does not have any information for recipe tab, how can I prompt the page when user clicks into Tree, recipe li will hides itself?
Many thanks. It's the first time I am sending a question.
Welcome to StackOverflow! You seem to be parsing XML and generating HTML dynamically using JavaScript. In your case, maybe the easiest way is to detect the condition during parsing and add a "class" attribute to your <li> nodes. Then define the style class somewhere in your CSS, like this:
<li class="no-recipe">blah blah blah</li>
<style>
li.no-recipe {
display:none;
}
</style>
Not sure what you're aiming for exactly, but a declarative approach is almost always better than a dynamic approach (using JavaScript).
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/