I am looking for a way of replicating what the site in the title of this question does. That is, via ajax, changing a part of the page. But, I could not figure out how to change the URL as these things happen.
So, please, help me achieve the effect of url changing on ajax page/change.
Thank you.
(edit ** question rewritten as is appears it was not written well enough, sorry)
What you are looking for is AJAX basically updating only parts of a HTML page. Please google for AJAX tutorials. Here is a simple one
Something like Jquery Tabs also do this.
It seems like you want the URL to change. This is the basic trick to have history for ajax pages
Related
I'm really confused.
I just desire to implement ajax in my wordpress site: clicking on each link of the menu or on each post, I'd like to show dinamycally the content in the main wrapper of the website (and at the same time I'd like to see the url changing everytime for each page or post).
I have made a research through Google and I found a multitude of tutorials or informations but each one of them is (for me) like incomplete.
Can you suggest me a good tutorial?
Or can you explain me what are the best solutions?
I read somewhere of "Ajaxify", a plugin, can it help me?
Be patient, I have always had some difficulties with ajax and in wordpress things seems to become even more complex.
I guess this tutorial can help you: http://www.designlunatic.com/2011/06/dynamically-load-wordpress-posts-with-jquery/
I'm working on a Wordpress site which displays posts through a JSON api and AngularJS. I render all post thumbnails on a page and when one is clicked the post is rendered in an overlay on the same page. The post url becomes something like mysite.com/#!/post-name.
Here's the development page http://givakt.kund.griffel.se/blogg-jobb/
Since everything is fetched by AJAX calls none of this info is available to search engines. I have tried to figure out a good approach to make it indexable but it's all very new ground to me.
Would it be possible to get content from or redirect the search engine to a php-rendered (wordpress) page, say like mysite.com/post-name, while thinking it's getting the correct content at mysite.com/#!/post-name. Is it even allowed or even frowned upon? The actual content would of course be as identical as possible at both sources.
Not sure if this is legit approach however, or if it could even work. Is there any other easier or preferred approach that I'm missing?
BTW, I have read http://www.yearofmoo.com/2012/11/angularjs-and-seo.html and how to use PhantomJS and so on to provide indexable pages. So what I'm basically asking is if there's a way to utilize wordpress pages to serve the content instead.
I'm not exactly sure how to do it in terms of technicalities, but Google is usually not happy if you show one version of the page to search engines and something else to actually visitors. It's called cloaking. Just keep it in mind.
I have a small problem that seems to be big enough to hold me from my work.
As I said in the title, I am leaning Yii and after I developped my project, I realized that I don't have ajax check.
I tried to solve this by setting enableAjaxValidation to true and it didn't worked. I tried to make use of the method performAjaxValidation and, again, it didn't worked. The third way was to copy the content of performAjaxValidation and paste it inside my method (like in documentation and identical with the code generated by Yii.
I checked my js and they are loaded.
What could it be? How can I solve this? The problem is that I need my fields to modify while the user is completing the form.
Thank you!
PS: I checked some topics from stackoverflow but the only one who was related was Yii - Ajax Form with validations
Make sure the from that is being validated has the same ID that is being used in the performAjaxValidation function. For example if your form has the id product-form, the if statement should look like this:if(isset($_POST['ajax']) && $_POST['ajax']==='product-form')
If possible I recommend using Firefox with firebug extension so that you can debug whether the AJAX call is even being made, and what is being returned.
I am starting to set up a personal website, and I would like it's layout to look something like
-------------------------------
- Page Header & Menus Go Here -
-------------------------------
- Main Contents -
-------------------------------
- Footers -
-------------------------------
The main question is that I would like it to be a single-page interface in which the main contents are loaded and displayed with a combination of AJAX and jQuery to produce a nice effect. However, I would, of course, like to have the contents bookmark-enabled and indexed by search engines. I have skimmed throught the Single Page Interface Manifesto which explains some nice ways of achieving this, but I wouldn't really like to have my URLs like
http://www.mysite.com/index.php#!section=section1
http://www.mysite.com/index.php#!section=section2
I would, of course, like to re-write them as
http://www.mysite.com/section1
http://www.mysite.com/section2
My questions are this whether this approach is correct/doable and if AJAX URLs are compatible with URL rewriting. What URLS would be indexed by, say, Google anyway?
If you want your page to work without reloading and update at the same time the page's URL, the only way to archieve this is by changing the hash in the URL (location.hash = 'whatever').
URL rewriting cannot be used since the hash is not sent to the server, it's only available in the browser's scope.
Check Facebook or Twitter URLs. They are prettier than #!section=section1 but still need the hash.
Cheers.
If you want to load different content/tabs/some content of page without reloading browser,
Now It is possible with pjax..
you can use something like http://padrino-pjax.heroku.com/
you can try it, go to the link and click on any of links home,dinosaurs,aliens
and you will see It will change url and some content without reloading full page
It is achieved using ajax+push/pop of url in browser
I'm looking for a solution myself for a similar problem (I have a client site with an AJAXed wordpress theme, and these dreadful #! stuff on the URL prevent all the Social sharing plugins I have tried so far, from working correctly).
Apparently, there is a solution (with some drawbacks ofc..). I found about it here: http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
I know it's like two years since you've asked, but it could be helpful for someone else, or you may wanna check it out just for the sake of the curiosity itself! :-)
I am doing some ajax page with jQuery, can you tell me which are the differences (especially for SEO point of view) between pages like:
page.html#option1
page.html#!option1
Edit: mh maybe the second options is google-friendly
Thanks
You should use #! if you want your site crawlable by Google. More information is found on their Getting Started guide. So yes, the second version is more SEO-friendly. Another post worth reading is Googles propsal for making ajax pages crawlable.
However, for a users point of view, there's no difference.
Just a tip, sammy.js is a great library for working with this. It allows you to define routes using hash fragments.