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
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 have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.
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?
I'm generating pages dynamically in jQueryMobile, but I can't understand why the new generated page is not updated to the last version.
This is the use case:
Page A contains a list of 'a' elements. When I click one, the app redirects to a new page that is generated dynamically. Then I go back to page A. I click another 'a' element, but from now on, the app will always redirect to the first page that was dynamically generated.
Please look at this fiddle:
http://fiddle.jshell.net/cqUrD/
This is my code:
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>static page</h1>
</div>
<div data-role="content"> Create new page
<div data-role="content"> Create another new page
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
jQueryMobile:
$(document).on('click','a',function() {
nameId = $(this).attr('id');
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content"> Last id was: '+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
//alert(nameId); this prints the right value
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
How can I solve this problem? I need to always show the updated version of the new page.
Thanks in advance!
Working example: http://jsfiddle.net/Gajotres/Xfh8p/
Before new page is created previous one must be removed. In this case a DOM was filled with new pages but first one was still there and because they all had same name that first one had a priority.
Also when binding a click event don't bind it to a tag only, this was also a problem. Each time return button was pressed another page was created in DOM.
All in all this will work:
$(document).on('pageinit', '#home', function(){
$(document).on('click','#createfirst, #createanother',function() {
nameId = $(this).attr('id');
alert(nameId);
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
});
$(document).on('pagehide', '#page', function(){
$(this).remove();
});
In this case pagehide event has been bound to dynamically created page. Because it is bound to the document object it will still be there when page is removed. It tells jQuery Mobile to remove page #page during the transition from it.
As you can see I have used jQuery Mobile page events to trigger a page removal. If you want to find more about this topic take a look at my other ARTICLE (my personal blog) or find it HERE.
When you are clicking the button second time, the page with same ID is already in DOM so I think jQuery is unable to create a second one with the same ID (maybe caching). I changed the code a bit. You need to remove the #page if it already exists.
if ($('body').find('#page').length != 0) $("#page").remove();
Link: http://fiddle.jshell.net/cqUrD/1/
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
}
});