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.
Related
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
I have a slider button created using a JavaScript plugin, which automatically generates an element with class name .flex-next. However, when I run the following code, nothing is logged in my console:
$(window).load(function() {
$( ".flex-next" ).on( "click", function() {
console.log("youclick");
})
});
Since the button is added dynamically after the dom is loaded, you need to use event delegation so the click event can be used on this button:
$(document).on('click','.flex-nex',function() {
console.log("youclick");
})
Your setting your call to fire when the window loads by using $(window).load(...);. A flexsider is initiated on $(document).ready(...) which happens after the window loads and all of the content is loaded into the DOM. So when your script fires, it looks for an element that isnt there yet.
Get around this by firing your script on $(document).ready(), and use event delegation. The best practice way is to declare your function like so:
$(document).ready(
$(document).on('click', ".flex-next", function() {
console.log("youclick");
});
});
this way your click listener will wait until the page is ready and will put a click event on to any .flex-next event, even those created dynamically. That way if your using large imagery that is loaded asynchronously the code will still work.
You are probably calling your $(".flex-next").on call before the slider button has been executed. So, basically, your .flex-next class doesn't exist in the DOM yet when you call the .on
You should call the .on call after plugin has been initialized.
I'm transferring a normal site to jQuery mobile. I've got some of event bindings, as well as other page specific adjustments:
$('.roulette-img').css({
});
$('.shuffle-img').each(function(){
});
$('.button').bind('mousedown', function(){
});
$('.spin-btn').bind('mousedown', function(){
$(document).bind('mouseup', function(){
});
})
$(window).resize(function(){
});
Right now certain pages don't work as they should (by not firing these events). I understand this is because of jQuery's ajax navigation, that the script only loads once when the first page is loaded and as a result all subsequent content loaded in via AJAX doesn't get binded to events.
Which way is the best to get around it?
First don't use bind, it is deprecated and removed from jQuery versions 1.9 +. Use on instead. Here's an example:
$('#buttonID').on('click', function(){
});
Also if you want to execute something inside a certain page you need to do it inside a jQuery Mobile page event, like this:
$(document).on('pagebeforeshow', '#index', function(){
});
I made you a working example: http://jsfiddle.net/Gajotres/8hKe2/
Here you can see what it looks to use page events to execute a code for specific pages.
everything you want to know can be found in this answer/article: jQuery Mobile: document ready vs page events
If you want your handlers to be bound to new pages as they're loaded, you can use the pageinit event and restrict your selectors to the page that is currently initialized:
$(document).on("pageinit", function(e) {
$(".button", e.target).on("mousedown", function() {
// ...
});
$(".spin-btn", e.target).on("mousedown", function() {
// ...
});
});
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.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.