Question

i am using smoke.js which allows to style the classic alert javascript windows.

All you have to do is place .smoke before the alert ie. smoke.confirm()

The issue I am having is with the ok/cancel callback, it isnt working for me.

This is the example the website shows.

`You can implement these the same way you’d use the js alert()…just put “smoke.” in front of it.

The confirm() replacement, however, needs to be used just a little differently:

smoke.confirm('You are about to destroy everything. Are you sure?',function(e){
    if (e){
        smoke.alert('OK pressed');
    }else{
        smoke.alert('CANCEL pressed');
    }
});

and the code I have is;

$(".upb_del_bookmark").click( function() {
        if(smoke.confirm(delete_message)) {
            var post_id = $(this).attr('rel');
            var data = {
                action: 'del_bookmark',
                del_post_id: post_id
            };
            $.post(upb_vars.ajaxurl, data, function(response) {
                $('.bookmark-'+post_id).fadeOut();
                $('.upb_bookmark_control_'+post_id).toggle();
            });

It shows the style button and everything but when i click on OK it doesnt perform the function above, nothing happens.

So i rewrote it to

$(".upb_del_bookmark").click( function() {
        if(smoke.confirm(delete_message, function(e))) {
            if(e){
            var post_id = $(this).attr('rel');
            var data = {
                action: 'del_bookmark',
                del_post_id: post_id
            };
            $.post(upb_vars.ajaxurl, data, function(response) {
                $('.bookmark-'+post_id).fadeOut();
                $('.upb_bookmark_control_'+post_id).toggle();
            });
        }}

But now when i click it doesnt even show anything

I am not a programmer, Help!!!!!

If you want to try it go to latinunit.org login with david:123321 and then go to a post and try to add it to your favourites

Update

I tried the following, it shows the window but it doesnt perform the function;

$(".upb_del_bookmark").click( function() {
        smoke.confirm(delete_message, function(e) {
            if(e){
            var post_id = $(this).attr('rel');
            var data = {
                action: 'del_bookmark',
                del_post_id: post_id
            };
            $.post(upb_vars.ajaxurl, data, function(response) {
                $('.bookmark-'+post_id).fadeOut();
                $('.upb_bookmark_control_'+post_id).toggle();
            });
        }})
        return false;
    });

Here is the js file of the smoke script Link

When i click on cancel the following shows;

Uncaught TypeError: Property ‘callback’ of object # is not a
function Line:198
Uncaught TypeError: Property ‘callback’ of object # is not a
function Line:208

The following is what’s on those linesof the smoke script;

finishbuildConfirm: function (e, f, box)
    {
        smoke.listen(
            document.getElementById('confirm-cancel-' + f.newid),
            "click", 
            function () 
            {
                smoke.destroy(f.type, f.newid);
                f.callback(false);
            }
        );

        smoke.listen(
            document.getElementById('confirm-ok-' + f.newid),
            "click", 
            function () 
            {
                smoke.destroy(f.type, f.newid);
                f.callback(true);
            }
        );

Answer 1

The builtin javascript alert/confirm functions are synchronous, this is not. You need to handle the result of the confirm using the javascript callback pattern. You pass a function to the smoke.confirm() function which called when you need to respond to an action.

See the following code. The if around the smoke.confirm() has been removed and the handling code is wrapped in the function passed to the smoke.confirm() function.

$(".upb_del_bookmark").click( function() {
    smoke.confirm(delete_message, function(e) {
        if(e){
            var post_id = $(this).attr('rel');
            var data = {
                action: 'del_bookmark',
                del_post_id: post_id
            };
            $.post(upb_vars.ajaxurl, data, function(response) {
                $('.bookmark-'+post_id).fadeOut();
                $('.upb_bookmark_control_'+post_id).toggle();
            });
        }
    });
}

I highly recommend reading a little about the callback pattern in javascript. It’s very common and understanding it will help you use this plugin and many others.