because of considering embed google ads into include page. I am giving up jquery.loading
(google not allow jquery ajax and jquery loading for ads, now even iframe page)
so is it possible use other javascript method for control php page include?
more explain, if my page need to including 10 pages, and I do not want they all loading in same time(such slowly for loading at same time). So I put 10 buttons for switching include page.
only click each button, loading the chosen include page to main. and click another one, loading the new one and hidden the first one.
As long as they are links google should crawl them fine, you just need to stop the link from being clicked on in javascript...
Test Page
Then your jquery...
$(document).ready(function(){
$('a.test').click(function(e){
// Load the AJAX here
// Stop the click from actually going to the page
e.preventDefault();
});
});
Related
I have two questions in mind to ask you guys here,
I'm working everyday with PHP scripts but I don't know very good javascript so my questions are:
I have script and for every navbar I'll click or button then page will refresh,
So can I get any method from you guys, how to show IMG LOADER instead reloading page?
Also per example: For button called "Update", in PHP I use /update.php?id=10 , Can I hide parameters just to be in URL: /update.php and to works like with parameter, and to show client IMG loader instead refreshing page/
Please, Just tell me methods which I can use to do them!
bro its very very easy through javascript, once just try to javascript.
you just copy paste this code, and result will showing as you want
<script type="text/JavaScript">
<!--
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
//-->
</script>
This page will refresh every 5 seconds.
2nd, Answer of 2nd Question is, if use parameters, then try to routing,
If you've read some of my previous questions you know I had a problem that I solved with iFrames. Anyways, what I would like now is to be able to update the page that the iFrame shows (it's a local page of mine) when I click an update button. How is this possible without updating the page I'm on?
Background info:
I'm on home.php where I have an iFrame. This iFrame shows the page something.php, which is one of my pages. I had to be able to update home.php without waiting for something.php to update, so the solution was to place them in two documents and then include it using iFrames (now home.php can be shown without waiting for something.php). The content of this something.php is dynamic and updates based on other webpages. Let's say the user wants to update the content of this iFrame, or the content doesn't show up. He will then be given an button "update" which will just refresh the something.php page, without refreshing home.php
Can this be done (preferably in PHP, but JavaScript/jQuery is also welcome)?
You'll have to do it with client side scripting.
Something along the lines of:
<input type="button" onclick="reLoadIframe();">
reLoadIframe(){
document.getElementById('iframeYoureTryingToUpdate').contentWindow.location.reload();
}
or
reLoadIframe(){
document.getElementById('iframeYoureTryingToUpdate').src =document.getElementById('iframeYoureTryingToUpdate').src`
}
Just provide the url in loc and this should be enough.
var loc = "http://example.com/example.php";
var frameId = "myFrame";
document.getElementById(frameId).src = loc;
I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <div> element by changing its inner html with AJAX and jQuery.
So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's innerHTML. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the innerHTML of the div.
Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, index.php?page=home will tell the PHP script to load the home page content from an external file, while index.php?page=contact will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.
My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.
My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page index.php?page=home then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load index.php?page=contact instead, preserving the look of the page and the content?
Option 1: location.hash
Easier, but not as robust. Worth taking a look at, but if you want to store the states of multiple elements, you probably want option 2.
Here's a demonstration of the code below.
Example:
function onHashChange() {
var hash = window.location.hash;
// Load the appropriate content based on the hash.
}
$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);
$('#button').click(function(){
window.location.hash = "home";
});
This way, all you need to do is change the hash on button change and handle the page load using the hashchange event.
Option 2: History API using History.js
A little harder to implement (but not much!), but infinitely more robust. Relies on a widely used framework.
Another, and perhaps a cleaner way of doing this would be to use the History API. It allows you to change window.location without refreshing the page, allowing you to handle those changes using JavaScript.
Not all browsers support the API yet though, but you could use History.js, which provides location.hash fallbacks if needed. Here's a demo.
From History.js's github page:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.
Example of History.js:
function onStateChange() {
var state = window.History.getState();
// Handle state accordingly.
// Fetch the data passed with pushState.
var data = state.data;
var title = state.title;
var url = state.url;
}
// Check the initial state.
$('document').on('load', onStateChange);
// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);
// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' }
// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");
The state name is ignored by most browsers. The third parameter is the bit that gets added to the URL.
Weeks ago I've released a jQuery plugin for this situations, when the developer wants to add ajax content to a page, and dynamically change the URL.
The plugin is jQuery Dynamic URL https://github.com/promatik/jQuery-Dynamic-URL
There is a demo here: http://promatik.pt/github/dynamic-url/
When you load ajax content, you can push a path to the URL, ex:
$.pushPath( 0 /*level*/, "contact" )
Your site instantly turns to: example.com/contact
Or in your case, you can use:
$.pushVar( "page", "contact" )
Your site instantly turns to: example.com/?page=contact
This plugin also allows you to do this:
Imagine that you give me a link for: example.com/?page=contact
In the index page, $.getVars( ) will return: {"page" : "contact"}
So with this info you can build your page based on the this queries.
There's more thigs you can do with the plugin, like listening to event onPopState (that means user went back or forward in browser, so you can rebuild your pages based on that) just try out the demo...
Important information: This plugin works in all modern browsers except IE9, witch works partially, you still can access url data like example.com/?page=contact (and build your page based on this queries) but not modify dynamically the URL during the user experience.
I have a website with functionality of jquery for navigation. I use the load() function of jquery that enables the website to be navigated without refresh. But when I hit f5 for refresh for example I am in the Contact Us page it will hit back on the index page which is the parent page. Is there a way in jquery or ajax to focus on the page loaded when hitting refresh rather than redirecting it to the index.php page?
The best way is to use some form of history navigation. pjax is a great plugin that allows you to use both real URLs and ajax loading functionality.
You could also implement it by simply changing window.location.hash when you load new content. Then when the page is loaded, you could check window.location.hash and load the relevant content.
There is an annoying bug in Firefox where navigation in a dynamically created iframe, which is then removed via Javascript, results in the inability to go back using the Firefox back button (you have to use the drop down and navigate back a further couple of pages).
I am using a form in an iframe which validates and submits data. On form submit/data validation the page in the iframe gets refreshed. This breaks the Firefox back button as above.
I need a solution to try and solve this issue and I've currently tried a few different things without much success:
Storing each iframe page refresh in a session variable (PHP) and then using history.go(-{session var}) in my jQuery code to navigate back. However this only seems to work when navigating back to the page BEFORE the iframe loaded, not the page where the iframe is loaded (in the later, it still breaks the back button)
Hiding the iframe rather than removing it - semi-works but requires multiple back button clicks and brings up the 'do you want to resubmit this data?' message
Reloading the iframe when the user has closed it. No advantage doing this as if you go back you have to still go through all the previous iframe gubbins.
Any suggestions appreciated - but please note: I want to use an iframe, do not really want to use ajax and would love a solution that is cross-browser compatible (ha!).
If you're interested, steps to reproduce this problem:
In Firefox try the iframe example which loads Google on the fancybox
homepage: http://fancybox.net/home
Search for something, i.e. load a new page in the iframe
Close fancybox frame
Try and go back without resorting to the back dropdown list
Incidentally, IE handles this scenario more gracefully than either Chrome or Firefox!
I've given up on this as have tried everything under the sun. Resorting to posting data via jQuery's AJAX methods which won't add a history item.