Develop Reference

How to keep elements non-refreshed

The main goal is to keep non-refreshed the logotext <div class="small-7 medium-4 columns logo"> and the menu <nav class="pagedMenu" role="navigation">,without clipping on page refresh or while the content is loading from a page to another. Also, the menu state should be preserved from a page to another.
I've found here a possible solution that could solve the problem (you could use ajax to fetch the updated content and use jQuery to put the new content on the page and avoid the refresh entirely. Doing it that way, the existing data in the page would remain untouched. said #jfriend00)
So, I have tried to use an Ajax plugin (called AWS). In the AWS option page, I (suppose) that I've done the right thing pointing wrapper as Ajax container ID and also pagedMenu as Menu container class, Transition Effect Enabled, No ajax container IDs blank, no loader selected, having already a pulse loader implemented in the theme.
At this point, all I got it's a menu / side-menu (shiftnav) / pulse dot loader / content loading malfunction, generated perhaps by the wrong defined Ajax container id and/or menu container class(?) OR by a conflict with an existing JS / jQuery code, not so sure.
Also in Chrome console there is an error:
Uncaught SyntaxError: Unexpected token ;
(anonymous function) # ajaxify.js?ver=4.3.1:175
n.extend.each # jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each # jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success # ajaxify.js?ver=4.3.1:169
n.Callbacks.j # jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith # jquery-2.1.4.min.js?ver=2.1.4:2
x # jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b # jquery-2.1.4.min.js?ver=2.1.4:4
Everything is getting back to normal on page refresh but doesn't help at all, being useless.
I also have to mention that for the menu I've tried to keep the state using jQuery-Storage-API and storage=jQuery.sessionStorage; as you can see in mynewmenu.js file but that will not solve the non-refreshing elements problem.
The menu jsfiddle only, if this helps to have the whole picture, here thanks to #Diego Betto.
You can use this live link as example; there is a similar situation with the above described - Ajax implementation right(?) - and regarding the appearance, menu is kept non-refreshed from one page to another; if you browse Books, Works etc, menu sections you'll see; if there is a model that could be implemented here, I'll be glad to find it.
LE: meanwhile, I've tried another ajaxify solution made by #arvgta - special thanks - without success yet but as far as I've found from the Author, the defined elements should be div's with id's not classes. So, I'll try to find a way to modify somehow the code in order to have id instead on classes.
Also, I'll try to transform and implement in ajaxify.min.js file, the page-container element; jQuery('#page-container').ajaxify(); I'll come back with news.
LE2: I've tried to implement the solution using id's instead of classes but still, the pages are not loading correctly.
At this point we have ajax.min.js file updated with these lines:
(function($){
jQuery(document).ready(function(){
jQuery('#page-container').ajaxify({requestDelay:400,forms:false});
});
})(jQuery);
Also, I've modified the theme file to have id=page-container instead if class=page-container.
In these conditions, on menu click, the links are changed (like it should), menu/ logotext elements seems to working almost fine (sometimes get skippy changing position), but the content is not loading correctly in all cases; Same here, everything is getting back to normal on manual page refresh (f5), but doesn't help.
LE3: It looks like the conflict is (at least) between Revolution Slider plugin and Ajaxify.
errormessage="Revolution Slider Error: You have some jquery.js library include that comes after the revolution files js include." ;="" +=" This includes make eliminates the revolution slider libraries, and make it not work." "<="" span="">"
Site live link here. Any thoughts / alternative in this area? (not interested in using other different platforms, different WordPress themes, etc. just a workaround in this existing situation)
LE4: As far as I can see, there are many users that voted up the Jake Bown answer that could be indeed a solution; but I can't find the reason that didn't work correctly implemented into my theme (without errors) live link here The elements logotext / menu are still fading on refresh, are not kept non-refreshed. Any thoughts #Jake Bown / anyone?
LE final.
Buzinas delivered the closest answer for my needs, taking in consideration my site environment (plugins installed, etc).

From what you said I think I might have found the solution you're looking for - you want to load content dynamically whilst keeping the logo and navigation untouched? If so, this might be what you're looking for.
In the example, the pages are loaded in from a div within the page but could be used to load another URL or file:
$('.viewport ul li a').on('click', function(e) {
e.preventDefault();
var link = this.hash.substring(1, this.hash.length);
if($('.'+link).length) {
$('.viewport span.body').html($('.'+link).html());
}
});

TL;DR
I've created a plunker for you, take a look, and play with it as long as you can. You'll learn a lot from it!
I think you're trying too many things here, but didn't try the simplest:
The main goal is to keep non-refreshed the logotext and the menu ,without clipping on page refresh or while the content is loading from a page to another. Also the menu state should be preserved from a page to another.
If you want to do that, there are a few steps:
Create a 'master' page, that we're going to call index.html from now on.
So, our index must have the static part of our page, e.g menu, logo, footer etc.
Then, our 'subpages' must be cut down (no html, head, body, script, style tags, only the content that should be showed into our master page).
That done, now we must change our links to use AJAX instead of doing full refresh:
/* we add a 'click' event handler to our menu */
document.getElementById('menu-menu-2').addEventListener('click', function(e) {
var el = e.target;
/* then, we see if the element that was clicked is a anchor */
if (el.tagName === 'A') {
/* we prevent the default functionality of the anchor (i.e redirect to the page) */
e.preventDefault();
/* we show our spinner, so the user can see that something is loading */
spinner.classList.remove('hidden');
/* and we call our AJAX function, passing a function as the callback */
ajax(el.href, function(xhr) {
/* we get our main div, and we replace its HTML to the response that came
from the AJAX request */
document.getElementById('main').innerHTML = xhr.responseText;
/* since the request was finished, we hide our spinner again */
spinner.classList.add('hidden');
});
}
});
Ok, now our pages are already working via AJAX, and not reloading our static content.
But now, we see that we have some issues. For example, if someone tries to open one of our pages directly via URL, he'll see unstyled page, without the menu/logo etc. So, what should we do?
We have a few more steps now:
Simulate that our links are effectively transfering between pages using the History API:
/* inside our ajax callback, we save the fake-redirect we made into the pushState */
ajax(el.href, function(xhr) {
document.getElementById('main').innerHTML = xhr.responseText;
/* save the new html, so when the user uses the back button, we can load it again */
history.pushState({
html: main.innerHTML,
title: el.textContent + '| neuegrid'
}, '', el.href);
/* (...) */
});
/* and outside it, we add a 'popstate' event handler */
window.addEventListener('popstate', function(e) {
/* so, if we've saved the state before, we can restore it now */
if (e.state) {
document.getElementById('main').innerHTML = e.state.html;
document.title = e.state.title;
}
});
And we need that when the user enters directly to another page, e.g about-us, we redirect him to the index.html, and then load the about-us page from there.
So we create a redirect.js file, and we reference it in all of our
subpages:
/* save the page that the user tried to load into the sessionStorage */
sessionStorage.setItem('page', location.pathname);
/* and them, we redirect him to our main page */
location.replace('/');
And then, in our index.html page, we see if there is any page in the sessionStorage, and we load it, if there is, otherwise we load our home page.
var page = sessionStorage.getItem('page') || 'home';
/* we look into the menu items, and find which has an href attribute
ending with the page's URL we wanna load */
document.querySelector('#menu-menu-2 > li > a[href$="' + page + '"').click();
And that's it, we're done now. Take a look at the plunker I've been making to you.
And play with it as long as you can, so you'll learn a lot from it.
I hope I could help you! :)
Note: Just for reference, this is our ajax function:
function ajax(url, callback, method, params) {
if (!method) method = 'GET';
var xhr = new XMLHttpRequest();
xhr.open(method, url);
if (callback) xhr.addEventListener('load', function() {
callback.call(this, xhr);
});
if (params) {
params = Object.keys(params).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
xhr.send(params);
} else {
xhr.send();
}
}

GOING AJAXED WITH WORDPRESS
demo: http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/
follow these simple steps (let's take as example theme "twentyfifteen" on the WP templates folder):
edit single.php, page.php, index.php and all other pages having get_header() and get_footer() functions and replace it respectively with below code:
NOTE: this is important because if someone (ex: search-engine) reach your pages directly from the link, it is still fully available and 100% working. (useful for SEO)
<?php
//get_header()
if(!isset($_REQUEST['ajax'])){
get_header();
}
?>
<!-- other code --->
<?php
//get_footer()
if(!isset($_REQUEST['ajax'])){
get_footer();
}
?>
open the header.php add the below code inside the <head> section at the very end
<script>
!(function($) {
$(function() {
$('.menu-item a, .widget-area a, .page_item a').on('click', function(e) {
e.preventDefault();
var href = this.href;
var query = href ? (href + (!/\?/g.test(href) ? '?' : '&') + 'ajax=1') : window.location;
/* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
/* ex: kill instance of running plugins */
$('#content').hide().empty().load(query, function() {
/* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
/* ex: refresh or run a new plugin instance for this page */
jQuery(this).show();
});
});
});
})(jQuery);
</script>
in the header.php file put the code below at the end of the file, 90% of times you need it under the navigation. In this case we already have this on the "twentyfifteen" theme.
NB: most probably you have the opening tag <div id="content" class="site-content"> inside the header.php file and the closing tag </div> on the footer.php file, this doesn't matter, you can leave it as is.
<div id="content"></div>
NOTE: consider this a proof of concept; it may work as is, but you still need to tailor it to suit your needs; you may need to:
Add a menu (in case it is not already set) by going under Appeareace > Menus > [check Primary Menu] > Save Menu in order to activate the menu. it's tested and working.
You may want to add some other class to the jQuery function like .widget-area a in order to ajax also widget links.
if you are using 3d party plugins you may need to ensure that all dependencies of each plugin are loaded also on the main page from where you want everything is displayed without refreshing content.
you may need to check and kill those 3d party plugin before a new page load and run or refresh plugin needed in the loaded page.

How do i load a HTML page off screen and then slide it into view?

I have a small digital signage web application where all the pages shown is created in HTML and stored in a database.
I need to make some sort of player that will display all my slides. I have a URL to call that gives me the next page to show: http://example.com/PlayNext This will return the next slide in the given context.
Right now i just have a timeout that will reload the page every 10 seconds. I want to make a much more smooth experience with the player, and load everything from client, without postbacks to server.
So what im thinking is to load the next page in an off screen tag and when thats loaded, slid it into view, and then start loading the next slide off screen. When the show duration has passed, then slide the next page into view and start loading the next one, etc.....
What im wondering is how actually to do this off screen loading thing. I know i can set overflow to be hidden and just place it 3000 px off screen. But how do i make the continuous flow that will allow me to show all the pages i want ?
And a side note - how do i clean up the divs when they no longer should be in use? so that my browser isnt leaking memory?
edit
This is the current "player", it is ASP.NET Razor syntax to show the next page url etc. this is what i want changed to load it in an off screen div:
<script type="text/javascript">
var duration = #ViewBag.Duration;
var nextPage = "#ViewBag.Address";
window.setTimeout(reloadbrowser, duration);
function reloadbrowser()
{
var path = $.ajax({
url: "/page/Ping",
success: success,
error: reloadbrowser,
timeout:5000
});
}
function success()
{
window.location.href = nextPage;
}
</script>
</head>
<body style="height:100%">#Html.Raw(ViewBag.BodyXHTML)</body>
</html>

if the url http://example.com/PlayNext is a url which retrieves the html from the database then these are the steps you should take:
1. you need to get the html from the database using ajax()
2. load that html inside an iframe
3. position that iframe outside of viewport (position:absolute; left:-100%;)
4. after the iframe is loaded, slide it inside the viewport and the old one outside and then remove() the old one
so you'd come up with something like this:
$(function(){
function getData(){
clearTimeout(window.theInterval);
$.ajax({
url: "http://example.com/PlayNext",
type: "POST",
timeout:5000,
success : function (databack) {
var iframe=$('<iframe>'+databack+'<iframe/>', {
style:'position:absolute; left:-100%;',
load:function(){
var that=this;
$(this).animate({
left:0
},500);
$('iframe').not(this).animate({
left:'-100%'
},500,function(){
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
window.theInterval=setTimeout(function(){
getData();
},10000);
},
error:function(jqXHR, status, message){
getData();
}
});
}
getData();
});
NOTE: you must build on this answer to match your project
why use an iframe and not a div
I'm gonna quote some benefits of using an iframe for loading websites inside another one from this answer
1) Iframes implement the cross domain origin policy (images, scripts, and styles do not). This can be useful for pulling in sites / content from other domain names relatively safely. Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do).
and the next thing is:
2) You can send multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well).

JQuery tools :: Unable to load AJAX content in second tab

jQuery Tools v1.2.7
Issue:
Currently handle three tabs, which content is loaded via AJAX call to a PHP controller (MVC).
The first tab loads a simple HTML file returned by the controller.
The second tab loads two different files, called by parallel AJAX calls (left panel and right panel). Things work well here.
The third tab does pretty much the same, but the problem is that THE RIGHT PANEL DOES LOAD UNLESS THE ENTIRE PAGE IS RELOADED, THEN ALL TABS WORK FINE
Something to notice is that when I switch from tab 2 to 3, the right panel does not show up, I then go back to the previous tab 2 and now the panel which was supposed to appear on tab 3 is showing on tab 2.
I have done my research, but everything points to JQuery UI, I am using tools. I need a way to either refresh the tab on each transition or avoiding the kind of "overlap".
I have tried redesigning the site, but the issue still happens.
If any code is required let me know.
Thanks in advance.

Thanks for looking into this:
Home (where tabs are loaded):
<ul class="css-tabs">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="css-panes">
<div id="dynamic-pane"></div>
<div id="dynamic-pane"></div>
<div id="dynamic-pane"></div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div.#dynamic-pane", {
history: true,
effect: 'fade',
onBeforeClick: function(event, i) {
var pane = this.getPanes().eq(i);
pane.load(this.getTabs().eq(i).attr("href"));
}
});
});
</script>
The second tab, is loaded with content from the controller2 via JQuery tools "href" method. Then, such content is an HTML file with a JS which makes another AJAX call:
<script src="../js/secondTab.js"></script>
<script>$(document).ready(function() { showLeftPanel(); showRightPanel(); }); </script>
<div id="dynamic-content-left"> </div>
<div id="dynamic-content-right"> </div>
The JS script includes something like:
function showLeftPanel(){
$.ajax({
type: "POST",
url: "controller2/showLeftPanel",
contentType: "html",
success: function(response) {
$("#dynamic-content-left").html(response);
}
});
};
function showRightPanel(){
$.ajax({
type: "POST",
url: "controller2/showRightPanel",
contentType: "html",
success: function(response) {
$("#dynamic-content-right").html(response);
}
});
};
The reason for this, is because this project has smarty and the render() method is used to return the "piece of HTML code" to complete the page.
THINGS WORK FINE HERE, BUT WHEN I GO TO THE THIRD TAB ONLY THE LEFT PANEL IS DISPLAYED AND I HAVE TO RELOAD THE PAGE TO FIX IT, E.G, THE RIGHT PANEL SHOWS UP
I think the issue may be related to the way the tabs load the content and the fact that AJAX does not load the content in the second tab since it "$(document).ready(function({});" was already loaded in the previous tab (tab 2). Once I reload the page, the document is refreshed and then a new AJAX called is performed.
Hope it makes sense.
P.S The same process applies for third tab, same scripts structure. What changes is the content of the HTML files (web content).

I resolved the issue.
Summary:
use of unique ID's for each div.
use of unique id's for each HTML input, since AJAX was not getting the correct values.
All seems to be working fine with this implementation now.

Remaining the same state of a webpage

So I've made a web app, image below. The app has several tabs which contain different information such as graphs and indicators. The app is made using HTML & Javascript and is one document. I have implemented a Javascript timer which, every 60 seconds, loads the exact same webapp but in a different HTML document, just with different values for the graphs etc. This was just to make it easy for me as i don't have a lot of time at the moment. So every minute the web apps graphs will refresh with different data coming from a different document. So basically i have index.html, index2.html and index3.html, all with the same code/webapp but loading different values into the graphs. Heres the code for the timer:
<script type="text/javascript">
var myVar=setInterval(function(){myTimer()},60000);
$(function () {
});
function myTimer()
{
window.location.replace("index2.html");
}
</script>
The only problem with this is that when, for example, index.html reaches 60 seconds and loads index2.html it goes back to the very first tab (Summary), is there anyway to remain on the same tab even though it's loading a different document?

As #JoshuaM pointed out, the best solution would be to use AJAX, but since you seem mostly satisfied with your current method, you could use a hash on the URL to indicate which tab should be active, e.g.:
index.html#/metrics
index2.html#/metrics
etc...
(I like to put in a leading slash for this sort of thing to distinguish it from a regular anchor link or unexpectedly jumping to an element with the same ID, but in a simple case like this, index.html#metrics could work just as well).
The link for the metrics tab would look like this:
Metrics
(Keep whatever Javascript you have set up on it to make the tabs work.)
Then, when loading the next page, append the hash to it:
var nextPage = 'index2.html';
window.location = nextPage + window.location.hash;
Finally, check for the hash when first loading a page:
var hash = window.location.hash;
//hashes indicating which tab to make active should begin with a slash, e.g. #/metrics
if (hash[1]=='/') {
var currentTab = hash.substr(2);
//activate current tab...
}
Another alternative would be to use an iframe for the graph content but that would probably require more reworking of your code.

How to realize screens / views with JavaScript / Jquery easily?

I'm sure I'm missing something pretty basic, but I have just started to get myself up to speed on jQuery and Javascript programming. Previously I was doing server side programming with PHP.
I'm now in the middle of creating a prototype for HTML5 webapp, where I would like to have different screens. Now with PHP that was pretty easy, I could just used server side templates like Smarty and be done with it.
However to make my app more webapp like, I would like to dynamically change between screens without having to reload the window.
I have looked into several options that might be anwsers to my question, but I'm not sure whether I'm on the right track.
I have checked for example JsRender, JsViews or even the pure jquery load command.
But what I'm not sure is whether these things would allow me to have something like this:
HEADER_PART
MAIN_CONTENT
FOOTER_PART (also contains links to common JS files that I use)
I would like to dynamically update the MAIN_CONTENT part. Currently my application is only one page, and all my custom logic that belongs to that page is in one JS file. In this JS file, I use a simple $(function() { ... to load my page, so whenever it gets loaded, parts of my page get updated asyncronously. This is fine, since all my blocks in this certain page would have to be loaded when that one page gets loaded.
But what if I have a link, like main.html#otherscreen, and when I click that screen, I would like to change my MAIN_CONTENT and also run another page load specific JS that handles blocks on that other screen, not the first page?
I know I could still use probably server side templating and load my pages using AJAX requrests, but again, not sure whether that is the right approach.
Could you please enlighten me? :)
Thanks & best regards,
Bence

Check out jQuery.load(). Using this function you can dynamically load content into a div on the page, which is what I think you want to do. Just find the div on the page you want to load content into and call
$('#mydiv').load(url, data, function(response){
//do something once it's done.
});
Per your comments...
This is actually very easy. .load() should replace the content in the div (I think. If not, just call .empty() first). Of course you could get fancy and add effects, like
function changePages(url) {
$('#mydiv').fadeOut('fast', function() {
$(this).load(url, function(response){
$('#mydiv').fadeIn('fast');
});
});
}
To handle things like the hash in the URL, in your click event you have to make sure you first call e.preventDefault():
$('#mylink').click(function(e){
e.preventDefault(); //e is a jquery event object
var link = $(this);
var hash = link.attr('href'); // get the hashtag if the href is '#something'
changePages(someUrl + hash);
});

For dynamic loading of data into the page without changing your header and footer you should use jQuery's AJAX function. It allows you to post requests to the server and receive data back without reloading the page. A simple example would be something like:
<html>
<head>
<title>Example</title>
<!-- Assuming jQuery is already referenced -->
<script type="text/javascript">
$('span.buttonish').click(function(){
$.ajax({
// The URL can be a file or a PHP script of your choosing
// it can also be pure HTML without the <html> tags as they
// are already in your file
url: 'path/to/the/file/that/return/data',
success: function(receivedData) {
// The received data is the content of the file or the return
// data of the script and you can use it as you would with any data
$('#content').html(receivedData);
}
});
});
</script>
</head>
<body>
<div id="header">
<!-- Something -->
</div>
<div id="content">
<span class="buttonish">Click me to change the text... </span>
</div>
</div id="footer">
<!-- Something -->
</div>
</body>
<html>