Jak zaimplementować okno dialogowe „potwierdzenie” w oknie dialogowym JQuery UI?

148

Próbuję użyć javascript:alert()okna dialogowego interfejsu użytkownika JQuery, aby zastąpić brzydkie pudełko. W moim scenariuszu mam listę elementów, a obok każdego z nich miałbym przycisk „usuń” dla każdego z nich. pseudo html będzie wyglądać następująco:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

W części JQ, w dokumencie gotowym, najpierw ustawiłbym element div tak, aby był modalnym oknem dialogowym z niezbędnym przyciskiem i ustawił te „a”, aby uruchamiały się w celu potwierdzenia przed usunięciem, na przykład:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, tu jest problem. w trakcie inicjalizacji okno dialogowe nie będzie miało pojęcia, kto (element) go uruchomi, a także identyfikator elementu (!). Jak mogę skonfigurować zachowanie tych przycisków potwierdzających, aby jeśli użytkownik nadal wybierał TAK, skorzystał z linku, aby go usunąć?

xandy
źródło
1
Looooong szukał rozwiązania: stackoverflow.com/a/18474005/1876355
Pierre

Odpowiedzi:

166

Po prostu musiałem rozwiązać ten sam problem. Kluczem do tego, aby to zadziałało, było to, że dialogmusi być częściowo zainicjowany wclick module obsługi zdarzeń dla łącza, z którym chcesz użyć funkcji potwierdzania (jeśli chcesz użyć tego dla więcej niż jednego łącza). Dzieje się tak, ponieważ docelowy adres URL łącza musi zostać wstrzyknięty do modułu obsługi zdarzeń w celu kliknięcia przycisku potwierdzenia. Użyłem klasy CSS, aby wskazać, które linki powinny mieć zachowanie potwierdzenia.

Oto moje rozwiązanie, wyabstrahowane, aby nadać się na przykład.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Uważam, że to zadziała, jeśli możesz wygenerować swoje linki za pomocą klasy CSS ( confirmLinkw moim przykładzie).

Oto plik jsfiddle z zawartym w nim kodem.

W celu pełnego ujawnienia zauważę, że poświęciłem kilka minut na ten konkretny problem i udzieliłem podobnej odpowiedzi na to pytanie , która również była wówczas bez akceptowanej odpowiedzi.

Paul Morie
źródło
2
+1 prawie działa ... ale zobacz odpowiedź od @lloydphillips na korektę
rohancragg
Czy ktoś jeszcze zauważył, że spowoduje to pełne PostBack w UpdatePanel? Jak to naprawić?
Homer
3
Jest coś w tej odpowiedzi i odpowiedziach @lloydphillips, co po prostu mi nie odpowiada. Pierwotne pytanie dotyczy przycisku „usuń” (link). Zasadniczo nie zaleca się używania odsyłacza (HTTP GET) do operacji zmieniającej stan (takiej jak DELETE). Obie te odpowiedzi zakładają, że użytkownik ma włączoną obsługę JavaScript. Jeśli javascript jest wyłączony, linki zostaną uruchomione, a operacja usuwania (lub cokolwiek innego) uruchomi się bez potwierdzenia, co może być katastrofalne. Miałem nadzieję, że znajdę odpowiedź, która rozwiązałaby ten problem.
echo
@echo: Myślałem o tym samym. Żeby było dobrze, myślę, że musi istnieć inna strona, która prosi o potwierdzenie, czy JS jest wyłączony. Jeśli JS można pominąć tę stronę. Może przez inny parametr get, np. Confirm = true. Naprawdę trudne i uciążliwe jest branie pod uwagę przypadków zi bez JS. Tworzenie stron internetowych to bałagan.
robsch
1
@sree Sure. Możesz wyodrębnić funkcję, która przyjęła nazwę identyfikatora do użycia jako parametr i wykonała wywołania jQuery w celu skonfigurowania programów obsługi zdarzeń dla przekazanego identyfikatora.
Paul Morie
59

Okazało się, że odpowiedź Paula nie do końca działa, ponieważ sposób, w jaki ustawiał opcje PO wywołaniu okna dialogowego w zdarzeniu kliknięcia, był nieprawidłowy. Oto mój kod, który działał. Nie dostosowałem tego do przykładu Paula, ale to tylko różnica między wąsami kota, ponieważ niektóre elementy są nazwane inaczej. Powinieneś być w stanie to rozwiązać. Korekta znajduje się w ustawieniach opcji dialogowych dla przycisków zdarzenia kliknięcia.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

Mam nadzieję, że pomoże to komuś innemu, ponieważ ten post pierwotnie doprowadził mnie do właściwej ścieżki, pomyślałem, że lepiej opublikuję korektę.

lloydphillips
źródło
1
Nie rozumiem, co zrobiłeś, co różniło się od odpowiedzi Paula.
Grant Birchmeier
2
Dla mnie wygląda dobrze. Jedyną rzeczą, którą chciałbym sugest byłoby użyć onzamiast click, jak to będzie nadal działać, jeśli (przykładowo) pole jest odświeżana przy użyciu jQuery - api.jquery.com/on
Aaron Newton
1
hah "różnica kociego wąsika" - muszę częściej używać tego wyrażenia.
Chad Gorshing,
27

Stworzyłem własną funkcję dla okna dialogowego potwierdzenia interfejsu jQuery. Oto kod

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Teraz, aby użyć tego w swoim kodzie, po prostu napisz następujące

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Trwać.

d-koder
źródło
To dobre rozwiązanie, jest bardzo podobne do mojego, którego używam do pobierania adresu URL Ajax i szybkiego wyświetlania ... funkcja JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({resizable: false, width: 770, height: 470, modal: true, buttons: {"Close": function () {$ (this) .dialog ( "zamknij"); $ ("# dialog"). remove ();}}}); }
conners
6

Proste i krótkie rozwiązanie, które właśnie wypróbowałem i działa

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

następnie po prostu dodaj klasę = "confirm" do swojego linku i działa!

user681365
źródło
Wiadomość .text zawiera pytanie „Jasne?” ale nie daje wyboru tak / nie, ok / anuluj. W jaki sposób użytkownik wskazuje, czy jest „pewien”, czy „nie jest pewien”?
Genki
6

To jest moje rozwiązanie… mam nadzieję, że pomoże każdemu. Jest napisany w locie, a nie kopiowany, więc wybacz mi wszelkie błędy.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Osobiście wolę to rozwiązanie :)

edycja: Przepraszam ... naprawdę powinienem to wyjaśnić bardziej szczegółowo. Podoba mi się, bo moim zdaniem to eleganckie rozwiązanie. Gdy użytkownik kliknie przycisk, który musi być najpierw potwierdzony, zdarzenie jest anulowane, tak jak powinno. Po kliknięciu przycisku potwierdzenia rozwiązaniem nie jest symulacja kliknięcia łącza, ale wywołanie tego samego natywnego zdarzenia jquery (kliknięcia) na oryginalnym przycisku, które zostałoby uruchomione, gdyby nie było okna dialogowego potwierdzenia. Jedyną różnicą jest inna przestrzeń nazw zdarzenia (w tym przypadku „potwierdzona”), dzięki czemu okno dialogowe potwierdzenia nie jest ponownie wyświetlane. Natywny mechanizm Jquery może wtedy przejąć kontrolę i wszystko może działać zgodnie z oczekiwaniami. Kolejną zaletą jest to, że można go używać do przycisków i hiperłączy. Mam nadzieję, że wyraziłem się wystarczająco jasno.

BineG
źródło
Rozważ edycję swojego posta i powiedz społeczności, dlaczego wolisz to rozwiązanie. Co sprawia, że ​​jest to dla Ciebie lepsze?
Fuzzical Logic
Edytowałem post. Mam nadzieję, że teraz ma to więcej sensu. Kiedy to napisałem, wydawało się to tak jasne, że nie było potrzeby komentowania. Co za różnica, kiedy
wróciłem do
Świetne jako bardzo czyste rozwiązanie! Nigdy wcześniej nie czytaj o przestrzeniach nazw zdarzeń. Dziękuję za to!
griffla
PIĘKNE! „..ale wywołać to samo natywne zdarzenie jquery (kliknięcie) na oryginalnym przycisku…” brzmi beauutifulll !! Dzięki za $("#btn").trigger("click.confirmed");
Irf
4

Wiem, że to stare pytanie, ale oto moje rozwiązanie wykorzystujące atrybuty danych HTML5 w MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

Kod JS:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});
Woggles
źródło
Podoba mi się to rozwiązanie, dzięki. Łatwy do zrozumienia i działa dla mnie. Nie użyłem części @ Url.Action, ale działa ona z adresem URL wygenerowanym przez mój serwer MVC (PHP / Symfony2).
Fazy
3

Czy to da radę?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});
i ja
źródło
Dzięki za tę odpowiedź. Jestem pewien, że go przetestuję (a mimo to wygląda na funkcjonalny). Jednym z problemów, które dostrzegłem w wielu odpowiedziach, jest brak ogólności. Jeśli strona zawiera inny zestaw elementów sterujących (lub linków itp.), Które wymagały potwierdzenia, wydaje się, że potrzebujemy wielu deklaracji dotyczących interakcji / działania. Stary sposób javascript, tj. Href = "javascript: confirm ('link_url');" jest prosty i elegancki i pasuje do wszystkich podobnych przypadków. Oczywiście metoda javascript jest zbyt natrętna, aby ludzie bez javascript całkowicie przegapili link. Jeszcze raz dziękuję za świetną odpowiedź.
xandy
3

Jak powyżej. Poprzednie posty zaprowadziły mnie na właściwą ścieżkę. Tak to zrobiłem. Pomysł polega na tym, aby mieć obraz obok każdego wiersza w tabeli (generowany przez skrypt PHP z bazy danych). Po kliknięciu obrazu użytkownik zostałby przekierowany do adresu URL, w wyniku czego odpowiedni rekord zostałby usunięty z bazy danych, jednocześnie pokazując dane związane z klikniętym rekordem w oknie dialogowym jQuery UI.

Kod JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Dialog div:

<div id="confirmDelete" title="Delete User?"></div> 

Link do obrazu:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

W ten sposób możesz przekazać wartości pętli PHP do okna dialogowego. Jedynym minusem jest użycie metody GET do faktycznego wykonania akcji.

LukeP
źródło
2

Co powiesz na to:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Przetestowałem to w tym html:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Usuwa cały element li, możesz go dostosować do swoich potrzeb.

kgiannakakis
źródło
2

(Od 22.03.2016 pobieranie na stronie, do której prowadzi link, nie działa. Zostawiam link tutaj, na wypadek, gdyby programista w pewnym momencie go naprawił, ponieważ jest to świetna mała wtyczka. Oryginalny post jest następujący. alternatywa i link, który faktycznie działa: jquery.confirm .)

Może to być zbyt proste dla Twoich potrzeb, ale możesz wypróbować tę wtyczkę jQuery confirm . Jest naprawdę prosty w użyciu iw wielu przypadkach spełnia swoje zadanie.

grahamesd
źródło
Odsyłacz prowadzi mnie do profilu, do którego się prowadzi. Wygląda na to, że nie widzisz wtyczki, chyba że jesteś członkiem premium.
Zane,
Zaktualizowałem link, więc znowu działa. Deweloper musi przekierowywać stary link do swojego profilu na LinkedIn. Jeśli zmieni go ponownie, po prostu wygoogluj go za pomocą "jquery confirm plugin nadia".
grahamesd
Dzięki! Chociaż już zaimplementowałem swoją wersję teraz, nadal będę miał wygląd.
Zane
link znów jest martwy
Valamas
1

Chociaż nienawidzę używać eval, wydawało mi się to najłatwiejszym sposobem, bez powodowania wielu problemów w zależności od różnych okoliczności. Podobna do funkcji settimeout javascript.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>
SethT
źródło
1

Sam natknąłem się na to i otrzymałem rozwiązanie, które jest podobne do kilku odpowiedzi tutaj, ale zaimplementowane nieco inaczej. Nie podobało mi się wiele fragmentów javascript lub gdzieś zastępczy div. Chciałem uogólnionego rozwiązania, które mogłoby być następnie używane w HTML bez dodawania javascript przy każdym użyciu. Oto co wymyśliłem (to wymaga jQuery UI):

JavaScript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

W HTML nie są potrzebne żadne wywołania ani odwołania javascript:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Ponieważ atrybut title jest używany do zawartości div, użytkownik może nawet uzyskać pytanie potwierdzające, najeżdżając kursorem na przycisk (dlatego nie użyłem atrybutu tytułu dla kafelka). Tytuł okna potwierdzenia to treść tagu alt. Fragment kodu javascript można dołączyć do uogólnionego dołączenia .js, a po prostu stosując klasę, masz ładne okno potwierdzenia.

redreinard
źródło
0
$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });
Thulasiram
źródło
0

UWAGA: Za mało przedstawiciela, aby skomentować, ale odpowiedź BineG działa doskonale w rozwiązywaniu problemów związanych z ogłaszaniem zwrotnym ze stronami ASPX, co zostało podkreślone przez Homera i echo. Na cześć, oto odmiana wykorzystująca dynamiczne okno dialogowe.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});
Draghon
źródło
0

Inna odmiana powyższego, w której sprawdza, czy kontrolka jest „asp: linkbutton” lub „asp: button”, która renderuje się jako dwie różne kontrolki HTML. Wydaje mi się, że działa dobrze, ale nie testowałem go szczegółowo.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });
Drauka
źródło
0

Szukałem tego do użycia na przyciskach linków w widoku Gridview ASP.NET (kompilacja kontrolki GridView w poleceniach), więc akcja „Potwierdź” w oknie dialogowym musi aktywować skrypt generowany przez formant Gridview w czasie wykonywania. to zadziałało dla mnie:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });
chinkchink
źródło
eval () może być szkodliwy! Przy okazji, muszę przytoczyć tę część twojego kodu: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);To w ogóle nie ma sensu!
Sk8erPeter
0

Wiem, że to pytanie jest stare, ale po raz pierwszy musiałem użyć okna dialogowego z potwierdzeniem. Myślę, że to najkrótsza droga.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Mam nadzieję, że to lubisz :)

Mollo
źródło
0

Osobiście postrzegam to jako powtarzające się wymaganie w wielu widokach wielu aplikacji ASP.Net MVC.

Dlatego zdefiniowałem klasę modelu i widok częściowy:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

I mój częściowy pogląd:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

A potem, za każdym razem, gdy potrzebujesz go w widoku, po prostu używasz @ Html.Partial (w zrobiłem to w skryptach sekcji, aby zdefiniować JQuery):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

Sztuczka polega na określeniu JQueryClickSelector, który będzie pasował do elementów, które wymagają potwierdzenia w oknie dialogowym. W moim przypadku wszystkie kotwice z klasą SyLinkDelete ale może to być identyfikator, inna klasa itp. Dla mnie była to lista:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
Frederick Samson
źródło
ASP.Net MVC z jQuery.
Frederick Samson
0

Bardzo popularny temat, a Google wyszukuje to dla zapytania „jquery dialog close, które zdarzenie zostało kliknięte”. Moje rozwiązanie poprawnie obsługuje zdarzenia YES, NO, ESC_KEY, X. Chcę, aby moja funkcja zwrotna była wywoływana bez względu na sposób usunięcia okna dialogowego.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Łatwo jest przekierować przeglądarkę na nowy adres URL lub wykonać coś innego na funkcji retval.

Kto ja
źródło
0

Tyle dobrych odpowiedzi;) Oto moje podejście. Podobny do użycia eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

A użycie wygląda następująco:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
Daniel Więcek
źródło
0

Po wyjęciu z pudełka interfejs użytkownika JQuery oferuje następujące rozwiązanie:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Możesz to dodatkowo dostosować, podając nazwę funkcji JQuery i przekazując tekst / tytuł, który chcesz wyświetlić jako parametr.

Źródła: https://jqueryui.com/dialog/#modal-confirmation

stef
źródło
-1

Cóż, to jest odpowiedź na twoje pytania ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

upewnij się, że masz jquery 1.4.4 i jquery.ui

Costa
źródło
To jeden z najbrzydszych kodów, jakie widziałem od lat. Używasz przestarzałych atrybutów (takich jak LANGUAGE="JavaScript"), używasz wielkich i małych liter mieszanych, mieszasz zwykłe kody JS z kodami jQuery zupełnie niepotrzebnie i ustawiasz style za pomocą JS zamiast CSS (brzydki i semantycznie niepoprawny), a przy okazji, swój styl modyfikacja (zwykłym JS) jest absolutnie nieistotna w odniesieniu do pierwotnego pytania. Zdecydowanie powinieneś skrócić i upiększyć swój kod i skupić się na odpowiedzi na pierwotne pytanie.
Sk8erPeter
-1

Łatwy sposób z odrobiną javascript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}
Lukas
źródło
2
Chodziło w szczególności o uniknięcie używania domyślnych funkcji javascript alert / confirm itp., Więc nie jest to rozwiązanie tego pytania.
redreinard