I am using http://instafeedjs.com/ to display Instagram feed in my WordPress site.
I have included this file:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
and added into the page <div id="instafeed"></div>. But this displays
ReferenceError: Instafeed is not defined
error in the Firebug, and the feed not displays.
Does anyone know solutions to fix this?
Try to wrapp your code in some delay function, like this:
<script type="text/javascript">
jQuery(document).ready(function(){
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
});
</script>
You called your instafeed.min.js after your code, thats why you get Not Defined error.
Another solution will be to call instafeed.min.js file before your code in Dom: in header, in body, up to your code. In this case you can use your code without wrapping in delay functions
Related
The Error
Validate Container
The container has the following errors:
Type Location Description
JavaScript compiler error
Keyvendors_whastaap
Error at line 6, character 27: This language feature is only supported
for ECMASCRIPT_2015 mode or better: arrow function.
The Code
<!-- Chat Plugin Code New -->
<script async src='https://d2mpatx37cqexb.cloudfront.net/delightchat-whatsapp-widget/embeds/embed.min.js'></script>
<script>
var wa_btnSetting = {"btnColor":"#2CCD47","ctaText":"Book on Whatsapp","cornerRadius":40,"marginBottom":20,"marginLeft":20,"marginRight":20,"btnPosition":"left","whatsAppNumber":"917678462928","welcomeMessage":"I need to book home service.","zIndex":999999,"btnColorScheme":"light"};
window.onload = () => {
_waEmbed(wa_btnSetting);
};
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7890504903052561"
crossorigin="anonymous"></script>
<!-- Your Chat Plugin code -->
whats the error how I fix it ?
trying to add whatsaao widget throough GTM in all pages except one page. but the tag have an error.
Your mistake is that you use an arrow function in your code. You can't do that in GTM.
Rewrite this:
window.onload = () => {
_waEmbed(wa_btnSetting);
};
into this:
window.onload = function(){
_waEmbed(wa_btnSetting);
};
I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
Just started with Angular and trying to make this work.
I would like to display the name in the <p></p>, but it shows {{ name }}.
ASPX:
<html ng-app="myApp">
<head runat="server">
<script src="Assets/Vendor/angularjs-v1.2.28.js"></script>
<script src="App/app.js"></script>
<script src="App/controllers.js"></script>
</head>
<body ng-controller="myCtrl">
<p>{{ name }}</p>
</body>
</html>
app.js:
var app = angular.module('myApp','myCtrl');
controllers.js:
var controller = {};
controller.myCtrl = function ($scope) {
$scope.name = "abcd";
}
EDIT: I have changed the order of loading the script files and updated this query.
This is the error I see in console - Uncaught Error: [$injector:modulerr]
You've not correctly put the order of the scripts. Rather put app.js in front of controller.js. Now you're getting the error: var app is not defined.
[Addition]
Furthermore, you're trying to inject myCtrl which is no object. So changing var controller to var myCtrl would probably work.
Better would be to use something as described here: https://docs.angularjs.org/guide/controller
app.controller('myCtrl', ['$scope', function($scope) {
$scope.name = "abcd";
}]);
Few things here:
1 - myCtrl is not a dependent module. So, you don't need it when defining the myApp module:
angular.module('myApp',[]);
2 - Order of scripts, as described by #Highmastdon.
3 - When defining the controller, you can use the myApp module:
angular.module('myApp').controller('myCtrl', function($scope) {
$scope.name = 'abcd';
});
I registered my project and generated a browser key at https://code.google.com/apis/console/.
Now how do I use that key when using the Google Script Loader?
I've been doing this, which works (with or without the key parameter), but even after several weeks the API console shows no requests:
<script src=//www.google.com/jsapi?key=my_key"></script>
<script>
google.load('maps', '3.10', { other_params : 'libraries=places&sensor=false', callback : ... })
</script>
The key is useless for the jsapi, you must append it to other_params:
<script>
google.load('maps', '3', {
other_params: 'key=my_key',
callback: function(){}
});
</script>
When using charts/loader you have to do something like this:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
...
</script>
Note the mapsApiKey property.
As described in https://developers.google.com/chart/interactive/docs/gallery/geochart
I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>
Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>