Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] prompt, jesli puste lub anulowane
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
deha21
Witam,
Robię edycję nazwa kategorii. Najszybszym rozwiązaniem wydał mi się prompt z ajaxem.
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var id = $(this).attr("id");
  3. var name = $(this).attr("title");
  4. var type = $("#type").val();
  5. var answer = prompt("Wpisz nazwę kategorii:",name);
  6. if ((answer != "") || (answer != "null")) {
  7. $.ajax({
  8. type: "POST",
  9. url: "a_editcategory.php",
  10. data: "id="+id+"&name="+answer+"&type="+type});
  11. } else { alert("Nazwa kategorii nie może być pusta"); }
  12. });
[JAVASCRIPT] pobierz, plaintext

Szczerze mówiąc nie wiem jakie są operatory w javie ale IF w przykładnie ze zwykłym confirmem działa dobrze, a tutaj nie. Mianowicie chodzi o to, że gdy anulujemy prompt to wpisuje się wartość NULL. Chciałbym zrobić tak, że gdy gdy wartość z prompt jest pusta wyskakuje alert (to działa), natomiast przy anulowaniu nicnie powinno się dziać... a dzieje się - wpisuje się NULL.
230005
Zamiast

[JAVASCRIPT] pobierz, plaintext
  1. if ((answer != "") || (answer != "null")) {
  2.  
[JAVASCRIPT] pobierz, plaintext


daj

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. if ((answer != "") || (answer != null)) {
  3.  
[JAVASCRIPT] pobierz, plaintext


I nie java, tylko javascript...
vokiel
Może tak:
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var $this = $(this);
  3. var id = $this.attr("id");
  4. var name = $this.attr("title");
  5. var type = $("#type").val();
  6.  
  7. if (answer = prompt("Wpisz nazwę kategorii:",name)){
  8. $.ajax({
  9. type: "POST",
  10. url: "a_editcategory.php",
  11. data: {id: id, name: answer, type: type}, /* tak się przekazuje parametry POST */
  12. function (data){
  13. /* nie chcesz odbierać wyników z serwera? */
  14. }
  15. });
  16. } else {
  17. alert("Nazwa kategorii nie może być pusta");
  18. }
  19. });
[JAVASCRIPT] pobierz, plaintext
deha21
Nie działa niestety.
Wiem, że nie java, tak mi się z rozpędu tylko napisało.

EDIT: Rozwiązałem. Dla potomnych winksmiley.jpg
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var id = $(this).attr("id");
  3. var name = $(this).attr("title");
  4. var type = $("#type").val();
  5. var answer = prompt("Wpisz nazwę kategorii:", name);
  6. if (answer=="") { alert("Nazwa kategorii nie może być pusta");}
  7. else if (answer) {
  8. $.ajax({
  9. type: "POST",
  10. url: "a_editcategory.php",
  11. data: {id: id, name: answer, type: type},
  12. });
  13. } else { return false; }
  14. });
[JAVASCRIPT] pobierz, plaintext
vokiel
Cytat(deha21 @ 17.12.2009, 19:41:40 ) *
Nie działa niestety.


Co nie działa, jak nie działa, co pokazuje FireBug?
deha21
Sorki, twoje działa. Dopiero teraz zobaczyłem Twojego posta.
Przesyłanie zmiennych które pokazałeś jest lepsze - prostrze i czytelniejsze winksmiley.jpg

Hmm a jak zrobić, żeby po alercie, że nazwa nie może być pusta pojawiło się ponownie zapytanie o zmianę nazwy? Zrobić to ja tak zrobiłem, tyle że if'y już go nie obejmują.

Co do odbierania wyników przez serwer to miałem problem w IE7 ale udało mi się go rozwiązać. Czy to dobry sposób?
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var id = $(this).attr("id");
  3. var name = $(this).attr("title");
  4. var type = $("#type").val();
  5. var answer = prompt("Wpisz nazwę kategorii:", name);
  6. if (answer=="") { alert("Nazwa kategorii nie może być pusta"); return false;}
  7. else if (answer) {
  8. $.ajax({
  9. type: "POST",
  10. url: "a_editcategory.php",
  11. data: {id: id, name: answer, type: type},
  12. });
  13. window.location.reload();
  14. } else { return false; }
  15. });
[JAVASCRIPT] pobierz, plaintext
vokiel
Cytat(deha21 @ 17.12.2009, 20:02:10 ) *
Hmm a jak zrobić, żeby po alercie, że nazwa nie może być pusta pojawiło się ponownie zapytanie o zmianę nazwy? Zrobić to ja tak zrobiłem, tyle że if'y już go nie obejmują.
Stworzyć oddzielną funkcję, która w przypadku, gdy użytkownik nic nie napisze wywoła samą siebie, aż do skutku.

Cytat(deha21 @ 17.12.2009, 20:02:10 ) *
W FF bezproblemu przeładowuje mi aktualną stronę, chodzi o to, żeby się odświeżyła z nowymi wynikami. Natomiast w IE7 nie działa. Próbowałem z tego co napisałeś, z onsuccess i complete :/

Możesz wywołać następne zapytanie ajaxowe, które pobierze od nowa zawartość tego co zmienia pierwsze. Przeładowanie strony nie ma tu sensu, bo tracisz cały myk z tym ajaxem w pierwszej funkcji. Jeśli akcje wykonujesz ajaxem, a później przeładowujesz stronę, to po co ten ajax w pierwszej kolejności, prawda? Ja czasem robię tak, że jako callback dla success daję drugie zapytanie, które pobiera zmienioną treść.
deha21
Cytat(vokiel @ 17.12.2009, 20:41:23 ) *
Możesz wywołać następne zapytanie ajaxowe, które pobierze od nowa zawartość tego co zmienia pierwsze. Przeładowanie strony nie ma tu sensu, bo tracisz cały myk z tym ajaxem w pierwszej funkcji. Jeśli akcje wykonujesz ajaxem, a później przeładowujesz stronę, to po co ten ajax w pierwszej kolejności, prawda? Ja czasem robię tak, że jako callback dla success daję drugie zapytanie, które pobiera zmienioną treść.

Masz racje. Mógłbyś mi to głębiej wytłumaczyć? Jestem w miarę nowy z jquery, a tym bardziej z ajaxem. A callbacka nie rozumiem... czytam, czytam i nie rozumiem winksmiley.jpg
vokiel
Funkcja wywołująca samą siebie nie jest przypisana do jQuery, javascript, php czy innych, to ogólny wzorzec postępowania.

[JAVASCRIPT] pobierz, plaintext
  1. function DoMeAgain(parametr){
  2. if (parametr>0){
  3. // ok kontynuuj
  4. }else{
  5. parametr++;
  6. DoMeAgain(parametr);
  7. }
  8. }
[JAVASCRIPT] pobierz, plaintext


Callback jest wywołaniem zwrotnym, do którego przekazywane jest dalsze działanie aplikacji.

jQuery ma takie coś, że każda funkcja może przyjmować jako jeden z parametrów nazwę funkcji zwrotnej - tzw callback. Zatem mógłbyś zrobić coś na wzór:
[JAVASCRIPT] pobierz, plaintext
  1. function updateFields(){
  2. $("#tabelka").load("pobierzTabelet.php");
  3. }
  4. $.ajax({
  5. type: "POST",
  6. url: "a_editcategory.php",
  7. data: {id: id, name: answer, type: type},
  8. success: function(){
  9. updateFields();
  10. }
  11. });
[JAVASCRIPT] pobierz, plaintext
deha21
Aha, czyli pobierzTabelet.php pobiera zmienną którą wywołuje ajax. Myślałem, że to będzie trudniejsze winksmiley.jpg
Co do funkcji load() to ostatnio z nią kombinowałem i niestety są z nią problemy w IE :/

Odnośnie funkcji wywołującą samą siebie ponownie to móbyłm zrobić tak?
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var id = $(this).attr("id");
  3. var name = $(this).attr("title");
  4. var type = $("#type").val();
  5. function Zapytanie() {
  6. var answer = prompt("Wpisz nazwę kategorii:", name);
  7. if (answer=="") { alert("Nazwa kategorii nie może być pusta"); Zapytanie();}
  8. else if (answer) {
  9. $.ajax({
  10. type: "POST",
  11. url: "a_editcategory.php",
  12. data: {id: id, name: answer, type: type},
  13. });
  14. window.location.reload();
  15. } else { return false; }
  16. }
  17. });
[JAVASCRIPT] pobierz, plaintext

Już wyłączyłem serwer i nie sprawdziłem czy działa, ale to chyba coś na takiej zasadzie?
vokiel
To zależy co masz na tej stronie, co te .edit edytuje. Możesz to zrobić live w js, czyli po prostu podmienić wartość na tą edytowaną, bądź po wykonaniu zapytania załadować od nowa. Napisz co ten skrypt robi będzie mi łatwiej opisać.

Raczej w ten deseń:
[JAVASCRIPT] pobierz, plaintext
  1. function Zapytanie() {
  2. var answer = prompt("Wpisz nazwę kategorii:", name);
  3. if (answer) {
  4. return answer;
  5. }else{
  6. //alert("Nazwa kategorii nie może być pusta");
  7. Zapytanie();
  8. }
  9. }
  10.  
  11.  
  12. $(".edit").click(function(){
  13. var id = $(this).attr("id");
  14. var name = $(this).attr("title");
  15. var type = $("#type").val();
  16. var answer = Zapytanie();
  17. $.ajax({
  18. type: "POST",
  19. url: "a_editcategory.php",
  20. data: {id: id, name: answer, type: type},
  21. success: function(data){
  22. window.location.reload();
  23. }
  24. });
  25. });
[JAVASCRIPT] pobierz, plaintext
deha21
Oba działają. Zastosowałem jednak swój zapis bo jest dla mnie czytelniejszy - wszystko mam w jednym miejscu. A funkcja i tak będzie działać w obrębie tylko tej akcji.
Mam taki kod:
[JAVASCRIPT] pobierz, plaintext
  1. $(".edit").click(function(){
  2. var id = $(this).attr("id");
  3. var name = $(this).attr("title");
  4. var type = $("#type").val();
  5. function Edycja() {
  6. var answer = prompt("Wpisz nazwę kategorii:", name);
  7. if (answer=="") { alert("Nazwa kategorii nie może być pusta"); Edycja();}
  8. else if (answer) {
  9. $.ajax({
  10. type: "POST",
  11. url: "a_editcategory.php",
  12. data: {id: id, name: answer, type: type},
  13. success: function(){window.location.reload();},
  14. });
  15. } else { return false; }
  16. }
  17. Edycja();
  18. });
[JAVASCRIPT] pobierz, plaintext

Z tym, że teraz w IE7 (nie wiem jak inne) nie chce wywoływać się prompt. Strona przeładowuje się a właściwie to ładuje plik index.php. Dziwne bo nigdzie nie ma do niego odwołania, poza tym, że jest <a href="#">. Ale to raczej nie to.
I jeszcze jedna rzecz., Da się zrobić w IE żeby prompt wyglądał jakoś inaczej? W FF jest spoko, w miare ładny, pojawia się na środku natomiast w IE wygląda jak sprzed wojny winksmiley.jpg I na dodatek pojawiasię w rogu ekranu (żeby chociaż to się dało zmienić). Aha, nie chce stosować żadnych customowatych wyglądów jakie oferuje jquery. Chodzi mi tylko o zwykły komunikat z tekstem do wpisania.
Cytat(vokiel @ 18.12.2009, 09:28:33 ) *
To zależy co masz na tej stronie, co te .edit edytuje. Możesz to zrobić live w js, czyli po prostu podmienić wartość na tą edytowaną, bądź po wykonaniu zapytania załadować od nowa. Napisz co ten skrypt robi będzie mi łatwiej opisać.

A więc tak... Jest to strona z kategoriami, .edit to <a href>:
  1. <a href='' class='edit' id='".$row['id']."' title='".$row['name']."'>[edytuj]</a>

Po kliknięciu uruchamia się okienko z nazwą i po wpisania jest ona updatowana w bazie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.