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.. :)
Related
My goal: I have a form that is in parts, 1-4, when the user clicks on the "Next" button I would like the content to animate out then part 2 slides, and so on until the form is complete. The tricky part is I would am trying to use a different php page in a different subfolder to insert as the other 3 parts. This would also change the URL subfolder the user sees.
The working example is actually WordPress. When you click through the multi-part form you will see the content and the URL act as I have described.
I did a bit of digging and it seems like they used React.js on the content but I couldn't really find any documentation on how to do this with React.js so it made me think that maybe it was custom Ajax/jQuery or what.
My Trees of Folders -
Main
Subfolder-1
index.php
Subfolder-2
index.php
And so on. The only thing I could think of would to use jQuery:
$(document).ready(function() {
$('#form-container').on('click', '.insert', function() {
var directory = $(this).attr('name');
$('#form-container').load('../' + directory);
return false;
});
});
I add the class of "insert" on the "Next" button and give it a name="Subfolder-2" $('#form-container').load('../Subfolder-2);' will actually load the content into the div without the page refreshing BUT it does not change the subfolder in the URL.
Am I on the wrong track? Maybe I am just not searching for the right thing?
Ok, so I ended up figuring out how to get the content to act like I wanted with the information John S. provided me. After doing some research and a few hours of trial and error I came up with the JavaScript below:
var data = 'start',
url = '../' + data + '/';
history.pushState(data, null, url);
Above I set the variables and immediately run a history.pushState on page load to capture the first div that is loaded into the content div. This is important because it is the only way I could load the content that happens on initial load back into the page when hitting the browsers back button.
$('body').on('click', '.insert', function(e) {
data = $(this).attr('data-name'),
url = '../' + data + '/';
history.pushState(data, null, url);
request_content(data);
return false;
});
Then I add a click listener to the button with the class .insert reset the variables so instead of grabbing the page that initially loaded it grabs the page that will be loaded, then use history.pushState again to change the url that is determined by the variables.
The request_content function is a simple .load function. So when the button is clicked the variables are set, the url changes and the new content get loaded into the page while the old content disappears.
The final piece to the puzzle which took me the longest to figure out is actually the popstate function. I am still not 100% sure why it works but after hours of messing with it and finally getting it to work I am not going to question it.
window.addEventListener('popstate', function(e){
var data = e.state;
if(data === null) {
} else {
request_content(data);
}
});
This popstate function is what allows the content to come back when hitting the browsers back or forward navigation.
CSSTricks < this article at CSSTricks helped a TON when learning this method.
Thanks again to John S. for pointing me in the right direction!
I know this has been asked on SO a lot, but I have trawled through the posts for a few hours now and nothing works.
I'm working on a Wordpress blog where the prev/next buttons on a single post page have to load the prev/next post by Ajax. I have written the code (jQuery Ajax) all fine (I think - if you want to improve it, be my guest!), but in each post there a few bits of jQuery that need to work. However, after I click either of the prev/next buttons to move between posts, the jQuery won't work (it works absolutely perfectly when the page is first loaded). I know this is due to the content not being 'connected' to the JS anymore but I'm not sure what to do about it.
Here is my code:
$(".page-feed").on('click', '.post-nav>a', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var link = $(this).attr('href'); // get the value of the href attribute on the links
$(".post-content").html("Loading...");
$.get(link, function(result) {
$result = $(result);
$content = $result.find(".post-content");
$(".post-content").replaceWith($content);
}, 'html');
});
I know that you're probably going to ask what I've already tried, but if I'm honest, not a lot that would be worth putting here.
The code above is located right at the top of a file called script.js, with all the other JS below it (which doesn't currently work after the Ajax call). The script is started by the standard $(document).ready(function() { statement.
Thanks for any help :)
First, you need to accept the event object as an argument.
$(".page-feed").on('click', '.post-nav>a', function(event) {
Next, by using the jQuery event object, you can simplify the next line because event is normalized by jQuery to work cross-browser.
event.preventDefault();
Now, as far as it working on the first click but not after, that's likely because .page-feed is a dynamic element. You'll need to instead select an element that is an ancestor of .post-content. document is a decent replacement, but it would be better if you picked one more local.
$(document).on('click', '.post-nav>a', function(event) {
So I'm not really sure how to explain this, so I will just provide an example. I'm using fullCalendar jquery calendar to populate events in a calendar on my page. fullCalendar has a method called 'eventClick' which you can then run some code.
Basically I'm trying to go to a page on my site (the event page) when clicked and passing it the URL like so:
$('#calendar').fullCalendar({
events:array,
eventClick: function(event) {
if( event.url ) {
window.open(event.url);
return false;
}
}
});
event.url is a string that I'm pulling in from Wordpress and is displayed like so:
http://sitedomain.com/?post_type=events&p=340
The Problem
When I click on an event, the URL gets encoded differently and displays like this:
http://sitedomain.com/?post_type=events&p=340
where & gets replaced with & which then obviously doesn't go to the correct page on my site. I rewrote my click method like so but I still get the same results -
$('#calendar').fullCalendar({
events:array,
eventClick: function(event) {
var page = event.url;
page = page.replace('&', '&');
if( page ) {
window.open(page);
return false;
}
}
});
Anyone have a solution?
Thanks,
Well I feel stupid.
I guess I failed to mention that I was using window.location.href whereas in my example question I was using window.open.
The problem was that I was getting the syntax incorrect for window.location.href using it like so:
window.location.href(event.url);
instead of
window.location.href = event.url;
Reminder to get your syntax right and then things will work like you think they are suppose to... :) Thanks for the help all.
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
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