Jennifer Anthony
Jennifer Anthony

Reputation: 2277

Not work true my function?

I want after click on link show alert box with tow option ok and cancel, if user click on button ok return it function is true and if click on button cancel return it function is false, problem is here that after click on link always return is true. How can fix it?

Example: http://jsfiddle.net/MaGyp/

function myalert() {
    var result = true;
    var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
    $('body').append($alertDiv);
    $('.ok').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
        result = true;
    });
    $('.cancel').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
        result = false;
    });
    $alertDiv.fadeIn(100);
    $('#appriseOverlay').css('display', 'block');
    return result;
};

$('.iu').click(function () {
    alert(myalert());
    if (myalert() == true) {
        alert('ok')
    } else {
        alert('no')
    }
});

Update:

...
$('.iu').click(myalert)
function callback(result) {
    //
    if(result){
        alert(result);
        $('.image_upbg').each(function(){$(this).removeClass().addClass(unique())});
        var get_class = '.'+$(this).closest('div').attr('class');
        var get_val = $(this).closest('a').find('input').attr('value');
        //alert(get_val);
        var val = 'val_upimg1=' + get_val;
        $(get_class).fadeOut('slow');
          $.ajax({
                type: "POST",
                dataType: 'json',
                url: 'delete_upimg',
                data: val,
                cache: false,
                success: function (data) {
                        $(get_class).fadeOut('slow');
                },
                "error": function (x, y, z) {
                    // callback to run if an error occurs
                    alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
                }
       });
    }else{
        alert('no')
    }
}

Upvotes: 0

Views: 167

Answers (3)

Jayendra
Jayendra

Reputation: 52769

you are not waiting for the ok and cancel clicks so would always return true.

Modified the fiddle - http://jsfiddle.net/MaGyp/3/

function myalert() {
    var result = true;
        //var hide = $('.alert').fadeOut(100);
        //var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
        $('body').append($alertDiv);

        $alertDiv.fadeIn(100);
        $('#appriseOverlay').css('display','block');
        return result;
    };

$(document).ready(function(){
    $('.ok').live('click',function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display','none');
        alert('ok');
    });

    $('.cancel').live('click',function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display','none');
        alert('cancel');
    });

    $('.iu').click(function() {
        myalert();
    });
})

Upvotes: 0

njr101
njr101

Reputation: 9619

If you want to keep it structured like this, you could use a callback after the user responds.

http://jsfiddle.net/MaGyp/2/

function myalert() {
  ...do stuff here
        $('.ok').click(function () {
            callback(true);     // callback when user clicks ok
        });
        $('.cancel').click(function () {
            callback(false);    // callback when user clicks cancel
        });
}

$('.iu').click(myalert);

function callback(result) {
    alert(result);
}

As suggested by Ben you could improve this by making the callback function a parameter to the first function to remove the tight coupling.

Upvotes: 2

Benjamin Atkin
Benjamin Atkin

Reputation: 14715

myalert() returns before result is set to true or false. To fix it I suggest having myalert() take a callback function as a parameter, and calling it inside the click() handlers within myalert(). The .iu event handler will then need to be split into two functions, one of which is the callback passed into myalert().

Upvotes: 1

Related Questions