Initialize Facebook like button post page load and script execution - javascript

So I have a like button on my page which loads fine when the script is executed in the bottom of the page. The problem is that I have an Ajax based popout which renders some HTML that also has the like button. How can I initialize that?
I've tried putting same script, but it doesn't get executed.
Is there a way to explicitly call any method to initialize the button?

FB.XFBML.parse() will do the trick

Related

jQuery not working when called into another page

I have this form on one page that we use as a tool. It's on page tool.html, in div id="tool"
Since this tool is to be shown on another page as well, I want to pull the tool in and not have to copy and paste (in case changes are done later on, this will reflect it everywhere)
Now, I have put all the jQuery functions in a separate file that I link in, so I can reuse it on many pages.
I can call in the form properly by using
<script>
$(document).ready(function() {
$("#lyristool").load("../path/tool.html #tool");
});
</script>
And I can confirm that the linked script page is loaded in properly, but it's not working at all.
Why will the linked script work on the original page, but not on the page when that whole containing div is pulled in?
Try to execute this line:
$("#lyristool").load("../path/tool.html #tool");
before loading the other script. I think your binding is not working because those elements don't exist on the page at the moment of binding.
In order to be able to do that, you should put all your binding code in a document.ready callback.

Keep javascript running on different pages

I have a javascript that does some work then goes to another page.
I have it in a couple versions:
One is a bookmarklet, the other is a script for tampermonkey and js code.
Once it's there though I can't find a way to continue having it run.
I know javascript runs on the page but is there a way to have it server sided or something so that when the page is changed to another the script can continue once the page is loaded?
What I want:
I press button,
stuff happens,
I'm redirected to another page,
stuff happens again,
redirected,
stuff happens...
etc.
But I want it to not need any user input rather then the initial starting.
I have the code to the point where it does stuff then redirects but I don't know how to have it continue on the different page.
Make a method of some stuff happening and place this method on common js file that is linked on every page and call that method on every page $(document).ready(fucntion(){}) event.
function anyMethodName(){
//Do your required stuff here.
}
and call it on $(document).ready(fucntion(){}) like:
$(document).ready(fucntion(){ anyMethodName(); })

jQuery function and Page Reload issue (maybe)

I have this code (accepted solution).
This code snipped loads from a js file. When I put a breakpoint at this function, I see that this function getting called when the page (that includes it) is loaded.
After the initial page load, when I choose an option in this page, that anchor element is reloaded (Ajax) exactly same (js file does not reload) as part of the piece of data. However, now when I click on anchor link, it does not fire / open the outlook window.
Is it something about jQuery functionality that I am mis reading/using?
How do I resolve this?
If the element is reloaded you'll need to rebind the click event to it.
Alternatively to the way you are doing it you could bind to the window/body and just specify the id as the selector like this:
$('body').on('click', '#emailLink', function (event) {
// your code here...
});

JavaScript Inside AJAX to Request More AJAX

I built a rudimentary page navigation system with jQuery. You click the next button, it retrieves the next page via AJAX; click the previous, it goes to the one before it, etc. The AJAX request is done via the jQuery $('#dom').html().load() method.
Inside one of the pages pulled is an a href link with an onclick which goes to a custom function (loadPage() -- the same function I'm using for the parent page navigation). As you can guess, the onclick event used inside the AJAX page does not work -- it's trying to call a function that doesn't exist.
Is there a simple way to make this work? Perhaps some other jQuery AJAX method like GET? Thanks in advance.
It sounds like you are embedding JavaScript into your html. Don't do that. Put your JavaScript into an external file and include it with a script tag, just like you do with jQuery.

How to clear javascript of functions initialised after ajax call

I have the following pages. Page A and page B.
Page A contains:
Page A HTML
Page A javascript
Page B javascript
I then use an ajax call to load Page B HTML into page A and fire a function to initialise page B's javascript.
If I decide to remove Page B from Page A, I will also want clear all of the JavaScript functions that were also initialised when pageB was loaded?
Is there a way to clear JavaScript functions?
You can use separate namespaces in both pages. So, e.g., page A places all its JavaScript under window['pageA'] whereas page B uses window['pageB'].
To unload all of the functions from page B you simply have to use
delete window['pageB'];
Beware, however, that this does not clear any handlers or references to the functions of page B. So if there are some left, this might lead to errors.
For the way you structured your code, you can simply "delete" the function initPageB_function and you should be golden, like so:
delete initPageB_function;
If you have to reload the content of pageB again into the page, then it's a different story, because you should re-bind the event handlers for your onclick events.
At this point it's much way better to follow another approach:
Put the markup AND the javascript code that deals with the event handlers for pageB "into" pageB; this way, when you load pageB via Ajax you'll load also all the JS code that deals with that page; this is called delegation (and it makes perfect sense, cause your container - pageA - is not supposed to know what it is going to be loaded).
If you're using an helper library like jQuery, everything should be pretty simple:
somewhere in pageA, you define a spot for loading pageB content:
<div id='pageB'></div>
when you have to load it:
$('#pageB').load( 'http://url.for.pageB' );
As soon as the load progress, the JS code in pageB will be executed and you'll be golden :)
To remove the content of the page you will simply empty the container:
$('#pageB').empty();
And the JS too will be gone.
The next time you'll reload the page again, its own JS will be executed again. pretty simple and effective. :)

Categories