I'm trying to figure out which is the best architecture for an application created with jQuery Mobile and PHP that uses multiple pages generated with PHP.
I have created two almost similar pages (as an example). Each page has one button (link) that redirects the user to the other page.
That's what the first page looks like:
p1.php
<?php
session_start();
if(!isset($_SESSION['p1'])) $_SESSION['p1']=0;
$_SESSION['p1']=$_SESSION['p1']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_1">
<h1>Page 1 counter: <?echo $_SESSION['p1'];?></h1>
<br>
<a href="p2.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r" >Go to page 2</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The page is simple and displays the number of visits the user makes on this page.
The second page is the same as the first, only counting the user's visits to it. That's how it looks:
p2.php
<?php
session_start();
if(!isset($_SESSION['p2'])) $_SESSION['p2']=0;
$_SESSION['p2']=$_SESSION['p2']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_2" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_2">
<h1>Page 2 counter: <?echo $_SESSION['p2'];?></h1>
<br>
<a href="p1.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Go to page 1</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The problem
If the user opens the first page (p1.php) and then he browsing between the two pages, he will see that only on the second (p2.php) increase the number of visits were made made. The first page (p1.php) will always display the same number of visits, even if the two pages should actually display approximately the same number of visits.
This is because of jQuery Mobile. The first page is loaded into DOM and never removed. All other pages loaded by jQuery Mobile (in this case p2.php) are loaded with ajax and doing so the PHP part is executed. But the first page (in this example p1.php) is never loaded again, so the PHP part is executed only once. That's why the number of visits on the first page is not changed.
Note that the contents of the first page isn't removed from the DOM,
only pages loaded in via AJAX. Pages inside a multi-page template
aren't affected by this feature at all - jQuery Mobile only removes
pages loaded via AJAX.
In the same way, if user hit F5 on second page, then jQuery Mobile loads this page (p2.php) as main page. In this case it will increase the number of visits on first page (p1.php) and the number of visits made on p2.php will not change anymore.
Request I need a way to modify the content of a page using PHP without the fear that user will hit F5 or refresh any page and thus this page will become the main jQuery Mobile page and this way it will never be effectively reloaded again.
Note that all pages are loaded by jQuery Mobile by using ajax. jQuery Mobile will strip any page by the header and other stuff and will only load the first DIV marked with date-roll = "page". Only the first page is loaded normally (and only once). So if you're wondering why pages have the same header (even if it's no longer loaded), that's because if the user refresh the page, it's displayed correctly (as jQuery Mobile main page).
Current approach At this time I use a modified script that is loaded on each page. This script removes any page from the DOM to force it to be reloaded when the user visits it again. THis is the script:
// delete old pages
$(document).on("pagecontainerchange.fixcache", $.mobile.pageContainer, function (event, ui) {
if ($.mobile.firstPage.is('[data-dom-cache="true"]') || $.mobile.page.prototype.options.domCache && $.mobile.firstPage.is(':not([data-dom-cache="false"])')) {
$(document).off('pagecontainerchange.fixcache');
} else if (ui.prevPage !== undefined) {
if (!($(ui.toPage).hasClass('ui-dialog') || $(ui.prevPage).hasClass('ui-dialog')) && ui.prevPage.prop("id")!==ui.toPage.prop("id")) {
$.mobile.firstPage.remove();
$(document).off('pagecontainerchange.fixcache');
}
}
});
In this way the example above works correctly.
Doubts. Is this the right way to create a multi-page application using jQuery Mobile and PHP?
Should I only use only AJAX requests as below? This will not (unnecessarily) increase the complexity of the code? (request - process request - json answer - process answer)
$.ajax({
type: "POST",
url: "request.php",
data: {...} ,
success: function(data) {
...
}
});
I think so because there are many distinct requests on a page. A page generated by PHP usually solve through a single access all necessary data. Using multiple AJAX requests will not load the server too much?
Should I use a single AJAX request that fills the entire page?
Really do not know...
Related
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.
I have 2 php files and one jquery file (2 php files include that jquery file). How to change content of 1 page by clicking button on the 2 page using jquery(without refreshing pages). for ex: on button click send div (2 page) to the div (1 page). OR maybe use 2 jquery files or any other techniques. code demonstration would be perfect. my code:
ex2.php
<script src="ex2.js"></script>
<title>Ex2</title>
</head>
<body>
<button class="show"> show </button>
<div class="showdiv"> show </div>
</body>
ex3.php
<script src="ex2.js"></script>
<title>Ex3</title>
</head>
<body>
<button class="save"> Save </button>
<div class="savediv"> Save </div>
</body>
ex2.js
$(document).ready(function(){
$(".save").click(function() {
$(".showdiv").after("<p>GGGGGGGG</p>");
});
$(".show").click(function() {
$(".showdiv").after("<p>BBBBBBBB</p>");
$(".savediv").after("<p>BBBBBBBB</p>");
});
});
AFAIK this type of "push" is only possible when you have a highly complex system involving server-side services and hooks on the receiving pages that are listening for changes to those services. This question is accordingly too broad and probably too complicated for a simple answer, as per StackOverflow guidelines.
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 working on a WP single page portfolio that loads post content with AJAX. I read that WP doesn't need #! URLs to make it crawlable by Googlebot. If I understand it correctly, since Googlebot won't interpret ajax, it will just follow the link and index the article page.
So I removed #! from my URLs and when a post is opened I update them with .pushState.It's working fine, but if I hit F5 or if I try to load a specific URL (not the home) I fall into the page of the post (single.php).
To prevent it, I added a javascript redirection in single.php that leads users to the homepage. Then I need to open the content of the article on the homepage.
Here is the address of my site: http://www.youpiemonday.com/ (the redirection isn't online yet).
How can I tell the browser "if you're coming from this page (the referrer), trigger a click on the thumbnail which href is corresponding" (the click will load the content)?
I'm digging around this but I have no idea how to target the thumbnail correctly...
<script type="text/javascript">
$referer = document.referrer; // where we come from
$LinktoRef = $('.ProjectWrap').find("a").href; // the href in the thumbnail
console.debug($LinktoRef); // still undefined...
if ( $LinktoRef == $referer ){
find("a").trigger('click');
}
</script>
Here is what the html markup looks like:
<div id="portfolio-list">
<div class="ProjectWrap">
<?php the_post_thumbnail(); ?>
<a href="<?php the_permalink(); ?>">
<div class="contentProject">
<h4 class="ProjectTitle"><?php the_title(); ?></h4>
</div>
</a>
</div>
<div class="ProjectWrap">//same as above</div>
<div class="ProjectWrap">//same as above</div>
// and the list goes on...
</div>
I'm not really a programmer so any help would be very appreciated. And if you can comment your code, that would be invaluable to me.
Because you are probably trying to reference the element before it is rendered on the page. Use document ready or window onload and reference the link there.
The code I want to run upon triggeting the redirect, is to go to another web page (or local html file, either is possible in this situation), however pass some javascript to run on that page, as that page works off embeding content in Iframes. This needs to be done to allow me to specify the content in the iframe upon redirect.
To put it simpler. How can I make it so when you go to website.com/about/, it redirects to website.com/ with the content for /about/ loaded in an iframe?
<head>
<title> CodeBundle </title>
<script>
function home() {document.getElementById("loadedpage").src="home.html";}
function about() {document.getElementById("loadedpage").src="about.html";}
function reviews() {document.getElementById("loadedpage").src="reviews.html";}
function tutorials() {document.getElementById("loadedpage").src="tutorials.html";}
function blog() {document.getElementById("loadedpage").src="blog.html";}
</script>
</head>
<body>
<header>
<br><hr><font size=27><a onClick="home();">Code Bundle</a></font><br><hr>
<div ALIGN=RIGHT>
<font size=6> | <a onClick="about();">About</a> | <a onClick="reviews();">Reviews</a> | <a onClick="tutorials();">Tutorials</a> | <a onClick="blog();">Blog<a> |</font> <hr>
</div>
<iframe id="loadedpage" src=home.html width=100% height=100% frameborder=0>Iframe Failed to Load</iframe>
</header>
</body>
</body>
this is my index.html for website.com/
I want to write a page so that when you go to website.com/about/ it redirects to website.com/ running the javascript function about(), so as to display the about page.
You will have to either pass some data using a query parameter or a fragment identifier.
See:
http://en.wikipedia.org/wiki/Query_string
http://en.wikipedia.org/wiki/Fragment_identifier
In either case you will have something present in the url and it will look like:
http://www.example.com/?page=about
or:
http://www.example.com/#about
or - this would be best:
http://www.example.com/#!/about
because it could let you make the website crawlable. See:
Making AJAX Applications Crawlable
Now after reading your comment to the answer by theredled that you "add new content regularly and loading that in embeded iframes is quicker than writing new html every time" I have to ask this: aren't you using a templating system in your website?
Keep in mind that making AJAX-loaded content and using fragment identifiers to display the right content is not done because the page creation is easier (it isn't) but because the user experience is faster and more responsive. See for example the website for the SoundJS library:
http://www.createjs.com/#!/SoundJS
When you click the link to PreloadJS at the top you go to:
http://www.createjs.com/#!/PreloadJS
The content is reloaded, the address bar changes, but the page is actually not reloaded. (You can see that it is properly crawlable because it shows in the results if you google for ReloadJS.)
Pass content by a user session ?
However, it's a quite dirty case, maybe you already know that :)