Using the jquery.confirm function on change event of checkbox

Question

I am using jquery.confirm which i picked up from http://myclabs.github.io/jquery.confirm/

Objective :- I am trying to pop up a confirmation box with different text on check and uncheck of the checkbox. On check of the checkbox a confirmation box should pop up showing the message "Are You Sure to add the media", if user clicks "Yes I am", i am sending the corresponding ajax call for adding the media and making the checked property true. On uncheck of the checkbox the confirmation should pop up showing the message "Are you Sure to delete the media", again if the user selects "Yes I am", a ajax call is being made with for deletion and checked property is set to false.

The checkbox is:

<input type="checkbox" id="media">

Now the issue is although the flow is going correctly, the confirmation box is showing the same textMessage on both check and uncheck of the checkbox.

"Are You sure to add the media".

Instead it should change the text since the textMessage is changing on each check and uncheck. This is the first time i am using the confirmation box.

This is the code.

var textMessage=" to add the media?";
    $('#media').change(function() {
            //var checked=$(this).is(":checked");
            var me=this;
            $("#media").confirm({
                            title:"Confirmation",
                            text:"Are You Sure" + textMessage,
                            confirm: function(btn) {
                                if(textMessage === " to add the media"){
                                    $(me).prop("checked", true);
                                    mediachecked=false;
                                    textMessage=" to delete the media?";
                                    //Making the ajax calls for addition                                                          
                                    }
                                else{
                                    $(me).prop("checked",false);
                                    mediachecked=true;
                                    textMessage=" to add the media?";
                                    //Making the ajax calls for deletion
                                    }
                            },
                            cancel: function(btn) {
                            },
                             confirmButton: "Yes I am",
                             cancelButton: "No"
                            });
        });

Thanks in advance for the help.

Answer 1

Ok, I think I got this figured out. jQuery.confirm expects you to attach the event on to a button (or checkbox as in your case). The way you have done it, you should have used the manual trigger method. Anyway, I was able to get this to work without modifying too much of your code:

//The checkbox. Notice the data attribute that will hold the confirm text message
<input type="checkbox" id="media" data-text="Are you sure you want to add the media?" />

And below is the jQuery code (Abridged for brevity). Instead of listening for the change event of the checkbox, and re-attaching the confirm event listener each time (which was the problem with your code), you should straight away attach the confirm event listener once to the checkbox and then use some method to change the confirm dialog text. I have used the data- attribute to store the text, which jQuery.confirm automatically uses as it's prompt text. See below code:

//Notice the btn.data(...) call to change value of 'data-text'...
$("#media").confirm({
    title:"Confirmation",
    confirm: function(btn) {
        if(!btn.is(":checked")){
            btn.prop("checked", true);
            btn.data("text","Are you sure you want to delete the media?");
            //Making the ajax calls for addition                                                          
        }else{
            btn.prop("checked",false);
            btn.data("text","Are you sure you want to add the media?");
            //Making the ajax calls for deletion
        }
    },
    cancel: function(btn) {},
    confirmButton: "Yes I am",
    cancelButton: "No"
});