Here is my code :
$('li a').click(function() {
var link1=$(this).attr('href');
$('section:#main').load(link1);
if (link1!=window.location) {
window.history.pushState({path:link1},'',link1);
}
});
The url on the browser is changing but if the user clicks refresh on the browser it will give the url page only, not the complete one.
I use a very simple jquery plugin for this.
http://benalman.com/projects/jquery-hashchange-plugin/
Works fine and remembers the page loaded by the hash tags, ex: www.site.com/#yourajaxpagetag
Related
I found the asnwer to my question in another thread: How to load PHP file into DIV by jQuery?
the only problem i have is: i cant send someone a link with a certain file loaded into the did. its always just the home url. is there any way to include that into the url?
i used the following code:
$(document).ready(function(){
$("#artists").click(function(){
$("#content").load('urltocontent.php');
});
});
in my index.php i have a #content and everything works smoothly.
i plan on opening every content in php in that div. but when i open the page, of course the div is empty, because no link was clicked that opens content in the div. is there a way to generate an url that opens the content? so i could spread links
Assuming you are calling your page like this : http://example.com?url=page_to_include.com
You can use this code :
$(document).ready(function(){
$("#contents").load('<?php echo $_GET['url']; ?>');
});
You can use the # .. thats how its usually done in javascript. so by adding #artists behind the url.. Example:
$(function(){
$("#button1").click(function(){
$("#content").html("content of button 1. can load with ajax like you did");
});
$("#button2").click(function(){
$("#content").html("content of button 2. can load with ajax like you did");
});
$(document.URL.substr(document.URL.indexOf('#')) ).click();
})
Now go to yoururl.php#button1
A have following code:
if (isset($_SESSION['login'])) {
print("<a href=\"add-to-cart.php?uuid=". $Item->PartId ."&price=". $Item->Price."\" >Add to cart</a>");
}
I heard about Ajax(sending form without page reload, e.t.c)
So as you see I have link a href
to add-to-cart.php?uuid=someID&price=someprice
This code works, and PHP script adds to DataBase record, and navigates to this url. But I dont need to navigate to this url.
So How could I do this, executing PHP with these dynamics parameters and prevent navigating to this URL?
But how could I
You have to add a javascript click handler to the link so that users send AJAX-request instead of navigating to the URL.
Here's a snippet using jQuery (assuming that your links have lnk-ajax class):
<script>
$(function() {
// Send AJAX request instead of navigating to the link's URL
$('.lnk-ajax').click(function(e) {
var linkUrl = this.href;
// Send AJAX request
$.ajax(linkUrl).done(function(data) {
// process the result
// ... put your code here ...
alert('Success');
});
// Prevent default link behaviour
e.preventDefault();
});
});
</script>
I have an iframe on my page, where on click (a menu) will update the iframe with a new URL depending on what menuitem they select.
I do that by calling javascript function on 'onclick' passing the URL from the menu :
function frameclick(pageurl)
{
$("#iFrame1").attr('src', pageurl);
}
What i would like to do whenever they press a menuitem is to store what iframe is loaded, because i have another button (select page language) and when they press that i want to reload the page but pass on the iframe-url that is currently displayed as a variable in the site url.
Since PHP is serverside and JS is clientside, i cannot do ex. "$current_iframe_url = pageurl" - which would have enabled me to pass it on as a variable on refresh.
You know how i could get around this ?
That works fine.
What i want to do now, is to whenever they click a menuitem i want to store that URL
on every click create a hidden field save the value of url in a hidden field then only change the url. then after that you can simple submit the form using ajax .
or when ever user clicks call an ajax function so that u can copy the url in database or session what ever you like.
sample
function frameclick(pageurl)
{
$.post("server.php", { url: pageurl } );
$("#iFrame1").attr('src', pageurl);
}
your php server.php should do something like this
if(isset($_POST['url']){
//INSERT IN TO DB
}
Following fiddle used to get its URL, http://jsfiddle.net/sameerast/FUUz9/1/
Hope this also helpful,
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('src');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
})
;
I'm working on an ajax loading function on a Wordpress single page portfolio.
The principle is that when you click a thumbnail in the gallery, it opens a container (#DrawerContainer) and fetch the ajax content of this article into it. With a lot of help, I'm already able to open the drawer and load the post content when I click a thumbnail.
Here is a fiddle if you want to see it working (the ajax will not load but it works locally). http://jsfiddle.net/RF6df/24/
The part I'm working on now: I need my site to be crawlable and the urls to be shareable. If I give http://mywebsite.com/#!project5 to someone, I need project5 content to be opened when he loads the page.
I thought the hash-bang (#!) urls was the way to go to make this work. With the code below (commented on the jsfiddle), I can update the url and add the hash of the clicked thumbnail.
var pathname = $(this).find('a')[0].href.split('/'),
l = pathname.length;
pathname = pathname[l-1] || pathname[l-2];
window.location.hash = "#!" + pathname;
But when I load a page, the ajax state isn't remembered. I assumed it was because my ajax container was only loaded on click event, but there is no change when I add a persistant container in the php.
Is there a way to load the page with a post content already displayed, or to open the #DrawerContainer when the page is loading a hash-bang url?
Please keep in mind that I'm just learning jquery and ajax. So I'd really appreciate if you explain or comment a little bit what you do, I'll for sure learn at the same time... :)
on onload you should check the window.location.hash and trigger a click on the particular link/div.
$(document).ready(function() {
var hash = window.location.hash;
if ( hash.length > 0 ) {
hash = hash.replace('#' , '' , hash );
$('a[rel="'+hash+'"]').trigger('click');
}
});
I have used the following on sites where I want to trigger via hash changes.
First I bind a hashchange event to get the hash value
$(window).bind('hashchange', function(o){
url = window.location.hash.substring(1);
o.preventDefault();
if (!url) {
return;
}
}
Then I trigger the hashchange when I want - in your case when the page loads i.e. on document ready.
jQuery(document).ready(function($) {
$(window).trigger('hashchange');
});
You can then use the hash value in your function that loads the correct content
Okay, i have a job to do before tomorrow morning..
i'm working on some jquery.
Where i load some external file data..
What i really want to know, is how am i going to load some data when i $.post / or $.get some data through jquery
Send request into jquery hey
and the same time change the url browser to ex. mywebsite.com/prices/ without making the refresh on the page
is it possible, and how to do ?
// edit (not working)
<li> <span>prices</span></li>
jquery: $('a.prices').click(function(e) {
e.preventDefault();
$.view.show('prices');
});`
but can see that some of the others samples are not that easy to make it work..
You can do it like this:
hey
$('a.priceLink').click(function(e) {
e.preventDefault();
$.view.load('prices');
});
When the user click the link, the normal URL will be shown on the browser line, but won't get visited (because of preventDefault) and $.view.load('prices'); will thus load in that content without refreshing the page.
EDIT: #William - please try this:
<li><span>prices</span></li>
$('a.prices').click(function(e) {
e.preventDefault();
$.view.show('prices');
});
You can use a jQuery plugin called URL Utils - there's also a great screencast that shows you how to use it.
As far as I know, you can only change the url for the anchor part (www.url.com/#anchor), and nothing else (without a browser refresh). Perhaps you can use SWFAddress for your purposes?
i found the solution!!
http://nix.lv/history/demo.html
took me about 10min to install, and it just work perfectly..(i did some mod )
solution:
<li><span>prices</span></li>
jquery(download the plugin at the link above):
$.history.init(pageload);
// PageLoad function
function pageload(hash) {
// hash doesn't contain the first # character.
if(hash) {
$.view.show(hash); // load pages
} else {
// start page
$.view.show(load_from_start);
}
}
try it.. :)