Hi i want to load comments from google plus. what people are posted on google plus from my website.
i actually just installed this code in WordPress blog post. if a user wants to reply to post by clicking on Google+ button to load code from Google plus and load comments.
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading">
<div id="gpcomments" style="max-width:100%"></div>
</div>
<script>
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD','callback' : function showGoogle() {src='https://apis.google.com/js/plusone.js';}});
</script>
plusone.js is being loaded asynchronously but gapi is being called synchronously. gapi isn't available until plusone.js is finished loading. You can use an onload event to wait until gapi is ready for use.
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading"><div id="gpcomments" style="max-width:100%"></div></div>
<script>
function showGoogle() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://apis.google.com/js/plusone.js';
script.onload = function() {
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
}
head.appendChild(script);
}
</script>
finally found code working but i have to click button twice. i don't know why i need to click two times?. please someone help?
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading"><div id="gpcomments" style="max-width:100%"></div></div>
<script>function showGoogle() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://apis.google.com/js/plusone.js';
head.appendChild(script);
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});}
</script>
you can run test here a on blog post http://findsgood.com/?p=43224
First click generates an error in the console, for the sake of testing try to include plusone.js in theme header manually. (this feels more like a comment, just can't add them yet).
Related
I have 2 divs in my HTML.
<div id="div1"></div>
<div id="div2"></div>
On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".
I tried including the JS file on onclick event like below,
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js";
document.getElementsByTagName("head")[0].appendChild(script);
This included the script tag in the head section but did not load since the script tag will be loaded on page load only (correct me here if I'm wrong).
Is there any other way that I could proceed?
Thanks in Advance.
Using jQuery's $.getScript() function should do the job for you.
Here is a slice of sample code:
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.
Your code almost works. You need to use .setAttribute. Here is my working code. I used jQuery as my script:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);
And that'll do it.
EDIT:
Some more info. When you do something like script.type = 'text/javascript' you are setting a property on the object but this is not necessarily the same thing as associating that property with an actual node attribute.
Are you using jQuery? If so, you can try $.getScript().
You might also want to check this answer. But basically, you can do something like this:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
An info I missed was, that the path has to be absolute.
Copy and paste this function on your code.
<script type="text/javascript">
getScript=(url)=>{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if(document.body == null){
document.head.appendChild(script);
}else{
document.body.appendChild(script);
}
}
</script>
And now call this function with your .js file url.
Example:getScript('https://abcapis.com/sample.js');
Info:
File should not contain DOMContentLoaded or $(document).ready() function
I need to load this script in a Meteor project:
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="my-api-key"></script>
I first tried to do a $('head').append('<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="my-api-key"></script>') on Template.Image.onRendered, but the problem is that the library loads every time the template is rendered, and gives this error: dropins.js included more than once
I've also looked at the wait-on-lib package, https://github.com/DerMambo/wait-on-lib, but I'm not able to pass the data-app-key or id to the Router waiton function.
Do you have any suggestions on how to load this script?
I've never used dropbox sdk, but maybe this help you or give some idea for that.
if(window.Dropbox){
// Nice, is already loaded
}
else {
$("head")
.append('<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="your-api-key"></script>');
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.dropbox.com/static/api/2/dropins.js';
head.appendChild(script);
script.onload = function(){
//whatever, I Want It All!
};
}
You can add this on your Template.template_name.onCreated code block.
I have a simple page:
<!DOCTYPE html>
<html>
<head>
<script>
func = function(message) {
alert(message);
}
</script>
</head>
<body>
<h1> Visible content </h1>
</body>
</html>
and a script which is in separate file -- let's say -- test.js:
func("It should block the page.");
When I simply add this script to head by typing:
<script src="test.js"></script>
Alert shows before the content is visible which is fine to me.
However when I add the script dynamically:
<script>
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'test.js');
document.getElementsByTagName('head')[0].appendChild(script);
</script>
Alert shows after the content.
Why does that happen? Shouldn't the browser wait untill the script finishes (including adding and loading a new one)? Is it possible to block the body content with dynamically added script?
It happens because of asynchronous loading. Have a look at the article: http://css-tricks.com/thinking-async/
It depends what do you mean by blocking. You can load the page with the content block hidden: <div style="display:none;"></div> and show it after the page is loaded.
Here's jQuery way:
$(function () {
// do stuff after DOM has loaded
});
Have a look at this answer for more: javascript domready?
Wrap it in document.ready:
$(document).ready(function () {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'test.js');
document.getElementsByTagName('head')[0].appendChild(script);
});
I have 2 divs in my HTML.
<div id="div1"></div>
<div id="div2"></div>
On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".
I tried including the JS file on onclick event like below,
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js";
document.getElementsByTagName("head")[0].appendChild(script);
This included the script tag in the head section but did not load since the script tag will be loaded on page load only (correct me here if I'm wrong).
Is there any other way that I could proceed?
Thanks in Advance.
Using jQuery's $.getScript() function should do the job for you.
Here is a slice of sample code:
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.
Your code almost works. You need to use .setAttribute. Here is my working code. I used jQuery as my script:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);
And that'll do it.
EDIT:
Some more info. When you do something like script.type = 'text/javascript' you are setting a property on the object but this is not necessarily the same thing as associating that property with an actual node attribute.
Are you using jQuery? If so, you can try $.getScript().
You might also want to check this answer. But basically, you can do something like this:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
An info I missed was, that the path has to be absolute.
Copy and paste this function on your code.
<script type="text/javascript">
getScript=(url)=>{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if(document.body == null){
document.head.appendChild(script);
}else{
document.body.appendChild(script);
}
}
</script>
And now call this function with your .js file url.
Example:getScript('https://abcapis.com/sample.js');
Info:
File should not contain DOMContentLoaded or $(document).ready() function
Ok, I think i'm getting close but things still aren't working:
I've got the following function
function showRecaptcha()
{
alert("test2");
$.getScript("/plaoul/commentfiles/recaptchaJS.php", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
}
The function is supposed to call the follow javascript: http://www.jeffreycwitt.com/plaoul/commentfiles/recaptchaJS.php (feel free to view this page - it works just fine here, but not when I call it through ajax)
This is a javascript that when executed displays the recapatcha form.
So far the console log returns the following:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfDj8gSAAAAAG53PTtr-1665awLtERThvylvnUY"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfDj8gSAAAAAG53PTtr-1665awLtERThvylvnUY" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
comment_navbar_jsfunctions.js:129success
comment_navbar_jsfunctions.js:130200
comment_navbar_jsfunctions.js:131Load was performed.
But I want the <script> to actually show up as the recpatcha image in a div on my page div#commentWindow. Once I have the script using getScript I can't figure out how to get the script to display in div#commentWindow. Can you help me?
Since you are grabbing this HTML via AJAX you don't have to worry about <noscript>. So you can do something like this:
//get plain-text from local PHP file
$.get('/plaoul/commentfiles/recaptchaJS.php', function (response) {
//get the source of the `<script>` element in the server response
var source = $(response).filter('script')[0].src,
script = document.createElement('script');
//set the type of our new `<script>` element and set it to `async = true`
script.type = 'text/javascript';
script.async = true;
//set the source of the new `<script>` element to the one in the server response
script.src = source;
//add the new `<script>` element to the DOM
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
});
You may notice some of this code is from the Google Analytic Asynchronous tracking code (the part that creates a new <script> element).
So you simply want to fetch the output of that PHP file and render it out to the page?
Have you tried $('#commentWindow').load('/plaoul/commentfiles/recaptchaJS.php');
Edit -- sorry, that should have been .load. http://api.jquery.com/load/