Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pobieranie danych z klikniecia w obrazek ajax
Forum PHP.pl > Forum > PHP
teez
7.04.2013, 19:29:55
Witam,

Chciałbym się dowiedzieć w jaki sposób pobierane jest ID z takiego wyboru jak tu:

[PHP] pobierz, plaintext 
  1. 		<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2.  
  3. <form action="here" method="post">
  4. <div id="sMale" style="display:none;">
  5.  
  6.  
  7. <img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="2" style="margin-top: 3px;" />
  8. <img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="3" style="margin-top: 3px;" />
  9. <img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="4" style="margin-top: 3px;" /></div>
  10. 	<input type="hidden" name="skin" id="sid" value=""><br />
  11. 	<div align="center"><input type='submit' class='input_submit' value='Submit' /></div>
  12.  
  13. </form>
  14. <script type="text/javascript">
  15. jQuery(".skins").click( function () { if( jQuery("#sid").val() != jQuery(this).attr("id")){ jQuery(".skins").fadeTo("fast", 0.33); jQuery(this).fadeTo("fast", 1); jQuery("#sid").val( jQuery(this).attr("id") ); } else { jQuery(".skins").fadeTo("slow", 1); jQuery("#sid").val(""); } }); 
  16.  
  17. jQuery("#charsex").change( function () { if(jQuery(this).val() == '1') { jQuery("#sMale").show("slow"); jQuery("#sFemale").hide("slow"); } else if (jQuery(this).val() == '0') { jQuery("#sFemale").show("slow"); jQuery("#sMale").hide("slow"); } else { jQuery("#sMale").hide("slow"); jQuery("#sFemale").hide("slow"); } });
  18. </script>
  19.  
[PHP] pobierz, plaintext



W jaki sposób mogę pobrać jaki 'id' został wybrany?
masahuku
7.04.2013, 19:46:28
Masz eventa na clicku na obrazkach (po klasie skins) - $('.skins'). W funkcji masz obiekt "kliknięty" i po $(this).attr('id') wyrzucasz sobie co kto kliknął. 

[HTML] pobierz, plaintext 
  1. $('.skins').click(function(event) {
  2. alert($(this).attr('id'));
  3. });
[HTML] pobierz, plaintext
teez
7.04.2013, 19:48:34
Dziękuję Ci bardzo, aczkolwiek nie mam całkowicie pojecia jak to "wpoić" w kod PHP. Dajmy, że wygląda on tak:

[PHP] pobierz, plaintext 
  1. <?php
  2. if(isset($_POST['send'])
  3. {
  4. $cos = $_POST['cos'];
  5.  
  6. }
  7. ?>
[PHP] pobierz, plaintext

W jaki sposób z tego "$cos" zrobić właśnie pobranie tego ID? Wybacz, ale w JS jestem całkowicie zielony.
masahuku
7.04.2013, 19:56:06
A chodzi Ci o odczytanie tego po stronie PHP smile.gif. To zmienia postać rzeczy. Widzisz skrypty JS są wykonywane po stronie klienta i PHP nie ma do nich dostępu. Żeby je przekazać do skryptu PHP musisz rzucić je albo przez POST'a albo przez GET'a.

czyli np.

$('.skins').click(function(event) {
$.get('/adres_twojej_akcji.php', {'id' : $(this).attr('id')}, function(data) {
// tutaj twój callback
})
});

Dzięki temu asynchronicznie (fancy AJAX style) wywołasz stronę '/adres_twojej_akcji.php' i w tym właśnie skrypcie możesz zaczytać swoją wartość z tablicy $_GET.

http://api.jquery.com/jQuery.get/

Jeśli nie chcesz robić tego asynchronicznie tylko po prostu przekierować użytkownika to daj te ID'ki w parametrze url'a (zwykły <a>).
teez
7.04.2013, 20:10:37
Dzięki Ci kolego za szybką pomoc, nie wiem czy do końca rozumiem :

[PHP] pobierz, plaintext 
  1. <script>
  2. $('.skins').click(function(event) {
  3. $.get('index.php?app=gp&id=id', {'id' : $(this).attr('id')}, function(data) {
  4. })
  5. });
  6.  
  7. </script>
[PHP] pobierz, plaintext


A później w pliku:

$id = $_GET['id'];

Czy dobrze łapię?

$.get('index.php?app=gp&id=id', {'id' : $(this).attr('id')}, function(data) {
Nie wiem jak wstawic to "id" w $id=
masahuku
7.04.2013, 20:14:29
Tak. Tylko pamiętaj że to leci "w tle" i nie zobaczysz tej strony "w okienku" jak po kliknięciu linka. W funkcji callback'a (function(data)) zmienna "data" przechowuje odpowiedź serwera. I zawsze sprawdzaj $_GET'a issetem bo notice'y to też błędy smile.gif. Jak masz Firefox'a zassaj sobie firebug'a to w konsoli będziesz miał odpowiedź. A jak masz chrome'a to narzędzia dla developerów i zakładka Network (czy tam "Sieć" - nie wiem czy już to spolonizowali). A jak masz IE/Opera to zmień przeglądarke. smile.gif
teez
8.04.2013, 17:11:59
Ok, mam w konsoli firebuga odpowiedź:

Kod
http://localhost/f/index.php?app=gp&module=createchar&id=20


Ale.. Nie mogę tego odczytać w PHP po wysłaniu formularza ( action=[...]createchar ), poneiważ wtedy get['id'] sie zeruje.

Ktoś moze podpowiedzieć? Nie mam kompletnie pojęcia jak to zrobić. Ładuje mi się wszystko OK w konsoli, ale po wysłaniu formularza jest form action="plik.php" i tam wysyła, więc zeruje ten get..

Próbuję na czystym kodzie:

Kod
<HEAD>
<TITLE> TEST </TITLE>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</HEAD>

<form action="index.php" method="post">
    <table class="ipb_table">
        <tbody>
        <tr class="header">
        </tr>
        <tr>
            <td width="42%" align="right"><strong>Imię</strong></td>
            <td align="left"><input type="text" class="input_text" name="imie" size="25" maxlength="24" placeholder="Martin"></td>
        </tr>
        <tr>
            <td width="42%" align="right"><strong>Nazwisko</strong></td>
            <td align="left"><input type="text" class="input_text" name="nazwisko" size="25" maxlength="24" placeholder="Diesel"></td>
        </tr>
        <tr>
            <td align="right"><strong>Wiek</strong></td>
            <td align="left"><input type="text" class="input_text" name="charage" size="25" maxlength="4" placeholder="21 lat"></td>
        </tr>
        <tr>
            <td align="right"><strong>Płeć</strong></td>
            <td align="left">
                <select id="charsex" name="charsex" class="input_text" style="min-width: 158px;">
                    <option value="-1" selected="selected"> </option>
                    <option value="1">Mężczyzna</option>
                    <option value="0">Kobieta</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
        
        
<div id="sMale" style="display:none;">
        
            
            <img src="http://localhost/f/public/gp/skins/2.png" class="skins" id="2" style="margin-top: 3px;" />

            <img src="http://localhost/f/public/gp/skins/7.png" class="skins" id="7" style="margin-top: 3px;" />

            
    </div>

    <div id="sFemale" style="display:none;">
        

            <img src="http://localhost/f/public/gp/skins/9.png" class="skins" id="9" style="margin-top: 3px;" />

            <img src="http://localhost/f/public/gp/skins/12.png" class="skins" id="12" style="margin-top: 3px;" />

    </div>
            
            
    <input type="hidden" name="skin" id="sid" value=""><br />
    <div align="center"><input type='submit' class='input_submit' value='Submit' /></div>

</form>
<script type="text/javascript">
jQuery(".skins").click( function () { if( jQuery("#sid").val() != jQuery(this).attr("id")){ jQuery(".skins").fadeTo("fast", 0.33); jQuery(this).fadeTo("fast", 1); jQuery("#sid").val( jQuery(this).attr("id") ); } else { jQuery(".skins").fadeTo("slow", 1); jQuery("#sid").val(""); } });
jQuery("#charsex").change( function () { if(jQuery(this).val() == '1') { jQuery("#sMale").show("slow"); jQuery("#sFemale").hide("slow"); } else if (jQuery(this).val() == '0') { jQuery("#sFemale").show("slow"); jQuery("#sMale").hide("slow"); } else { jQuery("#sMale").hide("slow"); jQuery("#sFemale").hide("slow"); } });

$('.skins').click(function(event) {
$.post('index.php', {'id' : $(this).attr('id')}, function(data) {

})
});

</script>
<?php

        echo $_POST['id'];
                echo "<br/>";
        echo $_POST['imie'];
                echo "<br/>";
        echo $_POST['nazwisko'];
                echo "<br/>";
        echo $_POST['charage'];
                echo "<br/>";
        exit();

?>


Próbowałem i getem i postem to wysyłać.. Nie wysyła nic..
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.