Question

How can I implement the jQueryUI Dialog as a confirm dialog box?

Current code:

$("#formular_submit").button().click(function () {
    var meinArray = []; //ein neues Array definieren für die <a href> links
    var say = $("[value='1']:checked").length;
    //Wenn kein Checkbox gesetzt ist, Fehler Meldung
    if (say == 0) {
        alert("Bitte waehlen Sie eine aus.");
        return false;
    }
    //Wenn ein oder mehere gewählt...    
    if (say >= 1) {
        $("[value='1']:checked").each(function () {
            //Alle Links mit "Title" versehen sind, in link Variable
            var link = $("a#links_jquery").attr('title');
            //Alle Werte, die im "link" gespeicher sind, hängt man an das Array an(mit push Method)
            meinArray.push(link);
        });
        //Ausgabe mit Return, mach das, ansonsten False
        return confirm("Möchten Sie wirklich diese News löschen : " + meinArray);
    }
    return false;
}); //formular_submitFunction END
​

This is an example: http://jsfiddle.net/aldimeola1122/9MnGh/

How can I do that?

Thanks in advance.

Answer 1

To implement a jQueryUI Dialog as a confirm, you need to cancel the click event on your submit button and implement a handler on your “Confirm” button that submits the form.

Here’s an example (with an updated fiddle to see it in action):

$(document).ready(function() {
    $("#formular_submit").button().click(function(e) {
        var say = $("[value='1']:checked").length,
            d = $('<div />'),
            p = $('<p />'),
            ul = $('<ul />'),
            li = $('<li />');

        //Wenn kein Checkbox gesetzt ist, Fehler Meldung
        if (say === 0) {
            d.append(p.clone().text('Bitte waehlen Sie eine aus.')).dialog({
                "buttons": {
                    "schließen": function (e) {
                        $(this).dialog('close');
                    }
                }
            });
        }
        //Wenn ein oder mehere gewählt...    
        if (say > 0) {
            $("[value='1']:checked").each(function() {
                //Alle Links mit "Title" versehen sind, in link Variable
                var self = $(this),
                    link = self.siblings('label').find('a.links_jquery').attr('title');
                ul.append(li.clone().text(link));
            });
            //Ausgabe mit Return, mach das, ansonsten False
            d.append(p.clone().text('Möchten Sie wirklich diese News löschen:')).append(ul);
            d.dialog({
                "buttons": {
                    "schließen": function (e) {
                        $(this).dialog('close');
                    },
                    "bestätigen": function (e) {
                        $(this).dialog('close');
                        $('form#meinFormular').submit();
                    }
                }
            });
        }
        e.preventDefault()
        return false;
    }); //formular_submitFunction END
});​

Also, I apologize in advance if I named anything incorrectly in German. I only know what Google Translate tells me. 🙂