Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Button na obrazek.
Forum PHP.pl > Forum > XML, AJAX > AJAX
GoldeNx3
Witam! Korzystam z tego skryptu:

http://www.webskrypty.pl/2010/dodawanie-re...-pomoca-jquery/

Ale mam do Was pytanie, jak zamiast buttona wrzucić swój obrazek?
tolomei
Witaj.

Skrypt jest zrobiony tak, aby formularz działał zarówno przy włączonym jak i wyłączonym JavaScript.
Obrazek <img ... /> można przemieścić lub osadzić w divie jeśli tego potrzebujesz - najważniejsze, aby posiadał nadane id.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("form#submit").submit(function() {
  4. // Przechwytujemy wartości z formularza i przesyłamy je do pliku insert.php
  5. var imie = $('input[name=imie]');
  6. var nazwisko = $('input[name=nazwisko]');
  7.  
  8. // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
  9. if(imie.val() == "") {
  10. $('div.blad').fadeIn(400);
  11. // Usuwamy wiadomość o błędzie po 4 sekundach
  12. setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
  13. return false;
  14. }
  15.  
  16. // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
  17. if(nazwisko.val() == "") {
  18. $('div.blad').fadeIn(400);
  19. // Usuwamy wiadomość o błędzie po 4 sekundach
  20. setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
  21. return false;
  22. }
  23.  
  24. var data = 'imie=' + imie.val() + '&amp;nazwisko=' + nazwisko.val();
  25.  
  26. $.ajax({
  27. type: "POST",
  28. url: "insert.php",
  29. data: data,
  30. success: function(){
  31. // Usuwamy wpisane dane
  32. $('#imie').val('');
  33. $('#nazwisko').val('');
  34. // Wyświetlamy wiadomość o poprawnym dodaniu użytkownika
  35. $('div.dodano').fadeIn(400);
  36. // Usuwamy wiadomość o poprawnym dodaniu użytkownika po 4 sekundach
  37. setTimeout(function(){ $("div.dodano").fadeOut(400) }, 4000);
  38. }
  39.  
  40. });
  41. return false;
  42. });
  43.  
  44. $('button#submit').css('display', 'none');
  45. $('img#wyslij').click(function(){
  46. $("form#submit").trigger('submit');
  47. }).css('display', '');
  48.  
  49. });
  50. </script>


  1. <form id="submit" method="post" name="submit" action="">
  2. <legend>DODAJ UŻYTKOWNIKA</legend>
  3.  
  4. <label for="imie">Imię:</label>
  5. <br />
  6. <input type="text" name="imie" id="imie" class="text" size="20" />
  7. <br />
  8. <label for="nazwisko">Nazwisko:</label>
  9. <br />
  10. <input type="text" name="nazwisko" id="nazwisko" class="text" size="20" />
  11. <br /><br />
  12. <img src="..." id="wyslij" style="display: none;" />
  13. <button type="submit" id="submit"> Dodaj użytkownika </button>
  14. </form>
  15.  
  16. <div class="dodano" style="display:none;">
  17. <p><img class="tick" src="tick.png" alt="" />Użytkownik został dodany do bazy.</p>
  18. </div>
  19. <div class="blad" style="display:none;">
  20. <p><img class="error" src="error.png" alt="" />Uzupełnij pola w formularzu!</p>
  21. </div>


Pozdrawiam.
GoldeNx3
Okej, w success zrobiłem sobie jeszcze alert.. Lecz po kliknięciu w przycisk, alert się pojawia cały czas, ja go zamknę a on się pojawia, jak to naprawić?

I kolejny problem.
Z bazy wyciągam listę np. użytkowników.
Gdy kliknę na ten przycisk, to zrobiłem tak, że ustawia mi nr GG na ID użytkownika którego kliknę (Tak dla testów).
Lecz bez względów na kogo kliknę, zawsze to będzie ID = 10..
Pobieram to poprzez niewidoczne pole, które przybiera wartość danego ID użytkownika.
Pokazałem to pole i ID podaje dobrze, każdy użytkownik ma inne, ale ustawia zawsze to samo.

  1. <form id="submit" method="post" name="submit" action="">
  2. <button type="submit" name="'.$user['id'].'" id="submit">Dodaj do ulubionych</button>
  3. <img src="pages/acp/images/accept.png" id="wyslij" style="display: none;" />
  4. <button type="submit" name="'.$user['id'].'" id="submit"> Ulubione </button>
  5. <input type="text" name="imie" value="'.$user['id'].'">
  6. </form>


  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("form#submit").submit(function() {
  4. var imie = $('input[name=imie]');
  5. var data = 'imie=' + imie.val();
  6. $.ajax({
  7. type: "POST",
  8. url: "dodaj2.php",
  9. data: data,
  10. success: function(){
  11. $('#imie').val('');
  12. alert('Dodano!');
  13. }
  14. });
  15. return false;
  16. });
  17. $('button#submit').css('display', 'none');
  18. $('img#wyslij').click(function(){
  19. $("form#submit").trigger('submit');
  20. }).css('display', '');
  21. });
tolomei
Odnośnie pierwszego problemu - spróbuj coś takiego dać.
Zmiany dotyczą linii 3. oraz 4.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("form#submit").submit(function(e) {
  4. e.preventDefault();
  5. var imie = $('input[name=imie]');
  6. var data = 'imie=' + imie.val();
  7. $.ajax({
  8. type: "POST",
  9. url: "dodaj2.php",
  10. data: data,
  11. success: function(){
  12. $('#imie').val('');
  13. alert('Dodano!');
  14. }
  15. });
  16. return false;
  17. });
  18. $('button#submit').css('display', 'none');
  19. $('img#wyslij').click(function(){
  20. $("form#submit").trigger('submit');
  21. }).css('display', '');
  22. });
  23. </script>


Odnośnie problemów z id - czytałem 10 razy i nadal nic nie rozumiem...
GoldeNx3
Mam listę np. użytkowników.
W ukrytym polu zapisuje ich ID (Które pobiore z bazy).
W funkcji pobieram to ID i nadaje sobie w bazie dla testu gg = id.
Lecz ID zawsze jest = 10, mimo, że nadaje ID dobrze..

tolomei
Tyle rozumiem, że:
Przy generowaniu formularza - tworzysz <input type="hidden" name="userid" value="$user['id']" />.
Przesyłasz tą zmienną AJAX-em na serwer i zapisujesz ją w bazie.

Może po prostu za każdym razem jesteś zalogowany na użytkowniku o id = 10 ?
GoldeNx3
Nie, nie pobieram swojego ID, tylko pobieram to ID z listy użytkowników. Mam liste i tam mam te ID, klikam kolo ID Ustaw i ustawia mi zawsze id = 10, zamiast ID którego kliknąłem.

BTW. Alert dalej sie nie chce wylaczyc.
tolomei
Już wiem co i jak.

Oto skrypt dla Ciebie:

  1. <button id="fav_10" class="favbutton">Ulubione</button> <!-- numer 10 to id obrazka -->


  1. $(function(){
  2. $('button[id^="fav_"]').bind('click', function(){
  3. var aid = $(this).attr('id').split('_');
  4. var id = parseInt(aid[1], 10);
  5. $.ajax({
  6. type: "POST",
  7. url: "dodaj2.php",
  8. data: {imie: id},
  9. success: function(){
  10. alert('Dodano!');
  11. }
  12. });
  13. });
  14. });


Pozdrawiam.
GoldeNx3
Okej, a obrazek da się zamiast buttonu, czy to już będzie za dużo do przerobienia?

Dziękuję Ci bardzo. wink.gif
tolomei
Da się.
Poucz się jQuery to na prawdę nie jest trudna rzecz smile.gif

  1. <img id="fav_10" class="favbutton" /><!-- numer 10 to id obrazka -->


  1. $(function(){
  2. $('img[id^="fav_"]').bind('click', function(){
  3. var aid = $(this).attr('id').split('_');
  4. var id = parseInt(aid[1], 10);
  5. $.ajax({
  6. type: "POST",
  7. url: "dodaj2.php",
  8. data: {imie: id},
  9. success: function(){
  10. alert('Dodano!');
  11. }
  12. });
  13. }).css('cursor', 'pointer');
  14. });


Pozdrawiam.
GoldeNx3
I jeszcze ostatnia sprawa i będę szczęśliwy.
Po naciśnięciu na obrazek, albo, żeby skrypt przeladował bieżacą stronę ale bez przeładowania strony, albo, żeby zmienić obrazek.. ale w ten sposób:

Mam w ulubionych, zmienia obrazek na star.png nie mam, zmienia na star1.png
tolomei
Polecam http://api.jquery.com/

  1. <img id="fav_10" class="favbutton" src="star.png" /><!-- numer 10 to id obrazka -->


  1. $(function(){
  2. $('img[id^="fav_"]').bind('click', function(){
  3. var aid = $(this).attr('id').split('_');
  4. var id = parseInt(aid[1], 10);
  5. $.ajax({
  6. type: "POST",
  7. url: "dodaj2.php",
  8. data: {imie: id},
  9. success: function(){
  10. alert('Dodano!');
  11. }
  12. });
  13. $(this).attr('src', 'star1.png');
  14. }).css('cursor', 'pointer');
  15. });


Pozdrawiam.
GoldeNx3
Mam taką oto funkcję:

  1. <script type="text/javascript">
  2. $(function(){
  3. $('img[id^="fav_"]').bind('click', function(){
  4. var aid = $(this).attr('id').split('_');
  5. var id = parseInt(aid[1], 10);
  6. $.ajax({
  7. type: "POST",
  8. url: "dodaj2.php",
  9. data: {imie: id},
  10. success: function(){
  11. alert('Dodano!');
  12. }
  13. });
  14. $(this).attr('src', 'images/star2.png');
  15. }).css('cursor', 'pointer');
  16. $('img[id^="unfav_"]').bind('click', function(){
  17. var aid = $(this).attr('id').split('_');
  18. var id = parseInt(aid[1], 10);
  19. $.ajax({
  20. type: "POST",
  21. url: "dodaj2.php",
  22. data: {imie: id},
  23. success: function(){
  24. alert('Usunięto!');
  25. }
  26. });
  27. $(this).attr('src', 'images/star.png');
  28. }).css('cursor', 'pointer');
  29. });


I działa, jak dodam, ale jak kliknę drugi raz to już się nic nie dzieje..

Bo ja w skrypcie mam zapytanie do bazy, jeżeli jest ustawione na jeden to pokazuje start1.png a jak star.png..
tolomei
Musisz po stronie PHP sprawdzać jaka zmienna przyszła.
Teraz Ci zmieniłem nazwy zmiennych. Przyjrzyj się w kodzie.

  1. <script type="text/javascript">
  2. $(function(){
  3. $('img[id^="fav_"]').live('click', function(){
  4. var aid = $(this).attr('id').split('_');
  5. var id = parseInt(aid[1], 10);
  6. $.ajax({
  7. type: "POST",
  8. url: "dodaj2.php",
  9. data: {dodaj: id},
  10. success: function(){
  11. alert('Dodano!');
  12. }
  13. });
  14. $(this).attr('src', 'images/star2.png').attr('id', 'unfav_'+aid[1]);
  15. }).css('cursor', 'pointer');
  16. $('img[id^="unfav_"]').live('click', function(){
  17. var aid = $(this).attr('id').split('_');
  18. var id = parseInt(aid[1], 10);
  19. $.ajax({
  20. type: "POST",
  21. url: "dodaj2.php",
  22. data: {usun: id},
  23. success: function(){
  24. alert('Usunięto!');
  25. }
  26. });
  27. $(this).attr('src', 'images/star.png').attr('id', 'fav_'+aid[1]);
  28. }).css('cursor', 'pointer');
  29. });
  30. </script>


Pozdro.
GoldeNx3
Dobra, to nie działa..
Ale nie będę Was zamęczać więcej.
Zastowie tak jak jest czyli kliknę raz, zmienia się efekt i dodaje do bazy, kliknę drugi raz, usuwa z bazy rekord ale już obrazka nie zmienia. Dziękuję Wszystkim bardzo za pomoc.

Pozdrawiam.

#EDIT:
DZIAŁA!!! biggrin.gif
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.