Foundation4: Joyride firing postRideCallback on page load - javascript

I'm using Foundation4 in tandem with CakePhp2.4 and, until now, have had no problem with this. No matter what I do, joyRide's postRide callback is being called when the page finishes loading (and won't call again when Joyride has completed).
Also, since my goal is just to fire initialize() (a custom function) as soon as Joyride ends, as an alternative I've tried binding event listeners to the .joyride-close-tip class and even custom element id's within the joyride pane, all of which are also being called at page load.
I've tried so many different variations on this that I can't adequately post everything I've tried, but here's my current code:
Notes:1) I'm using jQuery in noConflict mode because this all being controlled by CakePhp2.4, hence, the $j prefix instead of the usual $ for jquery, 2) I am not able to use zepto in this app (though I don't know why; nothing works if I load it, however).
My HTML:
<ol class="joyride-list" data-joyride>
<li data-id="module-name">
<h4>Welcome!</h4>
<p>You're about to start the module. But first, we'll make sure you understand the interface.</p>
</li>
<!--- several more <li> pairs ---->
<li data-button="begin">
<h4>All Set?</h4>
<p>Click "Begin" to get started on this module!</p>
</li>
</ol>
My JS:
<script type="text/javascript" src="appname/js/vendor/jquery.js"></script>
<script type="text/javascript" src="appname/js/foundation.min.js"></script>
<script type="text/javascript" src="appname/js/app.js"></script> <!-- custom js functions that reply on jquery and have no collisions with Foundation -->
<script>
$j(document).foundation('joyride',
'start',
{ postRideCallback: initialize() }
);
// have also tried:
// $j(document).foundation().foundation('joyride','start',{postRideCallback: initialize()});
</script>

For everyone's reference, the problem was that I was handing an actual function to postRideCallBack, instead of an a function definition—ie. simply wrapping initialize() in function() { initialize(); } solved the problem.

Related

how to make an ajax call with jquery loaded in the body section not head section

I have a layout file where i included Jquery just before closing tag.
//layout.handlebars
<!DOCTYPE html>
<html>
<head></head>
<body>
{{{body}}} // renders the body content
<script src='/js/jquery-2.2.4.min.js'></script>
</body>
</html>
I also have a page specific javascript(helper.js) that makes an Ajax call.
<div>Some sample data</div>
<script src="/js/helper.js"></script>
but the problem here is jquery is loaded at the end of the page but i am referring to it in the external javascript before jquery is loaded. which shows me '$' is not defined and i know that is obvious.
One solution to this will be like adding jquery to the head section but that is not what i want.
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.
Any help is much appreciated!!
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.
Yes, I assume you already understand the cause of the issue. As you see below the final content is ..
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Some sample data</div>
<script src="/js/helper.js"></script> <!--Jquery is not loaded yet, and hence $ is undefined -->
<script src='/js/jquery-2.2.4.min.js'></script>
</body>
</html>
As you already know one option is to move jquery anywhere in the HTML but make sure its loaded before any other jquery dependent files. Now since you don't want to take this option. we have another option.
Solution:
Our only aim is to make sure the jquery library is loaded prior to any other jquery dependent files.
We can get the files on document.ready using $.getScript()
$(function(){
$.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {
console.log( "Load was performed." );
});
});
Extras: If you feel this is a overhead and you cannot add this code to all the files in your page (since there can be too many files ), You can write a generic function and a global array variable , This function will check for file paths in the array and execute each one synchronously and remove from the array. Make sure this generic function is called in every document.ready event.
One Solution is that You can put the jquery script at the start of body tag before {{{body}}} section .. In this way your helper script will be rendered after jquery and your problem will be solved .....
Well its not pretty but you could use some kind of test and wait loop something like
<script>
(function test(){
if( window.jQuery ){
//your jQuery code
} else {
setTimeout(function(){ test(); }, 200);
}
})
</script>

Can't invoke function from external javascript file

My java script file is referenced in the body of my base template:
<body>
...
<script type="text/javascript" src="/static/js/test.js"></script>
</body>
I an another template which extends the base template, the java script function draw() defined in test.js can be invoked by using the onclick Event. Sadly I only get a picture when clicking over the canvas area. But invoking the function by <script> draw(); </script> occurs the following error: ReferenceError: draw is not defined How can this possibly be?
...
<div class="panel-body">
# works perfectly fine, somehow the function can be accessed
<canvas id="canvas" onclick="draw()" width="300" height="10"></canvas>
# occurs an error, somehow the function can't be accessed anymore...
<script> draw(); </script>
</div>
...
I use python flask framework for back end programming.
Because you initialized the <script> at the end of the webpage, and you call draw() before it's initialized.
I would put it in the head tag:
<head>
...
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
You said that for the onclick it works, of course it works, when you click on the canvas the draw() function is already initialized.
The order of the script is what matters here. Scripts are loaded in the order encountered in the page.
Since "draw()" is a direct call, I presume this is defined before the tag in the body, so this why the browser says it is not defined. On the other hand, the onClick of the canvas can happen only after the page is loaded, so that's why it is working there.
I recommend to put the javascripts of a specific page below the scripts of the base template somehow (you have to use maybe you'll need two separate references for that), or you can use other techniques like JQuery's $(document).ready().
Here is a very similar question, hope that helps:
load and execute order of scripts
Why won't you wait for the document to load? That would be the proper solution to this problem.
document.addEventListener('load', function (){
draw();
});
Sorry about the ugly indentation, I'm using my phone

script conflict contact form, fancybox

I have contact form problem. The form fails to deliver a message. The source of the problem is two conflicting script libraries. Both libraries are needed for different effects.
The fancy box scripts works with the image display mechanism.
<script type="text/javascript" src="./fancybox/lib/jquery-1.10.1.min.js"></script>
The jquery scripts works with contact form mechanism
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
If I remove the fancy box script the contact form works but lose the fancybox interactive image display features.
If I remove the googleapi script I loos the form functionality.
Changing the order of the scripts or loading them asynchronously has not worked.
Is the away to deal with this script conflict?
You should use noConflict() jquery method.
The $other variable now has the "ajax google api jquery.min.js", $other is now an alias to the jQuery function; creating the new alias is optional.
The $ variable now has the "jquery-1.10.1.min.js", which is a shortcut for
document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
solution for remove conflict in different jquery version
<!-- Putting jQuery into no-conflict mode. -->
<script src="./fancybox/lib/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $other = jQuery.noConflict();
$other(document).ready(function() {
$other("div").hide();
});
window.onload = function() {
var main = $("main");
}
</script>

Addthis javascript asynchronous tweaking

On my page here I'm adding asynchronous loading to the addthis javascript, but I'm still learning js so I'm not sure where to place it.
The code I have is:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxxxx"></script>
<!-- AddThis Button END -->
Here are the directions:
To enable asynchronous loading, add the querystring parameter "async" to the end of the addthis_widget.js script tag. Here's an example:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#async=1"></script>
This will prevent all AddThis assets from loading except for the initial script. When you're ready for AddThis to load, call the function "addthis.init()", like this:
function initAddThis()
{
addthis.init()
}
// After the DOM has loaded...
initAddThis();
My questions are, how do I place #async=1 in place of my username and do I add the init just after?
There's also a big gap coming from the iframce next to twitter I don't know how to reduce.
Worst of all, the URL posted on the social networks e.g. facebook go to a blank page and have the following URL: http://www.inside-guides.co.uk/brentwood/children-and-parenting/activity-and-play-centres/timbuk2-kids-activity-centre-383.html?fb_action_ids=10151964783697905&fb_action_types=og.likes&fb_ref=.Ul0sB9xtelP.like&fb_source=other_multiline&action_object_map=%7B%2210151964783697905%22%3A128186320684674%7D&action_type_map=%7B%2210151964783697905%22%3A%22og.likes%22%7D&action_ref_map=%7B%2210151964783697905%22%3A%22.Ul0sB9xtelP.like%22%7D
Any ideas much appreciated
Your first question - how you add #async=1 - is easy: Just put it in the addthis_config variable. Here's example code:
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":true,
"pubid": 'xxxxx'
};
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#async=1"></script>
For your second question - how you add the init call just after - just put it after the code in your code editor.
Finally, the reason that posts to Facebook are failing is that your web app isn't set up properly to handle query parameters. For example, this URL - http://www.inside-guides.co.uk/brentwood/children-and-parenting/activity-and-play-centres/timbuk2-kids-activity-centre-383.html?foo=bar - also fails. If you put anything after a ? in the URL it won't load. Your developer will have to fix this.

What is a $(function() { ... }) function and when is it called in the following example?

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function.
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
<p>tab1 info</p>
</div>
<div id="tabs-2">
<p>tab2 info</p>
</div>
</div>
</div>
</body>
</html>
thanks in advance,
George
It comes from the jQuery library you're including:
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
$ is an alias for the jQuery function.
See jQuery(callback) reference documentation:
A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.
For more information, have a look at Tutorials:Introducing $(document).ready()
It will be called when the document is ready. It is equivalent to:
$(document).ready(function() {
...
});
Document.ready indicates that the page is fully loaded on the client. WebParts are serverside controls and will be processed first in order to produce the html document sent to the client. Thus webparts will be processed before the document.ready client-side event fires.
From the Gecko docs:
The load event fires at the end of the document
loading process. At this point, all of
the objects in the document are in the
DOM, and all the images and sub-frames
have finished loading.
$(function(){
});
is jQuery (a Javascript library) shorthand for:
$(document).ready(function(){
});
It is what you use to do with <body onload="xxx"> but more sophisticated. You can get a fuller explanation here.
I'm not sure why you tagged your post "SharePoint" but note that this is not suported on SharePoint pages.
You need to push scripts that run on page load on a stack and SharePoint will execute them. The syntax is:
_spBodyOnLoadFunctionNames.push("myOnloadFunction");
This will require the javascript fu:
function myOnloadFunction()
{
$("#tabs").tabs();
}
to be available, which can execute your onload code.
That's a shorthand used in jQuery and one that is absolutely unclear and unnecessary in my opinion. Not too long ago, we used to write:
$(document).ready(function() {
$("#tabs").tabs();
});
Now we can also write this to do the above:
$(function() {
$("#tabs").tabs();
});
The function that is passed to $(document).ready is executed when the page is loaded and the DOM is ready, in other words the document has been loaded in memory. This code is written in jQuery, a Javascript library that makes DOM operations easier.
This is how the above code translates to plain Javascript:
window.onload = function() {
$("#tabs").tabs();
};
where window is a global object that represents the page window, of course.
This is a jQuery call and it gets called when a document gets loaded.
more info at http://docs.jquery.com/Core/jQuery#callback
That syntax is an alias for
$(document).ready(function(){});
This event is used in jQuery to invoke a script as soon as the DOM is ready. It's like window.onload, but doesn't wait for all the images to fully load before firing.

Categories

Resources