Custom delete dialogs about jquery-datatables-editable HOT 7 CLOSED

Hi,

Regarding the standard confirmaiton I agree it is not really nice. However, if 
you have any other modal/synchronous dialog, you can use it instead of standard 
one in the fnOnDeleting function e.g.: 

fnOnDeleting: function(tr, id) {
     return MyCustomConfirm("Do you want to delete a record with an id " + id); ;
}

In this method you will have id of the record that will be deleted end row. 
this function is called on the beginning of the delete event so I cannot add 
anything before.

If you can create any function that open e.g. modal UI dialog and syncronously 
return true/false you cna inject it into this function and it will work.

Regards,
Jovan

Thanks for the reply.

To my knowledge, other than the one built into the browser, there are no other 
truly synchronous dialogs.

The 'modal' ones from jquery-ui are still asynchronous and operate off of 
callbacks.
This means that even tho they are modal and prevent users from acessing other 
parts of the page while being shown, they don't pause the javascript at that 
point. They open the dialog, and return immediately. 


Haven't fully thought this out.. but would this work.
When the delete button is pressed, you still fire off a method that calls us 
(just like the fnOnDeleting). It will pass the tr, id, but also a function that 
we are to execute on someone clicking OK.

That function is really just a handle to _fnOnRowDelete.

We then will make the call to that depending on ok/cancel.. etc.. 

At that point you can remove this line from _fnOnRowDelete:
if (properties.fnOnDeleting($('tr.' + properties.sSelectedRowClass, oTable), 
id)) {

The only thing you have to figure out is how to gracefully degrade (if someone 
doesn't want to provide their own custom dialog).. 

-k

i did the change and it works just fine.. 

in your code i make fnOnDeleting take the next couple of lines as a callback:

        //Called when user deletes a row
        function _fnOnRowDelete(event) {
            iDisplayStart = _fnGetDisplayStart();
            if ($('tr.' + properties.sSelectedRowClass + ' td', oTable).length == 0) {
                //oDeleteRowButton.attr("disabled", "true");
                _fnDisableDeleteButton();
                return;
            }
            var id = fnGetCellID($('tr.' + properties.sSelectedRowClass + ' td', oTable)[0]);
            properties.fnOnDeleting($('tr.' + properties.sSelectedRowClass, oTable), id, function (){ 
                properties.fnStartProcessingMode();
                $.ajax({ 'url': properties.sDeleteURL,
                    'type': properties.sDeleteHttpMethod,
                    'data': 'id=' + id,
                    "success": _fnOnRowDeleted,
                    "dataType": "text",
                    "error": function (response) {
                        properties.fnEndProcessingMode();
                        properties.fnShowError(response.responseText, "delete");
                        properties.fnOnDeleted("failure");

                    }
                });                 

                }
            );
        }


In our code (already have a dialog created earlier in the code, not shown here 
for brevity) i use the fnOnDeleting to dynamically set the buttons, the "Delete 
Service" is now set to call your code, and then i open the dialog:

            }).makeEditable({
                sUpdateURL: "updateServiceName.htm",
                sAddURL: "addServiceName.htm",
                sDeleteURL: "deleteServiceName.htm",
                sDeleteRowButtonId: "deleteServiceButton",
                fnOnDeleting : function (tr, id, deleteCallback) { 
                        $deleteServiceDialog.dialog("option", "buttons",
                        {
                        "Delete Service": function() {
                            deleteCallback();
                            $( this ).dialog( "close" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                );
                $deleteServiceDialog.dialog('open');

                },


Hopefully that helps illustrate what I was getting at... 

Ok,

That makes sense. Please take the version 1.2.4 and see how this is implemented 
in the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/custom-messages.html 
page.

Regards,
Jovan 

Yep.. that works like a champ.

You can update your custom-messages page to remove the return false;
It is unecessary.
By default fnOnDeleting will return undefined, which evaluates to false and 
thus you don't get a second call to _fnDeleteRow.

                    fnOnDeleting: function (tr, id, fnDeleteRow) {
                        jConfirm('Please confirm that you want to delete row with id ' + id, 'Confirm Delete', function (r) {
                            if (r) {
                                fnDeleteRow(id);
                            }
                        });
//                        return false;   <-- safe to strike this one out.
                    }


Thanks again for your quick responses.. nice to see someone dedicated to their 
projects.

-k

Thanks for your suggestion now it really looks better.

returning false instead of default - yes you are right but this is a 
programming style. I don't like to rely on default behaviour/conversion (too 
much bugs appear in that case). Therefore, I always like to explicitly return a 
value what is expected but you are right it will work in both cases.

I'm closing this issue.

Completely understand you logic.

-k

explicitly