Button na obrazek. Opcje

[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.

[PHP] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
 $("form#submit").submit(function() {
  // Przechwytujemy wartości z formularza i przesyłamy je do pliku insert.php
  var imie = $('input[name=imie]');
  var nazwisko = $('input[name=nazwisko]');
 
  // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
  if(imie.val() == "") {
   $('div.blad').fadeIn(400);
   // Usuwamy wiadomość o błędzie po 4 sekundach
   setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
   return false;
  }
 
  // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
  if(nazwisko.val() == "") {
   $('div.blad').fadeIn(400);
   // Usuwamy wiadomość o błędzie po 4 sekundach
   setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
   return false;
  }
 
  var data = 'imie=' + imie.val() + '&amp;nazwisko=' + nazwisko.val();
 
  $.ajax({
   type: "POST",
   url: "insert.php",
   data: data,
   success: function(){
    // Usuwamy wpisane dane
    $('#imie').val('');
    $('#nazwisko').val('');
    // Wyświetlamy wiadomość o poprawnym dodaniu użytkownika
    $('div.dodano').fadeIn(400);
    // Usuwamy wiadomość o poprawnym dodaniu użytkownika po 4 sekundach
    setTimeout(function(){ $("div.dodano").fadeOut(400) }, 4000);
   }
 
  });
  return false;
 });
 
 $('button#submit').css('display', 'none');
 $('img#wyslij').click(function(){
    $("form#submit").trigger('submit');
 }).css('display', '');
 
});
</script>
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<form id="submit" method="post" name="submit" action="">
   <fieldset>
    <legend>DODAJ UŻYTKOWNIKA</legend>
 
    <label for="imie">Imię:</label>
    <br />
    <input type="text" name="imie" id="imie" class="text" size="20" />
    <br />
    <label for="nazwisko">Nazwisko:</label>
    <br />
    <input type="text" name="nazwisko" id="nazwisko" class="text" size="20" />
    <br /><br />
    <img src="..." id="wyslij" style="display: none;" />
    <button type="submit" id="submit"> Dodaj użytkownika </button>
   </fieldset>
</form>
 
<div class="dodano" style="display:none;">
   <p><img class="tick" src="tick.png" alt="" />Użytkownik został dodany do bazy.</p>
</div>
<div class="blad" style="display:none;">
   <p><img class="error" src="error.png" alt="" />Uzupełnij pola w formularzu!</p>
</div>
[HTML] pobierz, plaintext 

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.

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

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
 $("form#submit").submit(function() {
  var imie = $('input[name=imie]');
  var data = 'imie=' + imie.val();
  $.ajax({
   type: "POST",
   url: "dodaj2.php",
   data: data,
   success: function(){
    $('#imie').val('');
    alert('Dodano!');
   }
  });
  return false;
 });
  $('button#submit').css('display', 'none');
 $('img#wyslij').click(function(){
    $("form#submit").trigger('submit');
 }).css('display', '');
});
</script>
[HTML] pobierz, plaintext 

Ten post edytował GoldeNx3 14.04.2012, 11:50:36

[tolomei]

Odnośnie pierwszego problemu - spróbuj coś takiego dać.
Zmiany dotyczą linii 3. oraz 4.

[PHP] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
 $("form#submit").submit(function(e) {
  e.preventDefault();
  var imie = $('input[name=imie]');
  var data = 'imie=' + imie.val();
  $.ajax({
   type: "POST",
   url: "dodaj2.php",
   data: data,
   success: function(){
    $('#imie').val('');
    alert('Dodano!');
   }
  });
  return false;
 });
  $('button#submit').css('display', 'none');
 $('img#wyslij').click(function(){
    $("form#submit").trigger('submit');
 }).css('display', '');
});
</script>
[PHP] pobierz, plaintext 

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.


Ten post edytował GoldeNx3 14.04.2012, 16:03:55

[tolomei]

Już wiem co i jak.

Oto skrypt dla Ciebie:

[HTML] pobierz, plaintext 
<button id="fav_10" class="favbutton">Ulubione</button> <!-- numer 10 to id obrazka -->
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(function(){
    $('button[id^="fav_"]').bind('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {imie: id},
            success: function(){
                alert('Dodano!');
            }
        });
    });
});
[PHP] pobierz, plaintext 

Pozdrawiam.

[GoldeNx3]

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

Dziękuję Ci bardzo. (IMG:style_emoticons/default/wink.gif)

[tolomei]

Da się.
Poucz się jQuery to na prawdę nie jest trudna rzecz (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
<img id="fav_10" class="favbutton" /><!-- numer 10 to id obrazka -->
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(function(){
    $('img[id^="fav_"]').bind('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {imie: id},
            success: function(){
                alert('Dodano!');
            }
        });
    }).css('cursor', 'pointer');
});
[PHP] pobierz, plaintext 

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/

[HTML] pobierz, plaintext 
<img id="fav_10" class="favbutton" src="star.png" /><!-- numer 10 to id obrazka -->
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(function(){
    $('img[id^="fav_"]').bind('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {imie: id},
            success: function(){
                alert('Dodano!');
            }
        });
        $(this).attr('src', 'star1.png');
    }).css('cursor', 'pointer');
});
[PHP] pobierz, plaintext 

Pozdrawiam.

[GoldeNx3]

Mam taką oto funkcję:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(function(){
    $('img[id^="fav_"]').bind('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {imie: id},
            success: function(){
                alert('Dodano!');
            }
        });
		$(this).attr('src', 'images/star2.png');
    }).css('cursor', 'pointer');
    $('img[id^="unfav_"]').bind('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {imie: id},
            success: function(){
                alert('Usunięto!');
            }
        });
		$(this).attr('src', 'images/star.png');
    }).css('cursor', 'pointer');
});
</script>
[HTML] pobierz, plaintext 

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..

Ten post edytował GoldeNx3 15.04.2012, 20:42:56

[tolomei]

Musisz po stronie PHP sprawdzać jaka zmienna przyszła.
Teraz Ci zmieniłem nazwy zmiennych. Przyjrzyj się w kodzie.

[PHP] pobierz, plaintext 
<script type="text/javascript">
$(function(){
    $('img[id^="fav_"]').live('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {dodaj: id},
            success: function(){
                alert('Dodano!');
            }
        });
		$(this).attr('src', 'images/star2.png').attr('id', 'unfav_'+aid[1]);
    }).css('cursor', 'pointer');
    $('img[id^="unfav_"]').live('click', function(){
        var aid = $(this).attr('id').split('_');
        var id = parseInt(aid[1], 10);
        $.ajax({
            type: "POST",
            url: "dodaj2.php",
            data: {usun: id},
            success: function(){
                alert('Usunięto!');
            }
        });
		$(this).attr('src', 'images/star.png').attr('id', 'fav_'+aid[1]);
    }).css('cursor', 'pointer');
});
</script>
[PHP] pobierz, plaintext 

Pozdro.

Ten post edytował tolomei 15.04.2012, 21:06:12

[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!!! (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował GoldeNx3 15.04.2012, 23:09:09