Gumby Framework - JQuery firing onclick event twice - javascript

I'm creating a new site with the Gumby CSS Framework: http://gumbyframework.com
When I use their JQuery to check for button click and wrap inside their Gumby JS ready function
Gumby.ready(function() {});
The event is fired twice. I've spent a while trying to debug and cant work it out.
CodePen demo here: http://codepen.io/ptimson/pen/LseFk?editors=101
HTML
<div id="btn">Button</div>
JS
// Gumby is ready to go
Gumby.ready(function() {
$('#btn').on(Gumby.click, function(e) {
e.preventDefault();
console.log('Clicked');
});
});
Note: Removing Gumby.ready works but I need to keep that function so that I know the Gumby functions are available right?

You're right, removing Gumby.ready is ok. According to the Documentation, Gumby will automatically initialize by default. For manual initialization you have to load the script with a flag:
<script gumby-init="false" src="js/libs/gumby.js"></script>
And than you can call Gumby.init().ready();
Here's the Documentation.
Best.

Related

Why only single change event is working on select element in jQuery?

I need to change behavior of jQuery library (date range picker), it have code like this:
box.find('.month').off("change").change(function(evt) {
dateChanged($(this));
});
box.find('.year').off("change").change(function(evt) {
dateChanged($(this));
});
Those are two select elements. It don't return false and functions inside handler don't access the event. But for some reason my events that use delegation doesn't work. They are ignored.
$picker.on('change', 'select', function() {
console.log('CHANGE');
});
The console log is not executing, but if I remove previous lines from the library, my event delegation code works fine.
NOTE: $picker is object in my code that is parent of box element. But I also have event added on $(document) that is also not working.
First time I see something like this. Adding event directly to element, prevents event propagation. Can someone explain what is happening here? Is this documented anywhere?
This happens in Firefox and Chrome.
If someone need simple example, I can create one. But thought that this is self explanatory.
EDIT: I've created a simple reproduction and it works fine. I have complex application with a lot of files (R Shiny Application), but I don't see any change events in dev tools. Are there any way of making the event not propagate? Maybe using event capturing. What should I search for in order to find the code that is preventing the events from propagating?

Clearing javascript code from cache

I have page which contains jQuery code:
$('#tstButton').live('click',function(){
alert();
});
And I load this page from ajax call.
When I load the page multiple times, each time it loads the script and stores to cache.
Say when I make ajax call three times. and click $('#tstButton') once, then it will alert 3 time.
I have used:
cache:false
in ajax call. But still its not clearing cache.
How can I clear these javascript codes from cache?
You can unbind the event first before binding using die() if you're using jQuery < v1.7.2.
$('#tstButton').die('click').live('click', function() {
alert();
});
If you're using jQuery v > 1.7.2
You can use on and off:
$('#tstButton').off('click').on('click', function() {
alert();
});
You can OFF your previously binded click using jquery OFF function.
$('#tstButton').off("click").on('click',function(){
alert();
});
In my opinion, it is not a good solution to bind \ unbind event every time when you have dynamically loaded page.
You can use event delegation and bind it only once.
Execute this once on page load and it will properly work on any dynamically added elements:
$(document).on('click', '#tstButton', function() {
alert();
});
document can be replaced with more precise non-updating container which stores this button.
Here is a working JS Fiddle Demo

Jquery on event is not working with selector where as its working with Jquery(document)?

Jquery on event is not working with selector where as its working with Jquery(document)?
I have moved all page script to js file, all working fine but Event Handler Attachment are not working with element selector.
here the problem i am facing after moving to js file:
$(document).ready(function () {
//this event is not working
$('.add-new').on('click',function(){
//code
});
//this event is working fine.
$(document).on('click','.add-new', function(){
//code
});
});
Because of some dependencies i am using jquery version 1.7.1 and 2.1.2
the sequence of these jquery and page js file as follow.
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
//page js where from i have moved all page js to this file
<script src="/Scripts/ShowCollectionData.js"></script>
<script src="/Scripts/jquery-2.1.1.min.js"></script>
and using of $(document).on('click','.add-new', function(){}) would not be the correct way.
am i doing wrong somewhere ?
$(document).on('click','.add-new', function(){
//code
});
$('.add-new').on('click',function(){
//code
});
Both of your declarations are valid.
The former works for dynamically added elements. You use document because you're delegating events on children of the document object, so events bubble up to the document level. It's also more convenient to select the closest parent you can (and the parent must exist on the page at load).
The latter still works, and is a preferred way to simply bind events to specific elements.
You can read more for on() here.

Can we invoke click function on div class using Javascript

I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.
See Jquery's trigger function
Jquery Trigger
You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();
Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524
One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })
Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.

CRIR & jQuery - hooking up a method to fire after CRIR loads?

I have a JSP that uses jQuery and CRIR to display a form with radio buttons. I'm using CRIR to style the radio buttons to give them a custom look.
CRIR appears to set itself up on load with something like this:
crir.addEvent(window, 'load', crir.init, false);
I want to perform some initialization on page load but after crir.init (because crir.init sets all the radio buttons up). When I use
$(document).ready( function() {
updateUIOnLoad();
});
it appears to get called before crir.init.
I'm not familiar with Javascript events, so I was wondering if there was a way to set things up so that a function would execute on document load but after crir.init.
The problem, so far as I can tell, is that crir is setting itself up on the window's 'load' event, whereas your jQuery's responding on the document 'ready' event (which, as you've seen, precedes the window's 'load' event).
You could change the jQuery to:
$(window).load(
function(){
updateUIOnLoad();
});
So long as this follows the call to crir in the mark-up, it should work (and does, on localhost, but sadly I couldn't make a JS Fiddle demo work properly).
Also you can test for crir as part of a function call:
$(window).load(
function(){
if (crir) {
updateUIOnLoad();
}
});
There's a demo of this, sort of, working on my site at: http://davidrhysthomas.co.uk/so/soCrir.html.

Categories

Resources