This seems like such a simple thing but the examples I'm finding all seem overcomplicated..
Say we have a basic Phonegap + jQueryMobile set-up, perhaps with the following structure:
<div data-role="page" id="page1">
<div data-role="header">
</div>
<div role="main" class="ui-content">
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
</div>
<div role="main" class="ui-content">
</div>
</div>
Obviously the hyperlink opens up the second page. Simple.
But if we want to pass a parameter to page 2 as part of that hyperlink, to be read via Javascript in the pageshow event, what's the correct method for this?
Just using href="?foo=bar#page2" or href="#page2?foo=bar" seems like the obvious solution to me, but window.location doesn't seem to see the parameters. Am I being thick?
I've seen examples that use onclick events to trigger a changePage() call and pass parameters that way, and I've seen regex trickery that doesn't seem to work for me, but surely there's a more proper, simple way using a traditional href?
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I Forked an NBA 2K Random Team picker from another user and was tweaking it to my needs. I am stumped on something probably simple for one of you. Thanks in advance.
When the "Randomize" button is clicked, the team "name" and "logo" display. I added a "roster" url to display as well but I want that url to be clickable in to a new tab/window. I can't seem to figure it out.
https://codepen.io/nick-c/pen/dNwMaZ
Below is just the html. I couldn't manage to post all the script and css.
<div class='container'>
<div class='title'>
<img src='http://fluidesign.co.uk/wp content/uploads/2016/12/NBA_2K17_logo.png'/>
</div>
<div class='team home'>
<h3>Home</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='roster'>Click for Rosters</div>
<div class='random'>Randomize</div>
</div>
<div class='team away'>
<h3>Away</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='random'>Randomize</div>
</div>
<div class='vs'>vs</div>
<div class='clear'></div>
</div>
You didn't "manage to post all the script and css"? Where's the difference in pasting it into a codepen or pasting it into the code snipped tool here on StackOverflow? Anyway...
You are currently just setting the link as a text in the line:
$(".home .roster").text(teams[index].roster);
But what you want to do is add it as a link:
$(".home .roster").html('Webpage URL');
Easy, huh? ;) See a working fork of your codepen here: https://codepen.io/anon/pen/xgmEOm
i think you want this
example
<div class="content-book-row-container">
<div id="content-book-container-inject">
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
</div>
<div id="content-book-row-footer"></div>
</div>
when the footer waypoint fires, even though the passed waypointrows have passed the view, they will all be re-triggered/fired off again.
How is it possible to insert new waypoints without recalling all of the previous waypoints?
This was a reply from the developer of waypoints, i thought I would share it here.
Words can be tricky for visual code problems, but I'm going to take a swing at codifying what you've described:
<div class="wrapper">
<div class="thing-container">
<div class="injected-thing">...</div>
</div>
<div class="footer"></div>
</div>
And your footer waypoint looks something like this:
$('.footer').waypoint(function(direction) {
injectNewThing();
$('.injected-thing').waypoint(function() {
alert('reached');
});
});
For the sake of simplicity, let's say injectNewThing inserts just one more injected-thing:
<div class="wrapper">
<div class="thing-container">
<div class="injected-thing">...</div>
<div class="injected-thing">...</div>
</div>
<div class="footer"></div>
</div>
The problem lies in the next line:
$('.injected-thing').waypoint(function() {
alert('reached');
});
The target, .injected-thing includes all of them. But what you really want is just a waypoint on the new ones. My suggestion is to add a class to the "things" you have already triggered the waypoint function on, and then target items that do not have that class:
$('.footer').waypoint(function(direction) {
injectNewThing();
$('.injected-thing').not('.reached').waypoint(function() {
$(this).addClass('reached');
alert('reached');
});
});
Let me know if that doesn't make sense or if I've mischaracterized the situation.
guys!
I use jquerymobile 1.3.0 and jquery 1.9.1
I have 2(more) jquerymobile pages.
For example:
<div data-role="page" id="firstPage">
<!-- Header -->
<div data-role="header">
<h3>First page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
<div data-role="page" id="secondPage">
<!-- Header -->
<div data-role="header">
<h3>Second page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
I'm need to change from first page to second page, and send some params usually URL
I tried to use this method:
$.mobile.changePage('#secondPage',
{
data: {id: 123, module: 111}
}
);
After this method, the elements on first page is hide and url is change to www.mydomain.com/main.html?id=123&module=111
but page is not change. I think in order to change the page to a URL to a hash of this page.
and the URL must be of the form
www.mydomain.com/main.html?id=123&module=111#secondPage
then i tried to use:
location.href += '?id=1234&module=111#secondPage';
This method is work )))
But when i tried go back to firstPage, page is changed, but in URL remain the data
www.mydomain.com/main.html?id=123&module=111
Then i tried delete this data using next method
location.href = location.href.replace(location.origin, "").replace(location.pathname, "");
But after this method my firstPage is looped to change.
Please help guys. How to send data to secondPage and delete this data when i going back to firstPage?
My back button used native jquerymobile method for go back.
<a data-theme="a" data-role="button" data-transition="fade" href="#firstPage" data-iconpos="notext" class="ui-btn-left backButton"></a>
P/S. I'm sorry for my english, my english level is elementary
If you define two pages in one html, you don't have to send arguments to other page with URL. Just use javascript variables and page events to use them.
If you use URL arguments to run server side code, just use different .html files. One html file, one page style.
But for smooth transition effects on mobile devices and best user experiment, i prefer using AJAX and create/change pages live,
Best regards
I'm using Jquery mobile for my mobile application. before I changing a page I want to make some CSS changes on that page. When I am setting for example adding class to id of the next page,or color change: $("#divA1").css("background-color","blue");
It change the same id on the current page (if it exist) and only then change next page. How can I set my CSS settings while on one page but load the next page with those CSS settings.
In most scenarios, jQuery Mobile loads additional pages into the DOM via ajax calls. This is a fairly fundamental part of how it works and you should insure that all markup IDs across all pages are unique.
<div id="page1" data-role="page">
<div data-role="content">
<div id="myContent1"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div id="myContent2"></div>
</div>
</div>
If your pages contain similar sub-componants, consider a class instead:
<div id="page1" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
Classes allow for selection such as $("#page1.myContent").css("background-color");
If it must be on a new page, you have three options.
You can pass a variable in the URL to test on the new page and change the CSS appropriately. eg. www.url.com?newcolor=f00
You can put a hidden form on the current page, update the values in it and pass it when you go to the next page. (Ugly way to do it but it works.)
Set a cookie. (My preferred solution, works great as long as cookies are enabled. Which, honestly, they may not be.)
However, the best option, especially on a mobile device is to keep the current framework of the page and get new content via ajax and load it into a content div on the current page.
I don't understand exactly what you're trying to do, but I would suggest you using an asynchronous ajax call to download the DOM of the next page.
Then you can apply the changes you want to that DOM, and finally you plug it into your current DOM.
An stub for that woul look like this:
$.ajax('path/to/next/page', {
async : true,
complete : function ajaxCallback(newSite) {
$item = $('YOURSELECTOR');
// Here you can make changes, such as CSS edition
$item.css({'background-color' : '#FF0000'});
// Since you want to make changes to the new site only if you did them in the first site...
if ($item.length > 0) {
$(newSite).find('YOURSELECTOR').css({'background-color' : '#FF0000'});
}
// Here you can append the new site to the DOM
}
});