I use an ajax plugin (smartAjax) for my website and on one of my pages, I have google map. All is working perfect without using ajax but as soon as I use google map in combination with ajax, google map does not load correctly anymore.
You can view here:
http://mark-i-mark.com/lab/eys/public/ajax1.html
All looks great but when clicking on "SCHEDULES & FEES" in the top menu and then clicking on "OUR CONCEPT", which suppose to bring you back to the map, the map does not appear anymore. If you refresh the page, you can see a short flash of it but it does not load correctly.
This is about the address, as shown in the address bar because if you delete the last part (#ajax1.html), the map appears correctly.
Does anybody have any idea what I may do wrong? I am happy about any suggestions.
cheers ;-)
Related
I have a website where I am switching from addThis to addToAny for social sharing buttons. The problem is that the share buttons are contained in content that is loaded dynamically with jquery Waypoints infinite scroll feature (which uses Ajax). When the page first loads (so no Ajax called yet) everything works great, but when a user scrolls and more content is added that contain the share buttons, the new buttons don't work in that they don't show the share options on hover or click.
There are supposedly fixes for this if using templates from the likes of Drupal or Wordpress, but my site is not built using any of these templates. This was also a known issue with addThis, and to get around the problem you simply need to add 'addthis.toolbox('.addthis_toolbox')' into the success portion of the ajax call and things would work.
I haven't had any success getting addToAny to work after ajax returns. They have something that looked promising: a2a.init('page'), but that doesn't work. Has anyone had this problem and have any suggestions on how to fix it? Thanks!
If there so many share button on one page you can call this after ajax success:
$(".a2a_dd").each(function() {
a2a.init('page');
});
Or if there only one share button, you can use this after ajax success:
a2a.init('page');
If want to know more details go through this document
According to the AddToAny API (https://www.addtoany.com/buttons/api/), you should use a2a.init_all(); if you are loading a number of new share button sets at once via AJAX.
Using a2a.init('page'); only initializes the last uninitialized buttons instance on the page. That might be fine for you, depending on how many new buttons that you load at a time.
Example: you have a blog site that loads new posts when the user scrolls to the end of the page. If you are only loading one new set of share buttons for the new content, a2a.init('page'); should work. If instead, you are loading a few new posts at a time, that each get their own set of share buttons, you will want to use a2a.init_all();
Hope this helps someone!
I am developing a web app/message board in AJAX. Ive come to the part where I need to decide how to display threads.
Should I refresh a completely new page for each thread? Or load it via AJAX. Obviously, I want each thread to be crawlable, linkable, and saveable as a favorite in your browser.
Then I saw USAToday's website (www.usatoday.com/news). Its very interesting how they load the page through a popup window, change the URI, and keep the data in the background.
This is exactly what I want, but I don't know what they are doing.
Can anyone else decipher this or lead me down the right path?
My impeccable googling skills has led me to believe that the answer lies in pushState.
http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
Essentially, it appears they are...
using the HREF of the provided link to change the URI via pushState.
using AJAX to load the contents of the page accessed via the link.
on close, they most likely use data from the newly loaded page to figure out what section its was under(sports, entertainment, etc), and reload that page.
I need to know how is it possible using AJAX to navigate between pages like Facebook. When I click a link in Facebook the url in address bar changes and the main content area is reloaded with new content but the navigation list on left, header on top and chat on left side remain intact. It appears that those sections are not reloaded. How this become possible when the address bar changes? please ,if possible give a small example.
You can use libraries such as history.js coupled with ajax calls. This library dynamically modifies the URL as you are clicking around the site. The library is available at https://github.com/browserstate/History.js. And a great demo is available at http://rypit.me/demos/isotory/tutorial/history.js.html
I am trying solve the back button issue within my app. The scenario is:
I have a home page with a search form which sends and receives data with $.ajax(), then the results loaded through ajax, their links points to a controller that won't be done by GET in ajax so that means that the page will be refreshed (so the home page with the results looks like this: http://url/en/home and a result link may look like this http://url/fetch/data/x123av).
The problem is which is the best way fix that when click back button to return the results from the search box?
I have found some answers in stackoverflow related to my question:
http://code.google.com/p/reallysimplehistory
http://tkyk.github.com/jquery-history-plugin
But from the documentation of those plugins, they all work by checking the hash change which I don't have.
Hope I have explained well enough, and I do have searched stackoverflow and google for a solution but I didn't find one that is close to this or either I've jumped over it...
Please just point me to the right way :D
But from the documentation of those plugins, they all work by checking
the hash change which I don't have.
If you want to handle the back button with AJAX request you will have to redesign your application so that it works with hashes as that's the only way. Changing the fragment portion of an url doesn't trigger a page reload but it is added to the history, so when you press the back button you are able to detect this change without navigating away from the page.
As mentioned by SLaks in the comments section another possibility is to use the HTML5 history API but obviously this assumes that the client browser supports it.
Does anyone can tell me about what are urls like blablalba.com**/#!/**dasdas?
Twitter use them.
I have a problem with requesting page using AJAX, when I hit Back button, it doesn't load previous page that loaded using AJAX.
But, I saw in twitter, when you are in Timeline tab/page, and click #Mention tab, and hit Back button, it will bring you to Timeline tab/page again not to your previous loaded page (non AJAX). is there a relation between it and url with /#!/ characters ?
I am not familiar with Twitter, but your description reads a bit as if you were looking for Chris Coyer's screencast on using the hash fragment from JavaScript.