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ąć?
źródło
Odpowiedzi:
Po prostu musiałem rozwiązać ten sam problem. Kluczem do tego, aby to zadziałało, było to, że
dialog
musi 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.
Uważam, że to zadziała, jeśli możesz wygenerować swoje linki za pomocą klasy CSS (
confirmLink
w 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.
źródło
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.
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ę.
źródło
on
zamiastclick
, jak to będzie nadal działać, jeśli (przykładowo) pole jest odświeżana przy użyciu jQuery - api.jquery.com/onStworzyłem własną funkcję dla okna dialogowego potwierdzenia interfejsu jQuery. Oto kod
Teraz, aby użyć tego w swoim kodzie, po prostu napisz następujące
Trwać.
źródło
Proste i krótkie rozwiązanie, które właśnie wypróbowałem i działa
następnie po prostu dodaj klasę = "confirm" do swojego linku i działa!
źródło
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.
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.
źródło
$("#btn").trigger("click.confirmed");
Wiem, że to stare pytanie, ale oto moje rozwiązanie wykorzystujące atrybuty danych HTML5 w MVC4:
Kod JS:
źródło
Czy to da radę?
źródło
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:
Dialog div:
Link do obrazu:
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.
źródło
Co powiesz na to:
Przetestowałem to w tym html:
Usuwa cały element li, możesz go dostosować do swoich potrzeb.
źródło
(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.
źródło
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.
źródło
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:
W HTML nie są potrzebne żadne wywołania ani odwołania javascript:
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.
źródło
źródło
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.
źródło
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.
źródło
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:
źródło
var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);
To w ogóle nie ma sensu!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.
Mam nadzieję, że to lubisz :)
źródło
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:
I mój częściowy pogląd:
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):
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:
źródło
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.
Łatwo jest przekierować przeglądarkę na nowy adres URL lub wykonać coś innego na funkcji retval.
źródło
Tyle dobrych odpowiedzi;) Oto moje podejście. Podobny do użycia eval ().
A użycie wygląda następująco:
źródło
Po wyjęciu z pudełka interfejs użytkownika JQuery oferuje następujące rozwiązanie:
HTML
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
źródło
Cóż, to jest odpowiedź na twoje pytania ...
upewnij się, że masz jquery 1.4.4 i jquery.ui
źródło
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.Łatwy sposób z odrobiną javascript
źródło