easiest confirm box plugin with jquery - javascript

My html code
<div id="delete">Delete</div>
My javascript code
$(function(){
$("#delete").click(function(){
var decision=decide("Do you really want to delete?");
});
});
function decide(str)
{
$("delete").after(str+'<button onclick="yes()">Yes</button><button onclick="no()">No</button>');
}
function yes(){return 1;}
function no(){return 0;}
Currently my yes and no are returning 0/1 but i want a return 0/1 from decide function depending upon no/yes.

Your code is asynchronous. You won't be able to assign it to your decision variable this way.
In other words: your decide function returns before the user clicks on any button, and will always return undefined.
Whatever you want to do with that Boolean, you'll have to do from within those yes/no functions.
Here's a quick sample of how to provide a callback:
$(function() {
$("#delete").click(function(){
decide("Do you really want to delete?", function(result) {
alert(result);
});
return false;
});
function decide(str, callback)
{
$('<div>'+str+'<button>Yes</button><button>No</button></div>')
.insertAfter("#delete")
.on('click', 'button', function() {
var result = $(this).text() == 'Yes' ? true : false;
console.log($(this).text(), result);
callback(result);
});
}
});​
Here's a demo: http://jsfiddle.net/x2Lf9/

Why not simple use a jquery plug in?
Try Impromptu
http://trentrichardson.com/Impromptu/

Related

Javascript: Trigger if confirm return true from different function

Is it possible to trigger my confirm condition to other function?
myphp.php
<input type="button" id="button1" class"button2">
<script>
$('#button1').on('click', function(){
if(confirm("Are you sure?")){
//my stuff
}else{
return false;
}
});
$('.button2).on('click', function(){
//if the confirm condition from first function return true
//i need to fire here as well without doing another if(confirm)
});
</script>
I would suggest you modularize your code by putting the logic you want to use in two places in a function that both places can call:
// The function doing the thing
function doTheThing(/*...receive arguments here if needed...*/) {
// ...
}
$('#button1').on('click', function(){
if(confirm("Are you sure?")){
doTheThing(/*...pass arguments here if needed...*/);
}else{
return false;
}
});
$('.button2').on('click', function(){
//if the confirm condition from first function return true
//i need to fire here as well without doing another if(confirm)
doTheThing(/*...pass arguments here if needed...*/);
});
Side note: I've shown it at the top level of your script, but if you haven't already (and you haven't in your question), I would suggest putting all of your code in an immediately-invoked scoping function in order to avoid globals:
(function() {
// The function doing the thing
function doTheThing(/*...receive arguments here if needed...*/) {
// ...
}
$('#button1').on('click', function(){
if(confirm("Are you sure?")){
doTheThing(/*...pass arguments here if needed...*/);
}else{
return false;
}
});
$('.button2').on('click', function(){
//if the confirm condition from first function return true
//i need to fire here as well without doing another if(confirm)
doTheThing(/*...pass arguments here if needed...*/);
});
})();

Calling a user defined jQuery function

I'm a javascript newbie and I'm trying to call a jQuery function in this way:
function getProducts(){
$.post("products.php",
{
customer_ID:$("#customers").val()
},
function(data,status){
return status && data !== "";
});
};
$(document).ready(function(){
$("#customers").change(function(){
if(getProducts){
alert("trovato");
$("#products").prop("disabled", false);
$("#products").html(data);
}else{
alert("non trovato");
$("#products").empty();
$("#products").prop("disabled", true);
}
});
});
The if-else statement in the ready doesn't work although the function getProducts works properly. The problem, I suppose, is in the function call. What am I wrong with this? Thank you.
You need to wrap the response with a callback, like so:
function getProducts(callback){
$.post("products.php",
{
customer_ID:$("#customers").val()
},
function(data,status){
callback(status && data !== "");
});
};
$(document).ready(function(){
$("#customers").change(function(){
getProducts(function(status) {
if(status){
alert("trovato");
$("#products").prop("disabled", false);
$("#products").html(data);
}else{
alert("non trovato");
$("#products").empty();
$("#products").prop("disabled", true);
}
});
});
});
I'm not quite sure if this will work because of the asynchronized call inside of the function.
The obvious mistake is that you have to call a function like that: function(). You just forgot the parentheses.
If it won't work after that fix, you have to rework your program to use callbacks where you have asynchron calls.

jQuery: Call a function twice

I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:
$('div').each(function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').truncate();
$(this).show();
}
});
The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?
Edit jsFiddle here: http://jsfiddle.net/g6PLu/
That's a named function literal.
The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.
Instead, create a normal function and pass it to each():
function truncate() { ...}
$('div').each(truncate);
What's the error message do you get?
You should create function and then call it as per requirement
Define the function
function truncate(){
$('div').each(function(){
});
}
Then call the function
truncate();
Another approach is to establish, then trigger, a custom event :
$('div').on('truncate', function() {
$(this).......;
}).trigger('truncate');
Then, wherever else you need the same action, trigger the event again.
To truncate all divs :
$('div').trigger('truncate');
Similarly you can truncate just one particular div :
$('div#myDiv').trigger('truncate');
The only prerequisite is that the custom event handler has been attached, so ...
$('p').trigger('truncate');
would do nothing because a truncate handler has not been established for p elements.
I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code
(function($) {
$.fn.truncate = function() {
this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
};
$.fn.untruncate = function() {
this.removeClass('closed').children().show();
};
})(jQuery);
$('div').truncate();
$('.truncate').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('closed')) {
$parent.untruncate();
} else {
$parent.truncate();
}
});

How to pass argument?

Solved, Yohoo
I have a dialog plugin, like this
$("#dialog").dialog({
click:function(){
alert(1);
},
'class':"dialog"
});
Following code is a chunk of main code that loop on options and check if key is a jQuery function and then call it else set it as attribute
$.each(options,function(key,val){
if(key in $.attrFn){
$('#div')[key](val); // I want pass arguments to this function
// equal $('#div').click(function(args){
// alert(1);
// });
// this is like jQuery ui dialog buttons options
} else {
$('#div').attr(key,val);
}
});
I want pass some arguments to the function, but I don't know how??
Example:
$("#dialog").dialog({
click:function(dialog){
dialog.disAppear();
},
'class':"dialog"
});
Solved:
$.each(v,function(q,w){
if(q in $.attrFn){
//console.log(dialog);
b[q](function(){
w(dialog);
});
} else {
b.attr(q,w);
}
});
Here is a working example of Dialog on http://jsfiddle.net/Jams/hcTTH/
There is a question on SO which may suits your requirements here it is How to pass a parameter to jQuery UI dialog event handler?
Other one is here
Passing data to a jQuery UI Dialog
we Can use JavaScript IIFE to pass arguments, so we can:
i wrapped it to function(){}, to prevent self execution
$.each(v,function(q,w){
if(q in $.attrFn){
if($.isFunction(w)) {
b[q](function(e){
w(e,dialog);
});
} else b[q](w);
} else {
b.attr(q,w);
}
});

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...

Categories