We Keep Coding

jQuery - how to delegate a toggle

How can I provide a toggle for a dynamically created element?
My code does not work:
JS
$("body").on('toggle', ".buttonA", function(){
function() {
..do stuff
},
function() {
.. revert stuff
}
});

Try this:
$('body').on('click','.buttonA', function () {
var toggled = $(this).data('toggled');
$(this).data('toggled', !toggled);
if (!toggled) {
//..do stuff
}
else {
//.. revert stuff
}});

If you are using jQuery,you can use .live() methods for binding a dynamically created element.
$('#hello').live("click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
I didn't use jQuery for a long time.So I don't know the method is valid or not.But it is very easy to write a new method to resolve this requirement.The more important thing is you bind the element whether or not.

Very simple jquery custom function throws error

I have the following code:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$.addRemoveButton();
});
And I get the following error message from firebug:
TypeError: $.addRemoveButton is not a function
$.addRemoveButton();
Why and how can I fix this?

You need to define a selector, try this:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$(document).addRemoveButton();
});
Here is working jsFiddle.

You need to apply that to any DOM.
Example
jQuery Code
$(function()
{
$.fn.addRemoveButton = function() {
alert(1);
};
$('#letit').addRemoveButton();
});
HTML Code
<div id="letit"></div>

or, you can create it as a jQuery global function:
$(document).ready(function() {
$.addRemoveButton = function() { // removed the .fn
alert(1);
};
$.addRemoveButton();
});
This binds the function to the jQuery object, where you can then use it like in your original example.
See this post for the difference between jQuery.fn.method and jQuery.method

FadeOut, Replace HTML & FadeIn

I'm having a few issues getting a simple JQuery function to work that fades an element out, replaces the image within and fades back in again.
My function looks like this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html="<img src='page4.jpg'>";
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html="<img src='page5.jpg'>";
$("#rightPage").fadeIn("slow");
});
}
The fade in/out section works fine but the HTML is not being replaced with the new images. Can you see a problem with this?

function nextPage() {
$("#leftPage").fadeOut("slow", function () {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function () {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
You're assigning a string to .html which is actually a function that takes a string as an argument, instead of being a property you can assign things to.
Notice I've changed .html = "" to .html("") in the above snippet. This now passes a string to .html(), which updates the element accordingly.

The correct syntax for .html() is:
$("#leftPage").html("<img src='page4.jpg'>");

Try this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
jquery's html is a function, not a property. You pass in the html you want to replace the elements contents with as a parameter

Try:
$("#leftPage").html("<img src='page4.jpg'>");
and:
$("#rightPage").html("<img src='page5.jpg'>");

You're using jQuery's .html() wrong
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}

How do i create a method/function in Jquery

How do i create a method in Jquery
For example
function dosomething()
{
// do something
}
dosomething();// i can call the function this way
How can i define function like dosomething() and call them in jquery?
Thanks

In exactly the same way. jQuery is JavaScript.
function doSomething() {
// do something
}
$(function () {
doSomething(); // call doSomething on document ready.
});

You can create a basic jQuery function:
(function($)
{
$.fn.myFunc = function()
{
return this.each(function()
{
alert("do something for each element return by JQuery object");
});
};
})(jQuery);
Doing the above allows me to $("#myElement").myFunc();
Don't forget that jQuery is javascript. Javascript is not jQuery.

You can read up on jQuery plugin authoring here

whats wrong with this jquery

I'm getting syntax error in firebug here is the code :
$('#moderator-attention').live('toogle', function(){
function () {
$(".moderator-tex").show();
},
function () {
$(".moderator-tex").hide();
}
});
I want to create a toogle function, when button is clicked then textarea with class moderator-tex should appear .. and if other button is clicked then should be hidden ..

Here's the solution: http://api.jquery.com/live/#multiple-events
And the syntax error occurs because you have something like this:
function() {
function() {
},
function() {
}
}
And this makes no sense.

Based on your question/comments maybe you ought to try this :
$("input:radio").click(function() {
var value = $this("attr", "value");
if(value == "expected value"){
$(".moderator-tex").show();
}else{
$(".moderator-tex").hide();
}
});
You should set some value for this particular radio button to make this work

Try this:
$('#moderator-attention').live('toogle', function(){
$(".moderator-tex").slideToggle();
}
});
If your textarea is not created on-the-fly, you can even try:
$('#moderator-attention').click(function(){
$(".moderator-tex").slideToggle();
});

$('#moderator-attention').live('toogle', function () {
$('.moderator-text').toggle();
});
Would be how I would do it.
Not quite sure what you're trying to achieve doing it your way...