how to access the currently attached element of a jBox inside jBox?

Question

I am using stephanwagner jBox to accomplish the following task.

I have a list link like:

<a href="#" rel="first" class="delete">Delete First</a>
<a href="#" rel="second" class="delete">Delete Second</a>
<a href="#" rel="third" class="delete">Delete Third</a>
<a href="#" rel="fourth" class="delete">Delete Fourth</a>

I am targeting these elements. On clicking them, shows me a confirmation to make sure if really want to delete something. But now matter which link I click, it always picks the first element in a row. I am using confirm with a callback function when pressed ok/yes.

Problem is, I am not able to get the currently clicked element. I used $(this), still not working. I think inside jBox, this refers to jBox itself.

Below is how I started

new jBox('Confirm',{
    attach: $('.delete'),
    title: 'Confirmation dialogue box',
    content: 'Do you want to continue?'

    confirm: function(){

        $.ajax({
            url: 'delete-file',
            data:{
                'path': $(this).attr('rel')  // It obviously didnt work as it is always selecting the first element in a row.
            }

        });

    },

    cancel: function(){

    }

});

Are you sure that plugin can attach `jBox` to all the selected elements ? - `attach: $('.delete')`. I don't think so. — Vigneswaran Marimuthu, Apr 14 '15 at 09:57

score 1 · Answer 1 · answered Jul 09 '19 at 14:11

You need to modificate plugin code like this: for example u load jBox.all.js in head section; then make changes in line 2032 to replace code "this.options.confirm()" with this one: "this.options.confirm(this.source)"! So in confirm-handler u get clicked elm:

confirm: function(elm){
   console.log(elm.attr('id'));
}

Similarly u can fix this problem to other event-handlers.

score 0 · Answer 2 · answered Apr 14 '15 at 10:06

Try it this way

$(.delete).each(function(){
new jBox('Confirm',{
    attach: $(this),
    title: 'Confirmation dialogue box',
    content: 'Do you want to continue?'

    confirm: function(){

        $.ajax({
            url: 'delete-file',
            data:{
                'path': $(this).attr('rel')  // It obviously didnt work as it is always selecting the first element in a row.
            }

        });

    },

    cancel: function(){

    }

});
})

how to access the currently attached element of a jBox inside jBox?

2 Answers2