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.
Related
I'm building a web application that is extendable by dropping scripts into a preset directory. The script needs to read file headers before going to a page, so I need to use .preventDefault() when links are clicked and run some JScript first. Unfortunately I can't get past the .preventDefault()
Here's my link format:
Some Text
here's the jquery I'm trying to use to stop the default action:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
EDIT:
More Info:
The <script>...</script> is in my footer.
This function is INSIDE $(document).ready AFTER a $.ajax call that builds the list of links this function is trying to listen for clicks of.
Since your links are appended dynamically to the page, you need to use document.on() to capture the click events.
the syntax for appending event listeners to dynamic content is as follows
$(document).on( event, selector, callback );
so your click handler would become:
$(document).on('click','.filelink',function(e){
e.preventDefault();
//code here
return false;
});
I think you missed
$(document).ready()
Please update your code as following:
$(document).ready(function(){
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
})
is your code surrounded by:
$(function(){
//your code here
});
? or
$(document).ready(function(){
//your code here
});
? , because you should wait until the <a></a> element is ready before adding your click listener to it. try the code above or place your code at the bottom of the html right before the </body> tag or just right after the <a></a> element. that should work
EDIT: since your links are added dynamically call your $( '.filelink' ).click() function right after they are added
I had the same problem, because I changed the window.location.search in my event handler:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
window.location.search = "something";
});
To fix my problem I used window.location.hash (which is more what I wanted anyway).
For me, the issue was a syntax error in the Javascript code.
I substituted a php variable to one of the JS variable like below,
var myvar = "<?php echo $myvar; ?>";
which produced the below result,
var myvar = "value in "myvar" which is not escaped";
It worked when I escaped the variable.
Please check if there is any syntax error in your code.
I want to show loader when someone clicks on any element on my site.
My Code:
(function ($) {
$('body').append("<div id='loader-box'></div>");
$("loader-box").html("");
$("a").on('click', function (e) {
$("loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
});
}(jQuery));
The problem is that append does not work. I do not understand why. Thanks!
--- UPDATE ---
I found a solution, thanks to all especially Andrei Cristian Prodan who helped me to solve the problem with .on() function. I also use the wrong function to add "loader-box" div.
This is my code:
(function($){
$("body").prepend('<div id="loader-box"></div>');
$("#loader-box").html("");
$("html").on("click", "a",function(){
$("#loader-box").html('<div class="loader-wrapper"><div class="loader-image"></div></div>');
});
}(jQuery));
Thanks!
You are missing a "#" in your selector $("#loader-box");
Also if you are executing this code before the anchors exist in your page (for e.g. at the top of your body or inside the header), the click will not be assigned because $('a') will be empty.
Do this instead: $('html').on('click', 'a', function() {...} );
Your selectors are just a little off; missing #:
<script>
$(function($){
$('body').append("<div id='loader-box'></div>");
$("#loader-box").html("");
$("a").on('click', function(e){
$("#loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
});
});
</script>
And DOM ready needs to be written correctly.
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.
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.
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();