Pobieranie danych z klikniecia w obrazek ajax Opcje

[teez]

Witam,

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

[PHP] pobierz, plaintext 
		<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<form action="here" method="post">
<div id="sMale" style="display:none;">
 
 
<img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="2" style="margin-top: 3px;" />
<img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="3" style="margin-top: 3px;" />
<img src="{$this->settings['public_dir']}gp/skins/2.png" class="skins" id="4" 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"); } });
</script>
 
[PHP] pobierz, plaintext 

W jaki sposób mogę pobrać jaki 'id' został wybrany?

[masahuku]

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 
$('.skins').click(function(event) {
alert($(this).attr('id'));
});
[HTML] pobierz, plaintext 

[teez]

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 
<?php
if(isset($_POST['send'])
{
$cos = $_POST['cos'];
 
}
?>
[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]

A chodzi Ci o odczytanie tego po stronie PHP (IMG:style_emoticons/default/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]

Dzięki Ci kolego za szybką pomoc, nie wiem czy do końca rozumiem :

[PHP] pobierz, plaintext 
<script>
$('.skins').click(function(event) {
$.get('index.php?app=gp&id=id', {'id' : $(this).attr('id')}, function(data) {
})
});
 
</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=

Ten post edytował teez 7.04.2013, 20:13:09

[masahuku]

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

[teez]

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

Ten post edytował teez 7.04.2013, 21:22:50