CODEWITHSUNDEEP
javascriptjqueryhtmlajax
pic0
pic0

Reputation: 491

AJAX crawling on single page

I was really confused with this question despite on google guide. So, I have a web-page(html and js) which is upload some information to the 

<div id=""></div>

using jquery's

.load(target)

Uploading realized with js function and "onclick" event in the html document.

So, when I click on the page region js start to upload information to the block.

According to google guide I should to use hash-bang if I want that page will be crawl.

Questions:
 1.How can I implement this considering I have only one page?
2.How can I give access to the "#!" pages which upload by script?
3.How can I create html snapshots?

Thank you.

Upvotes: 2

Views: 201

Answers (1)

azrael.pl
azrael.pl

Reputation: 85

regarding Your question: lets assume you have a page named MyPage.html with 3 elements to which you attach java script, with id's: A, B, C. each one of them causes different content to load in your div. 1) the simplest way is to create links like: 

<a id='A' href='#GoToA' onclick='javascript:executeYourCodeA();'>Load A</a>
<a id='B' href='#GoToB' onclick='javascript:executeYourCodeB();'>Load B</a>
<a id='C' href='#GotoC' onclick='javascript:executeYourCodeC();'>Load C</a>

what that would do is when user clicks the link, the '#GoToA'or other will be added autommatically to browsers page addres. So the page address will look like 

www.yourdomain.com/MyPage.html#GotoA

this change in addres will be remebered by the browser in its history.

2) if you wan to read the url use 

var mylocation = window.location

- source: http://www.w3schools.com/js/js_window_location.asp

3) if the user accesses only MyPage.html everything is ok, the page renders with its original state, but what if user wants to see content visible after clicking link A ? You can tell the difference, on page load, reading page url ( see 2)) and automatically loading the content. it can be achieved by :

  $(function (){
                 var  myurl = window.location;
                 var target = myurl.split('#')[1];
                 switch(target){
                       case 'GoToA' : executeYourCodeA(); break;
                       case 'GotoB' : executeYourCodeB(); break;
                       .
                       .
                       default: /*show the original, initial page*/
                       break;
                });

Effectively what's going on now is that loading an address MyPage.html and clicking link A is the same by means of what is displayed to accessing a page MyPage.html#GoToA

So this way you can have separate links to the same site with different dynamically loaded content.

The thing Cristian Varga told you about can be used to achieving back and forward capabilities: basically what you do is you create a normal link to a page like MySecondPage.html ( this page does not really exist ). You then on click event load the contents to your div, force stop execution of standard link behavior (by preventDefault() - this causes your event not to be processed any more - so the browser 'ignores' navigation to MySecondPage.html. You then manually tell the browser to store the history stete and tell it that you are now om MySecondPage.html

history.pushState(null, null, link.href);

so you load the content, block navigation and manually convince the browser that the page has changed and to store the state in browsers history.

but now achieving the snapshot capability - would be more tricky in my mind, as the MySecondPage.html is a perfectly valid but non existent url, loading MyPage.html instead when user types in www.mydomain.com/MySecondPage.html and displaying MySecondPage content would require server side actions. - source http://diveintohtml5.info/history.html

Upvotes: 1

Related Questions