I'm trying to load a chart from the google charts api. For the most part it is working as planned. The issue comes on the initial page load. If I navigate from another part of my site to the page (using router) it loads fine. However, if I hit the refresh button on the page the chart does not load until I leave and re-enter the page.
I have this in my main.html header:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
and in my template.templatename.rendered AND template.templatename.created I have
google.load("visualization", "1", {'callback':function() {},packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Deps.autorun(function () {
drawChart()
})
Where drawChart() calls the google visualization commands. I do understand I'm probably calling some repetitive code currently, but all of this is in an effort to get the page to load when I hit refresh.
I appreciate any help.
Please let me know if there is any more info needed. Thanks.
Placing the Google jsapi file in the main.html header will cause the browser to run the Javascript after the DOM is completely loaded, which is too late for your purposes.
Meteor is calling your google.load code before the DOM is completely rendered, so when you hit refresh page, the jsapi file is undefined when Meteor calls google.load.
However, if you navigate away and then back, the DOM has already been loaded once, so the chart will be rendered correctly.
To solve this, I would suggest just saving a local version of http://www.google.com/jsapi in your client folder.
Thus, Meteor will load it before it calls the google.load code.
Related
I need to track visits of page that loads via Ajax. I'm currently using the latest HTML5 Boilerplate Google Analytics snippet (as of September 2017):
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
For example, the page that I'm calling via Ajax shows as an overlay popup and does not update the URL in the address bar. It comes from a directory like this:
www.mysite.com/ajaxpages/popup.html
Do I need to place the entire Analytics snippet on the popup.html page? Do I have to update it? Google's documentation says I need to update my code to something like:
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
It seems fairly simple but I'm not exactly sure how I need to update the tracking code I'm using.
You do not need to put the entire analytics snippet in the popup page. In the function that loads the Ajax popup locate the bit that checks for the ajax success event and paste your second snippet in there; this will set a page path (so every subsequent call will use the new url) and the pageview call will send the updated information.
I have a jquerymobile ajax based web app. not using ajax is no option.
On one page a new script is inserted by <script url="../script.js"></script>
Now i would like to load that script, after the page is loaded by ajax. Unfortunately it does not happen. I tried for example:
$(document).live( 'pageinit',function(event)
CODE HERE
{});
But it does not work. As well as
$(document).bind('pageinit', function()
Any ideas how i can manage to load the function after the page is loaded by ajax??
Found the solution with help of "OMAR". I put the function inside the page div. But the link is not working, so i put the code itself into the top of the div. now it is working. not the best solution, but it is working.
Here's my issue, I'm trying to load a FB comments module via an AJAX div. Now, it works if I go directly to the php page, but if I load it from within the div, it doesn't. I've looked at the other posts (FB javascript SDK after jquery LOAD (ajax)), but still can't seem to get it to work, looking for clarification.
If you want to see what I'm talking about, check http://azconceptphoto.com/lindsey and check out testimonials.
Ideally, on the normal part of my site, I can just load the HTML5 code and it works fine, though for some reason it doesn't remotely work via the AJAX div. And considering the posts from before are out of date (2011), I was hoping to get more feedback on this.
Based on the code from your link you are not using any of the PrototypeJS Ajax methods to get the backend script. Ajax.Updater is the method you need to use so....
Here is my suggestion
change the definition of loadXMLDoc() to
function loadXMLDoc(div, location)
{
new Ajax.Updater(div,location,{'evalScripts':true});
}
this will update the contents of div with the contents of location. Also if the response has <script> tags in it then the javascript will be parsed and evaluated (thats the option evalScripts)
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I am struggling with a problem about automatic AJAX load of page. I have normal static page, where is a link. After click on this link I will call an AJAX request for loading a data.
This works me. I try now to add next functionality - I would like after load a normal static page to load that AJAX data automatically - is possible to do somehow?
I tried it to do whole afternoon, but I still don't know, how to do it...
So, I will very grateful for every hints, how to do it... Thank you so much.
Make your Ajax call in your jQuery ready function, e.g.:
<script>
$(function() {
$.ajax(...);
});
</script>