Missing elements (Facebook Like button) when using Ajax pagination - javascript

I'm trying to help a good friend out with his site. I did not make this site so I'm diving into the deep, I am also new with WP. He wants a new audio player and Ajax pagination.
So far I did everything manually. It's a rough start though. I just load the next page with Ajax and fetch a div from that page.
My problem is: all posts contain a Facebook Like button and a Tweet button at the bottom. Now when I load the next page of posts (the div), those buttons disappear. I guess it has to do with plugins that are being loaded when the page itself is loaded. It is also missing the number of comments. These are Facebook comments also. To be honest I have no idea how to fix this...
Edit: Ok, I'm pretty sure I somehow need to reload that plugin in the Javascript chain... is that possible?
You can check it out at
Is there a better way? Am I actually doing it right? Is there a plugin that makes this easier? Again, I did not make this site and it's my first time using WP. I have no idea where to find the page settings (which might contain the max posts per page etc.)
Thanks in advance, I hope I am clear, if not, please say.

What you need to do is refresh the Facebook plugins after loading dynamic content with Ajax. Here's a snippet of code I used on a project:
// Run this on your Ajax callback
try{
// This code reloads the Facebook plugins
FB.XFBML.parse();
}
catch(ex){
// Something went wrong
}
The code requires you to load the Facebook API (duh!).

Related

Infinitescroll how much is limit on pages element

I would like to ask about infinitescrolling, example facebook news feed but also a normal wordpress blog which integrate infinitescrolling.
How much elements can support browser on 1 single page before crashing?
I mean, after many scrolling, the page have a lot of posts, I suppose can't show millions posts. How much post a browser can handle?
So if I want implement infinitescrolling, after severall loading, I should think to add a paging for load new page, instaed of appending.
thanks!!

Javascript history go — if not, go to index.html

To go back to the appropriate tumblr page, we're using:
Back
However, we're getting a lot of traffic directly from the twitter app, and this stops the function working. Is there a way so that if the history.go doesn't work (or takes you outside the site), it will just take you to index.html?
This is one of the pages the history button is on: http://lexican.info/post/49265445109/sesquipedalophobia
Thanks for any help at all.
Sadly I don't think this is possible as there is no relationship between a post and what page of the index the post is displayed on.
Try to check how many page in the history list with history.length:
http://www.w3schools.com/jsref/prop_his_length.asp

Items in DOM not clearing, how to clear cache

I have a site where items are loaded onto a page in the DOM as I'm using a masonry type effect.
Now, users can delete these items at any time, many at once if they choose to.
The problem is, after deleting, I refresh the page showing the items by reloading it, and the items are still there. Even if I leave the page and return the items are still there. But they have definitely beeen removed from the db table. The only way to clear them from the page is CTRL+R, a complete refresh
How can I clear the DOM cache, or force a refresh? Or is there a better way to do this?
I'm using PHP as main backend lanuguage. I'm also using Jquery.
Not sure what to tag this but think JS and Jquery issue so will start with that.
It's neither a JavaScript nor jQuery issue. It's a caching issue. You need to configure your web server to set the correct cache control headers (Expires and similar) so the browser knows to re-fetch the page. (You can also set them in the PHP response if you need to vary them from page to page by using the header function.)
I won't single out a specific link, but if you search for "cache control" you'll find a million tutorials. :-)
Added timestamp to ajax call so it doesn't cache in the first place, simple really when you think about it backwards!
Many thanks for the other answer/comment

How do I run a script after internal scripts are fully loaded?

I'm trying to hide specific people in the Facebook sidebar chat list.
My first attempt was to just try and replace the name of a user in the chat bar but a simple .replace doesn't work since the chat bar loads separately, and long after the page itself has loaded.
Is there any way of running the Greasemonkey script after the chat has loaded?
I've heard some about the unsafeWindow functionality, but I'm not sure if I can apply that here, and if so, how.
unsafeWindow.hidePerson = function() {
document.body.innerHTML = document.body.innerHTML.replace(/Firstname Lastname/g, '' );
}
unsafeWindow.hidePerson();
To answer the question about "Running scripts after internal scripts are fully loaded", see this answer (the question scenario is the same as an AJAX scenario).
However, several things in your case:
Your issue, "I'm trying to hide specific people in the Facebook sidebar chat list", is already covered by Facebook!
See "Can I turn chat on for just a few friends?"
Follow the instructions there, and you can:
Hide just the people you specify
Or, show only the people you designate
Or, turn chat off completely
Don't attempt to set innerHTML like that; you'll bust the page (Event listeners will get trashed, etc.).
unsafeWindow is a non issue here, and is not needed.
If you mean something that I haven't covered, see this page, this page, and this page.
Then edit your question (or ask a new one), and include, at a minimum, the HTML snippet of the part of chat you want to affect, and screenshots of the same.

Pagination with special loading function?

I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.
Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.

Categories

Resources