I have followed most of the beginners tutorials, but now I am trying to do a clean jquery plugin. My goal (right now) is to show an alert when a user click on a link (using a plugin).
my code to call the plugin is :
//custom.js
$(document).ready(function(){
$("a").click(function(event){
alert("TEST1");
myPlugin();
event.preventDefault();
});
});
and my plugin code is :
//myPlugin.jquery.js
(function( $ ){
$.fn.myPlugin = function() {
alert("TEST2");
};
})( jQuery );
TEST1 is showed but not TEST2 !
What's wrong ?
Thank you very much for your help!
Because you are using $.fn.myPlugin that means you need to use $(this).myPlugin() to call the plugin.
$(document).ready(function(){
$("a").click(function(event){
alert("TEST1");
$(this).myPlugin();
event.preventDefault();
});
});
http://jsfiddle.net/3nf5b/
Your plugin extends the jQuery object, so to invoke it you need a jQuery object. Change your call from myPlugin(); to $(this).myPlugin();
Related
I found in this sample code the jQuery event redraw:
$(window).on("redraw",function(){ [SOME CODE] });
I did not found any documentation about it in the jQuery site, nor in any JS tutorial or reference.
What is it?
It must be some custom event that the plugin is triggering some where in the code.
Here is an example of custom events that can be created in jQuery
DEMO: http://jsfiddle.net/Lk79jovg/
$('.test').on('keyup', function(){
var $this = $(this);
if($this.val() == 'some text'){
$(window).trigger('custom');
}
});
$(window).on('custom', function(){
alert('some text was typed in the input');
});
I've been working through some tutorials to learn the basics of creating my own plugins.. But it doesn't seem to work.
What I'm trying to do is just create a basic slide toggle drop down (click once to display a div - click again to collapse it)
The content of the plugin I have:
$(document).ready(function () {
(function ($) {
$.fn.dropdown = function () {
$.fn.dropdown = function () {
this.preventDefault();
$('.expanded').slideToggle(1000);
}
return this;
};
}(jQuery));
});
The HTML I have is:
<div class="Btn">Click Here</div>
<div class="expanded">
Here<br/>
Is<br/>
Some<br/>
Extra<br/>
Content<br/>
</div>
And to execute the plugin, I have:
$( ".Btn" ).click(function() {
dropdown();
});
If someone could assist me with where I'm going wrong, it would be appreciated.
Thanks
Check out this jsfiddle: http://jsfiddle.net/yvanavermaet/sc6Bw/1/
$( document ).ready(function() {
$( ".Btn" ).click(function() {
$(this).dropdown();
});
});
(function( $ ) {
$.fn.dropdown = function() {
$('.expanded').slideToggle(1000);
return this;
};
}( jQuery ));
As some people have stated:
don't define $.fn.dropdown twice
don't define it in your document.ready (you should see it as a separate module)
use $(selector).dropdown();
e.preventDefault() doesn't have much effect on a div as it has no default.
Edit:
By the way, try and follow 1 coding standard. When adding the click-event, you're using double quotes and when adding the slideToggle you're using single quotes. Aswell as with the spaces.
To execute the plugin it should be:
$( ".Btn" ).click(function() {
$(this).dropdown();
});
This is a cut down version that works.
A couple of things, for some reason you wrapped $.fn.dropdown inside $.fn.dropdown, not sure why but I removed it. Also jQuery functions don't work like regular javascript functions, they're need $(). before hand, as they're inside jQuery's scope. Finally this.preventDefault won't do anything in this context, as there isn't a default.
can you please tell me why pageshow event not call in jquery mobile?
http://jsfiddle.net/G7AvE/
$(document).ready(function(){
$("#1").on('pagebeforeshow ', function() {
//YourFunctionCall();
alert('1')
});
});
jQuery( "#1" ).on( "pageshow", function( event ) { alert('1') } )
Refrain from using .ready() in jQuery Mobile, use pageinit instead. Moreover, for page id, don't use plain digits; an id should contain characters.
$(document).on("pageinit", "#pageID", function () {
$("#pageID").on('pagebeforeshow ', function () {
/* run code */
});
});
Demo
At top left, the dropdown below Frameworks and Extensions. Change from onload to No Wrap- in <body>
Updated Fiddle
In jsFiddle this makes sure the libraries are loaded before your code tries to use them.
In reference to the site "
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html
", i used the datePicker() plugin of jquery. But its not working for me!!
I've updated my codings in
http://jsfiddle.net/9L7kE/7/
. Kindly help!!!. Thanks in advance
in js fiddle you have:
$(document).ready(function(){
$(function() {
$( "#date_picker" ).datePicker({clickInput:true});
});
});
$(function_to_tun) is the same as $(document).ready(function_to_tun)
adding a onready event after the event was fired will not not fire it again so you just need to use only one of the 2
$(document).ready(function(){
$( "#date_picker" ).datePicker({clickInput:true});
});
or
$(function() {
$( "#date_picker" ).datePicker({clickInput:true});
});
and also don't forget to add the librarys
Use this one. It's very easy to use.
http://keith-wood.name/datepick.html
I want to initialize jquery ui button plugin using live or on. Means something like :
$('button').live("which event", function() { $(this).button(); });
But i don't know the event which i can use in this place. I tried load and ready but not works. Then i tried custom event also :
$('button').live("event", function() { $(this).button(); });
$('button').trigger('event');
This also not works.Help me out please !
If that button is present on dom ready then :
$(document).ready(function(){
$('button').button();
});
If it's created afterwards :
$('<button />').appendTo('body').button();