CODEWITHSUNDEEP
phpjquery
Adem İlhan
Adem İlhan

Reputation: 1500

How can I properly fetch id of images with jQuery?

I have 3 PHP pages and their functionality is to showing images that are stored in database and if you double click to one image, the properties of that image is showed on the screen.

"update.php" has 2 select boxes: main category and sub category. If you submit, the "list.php" is showed in "update.php" through jquery load(). It has also same relation with "list.php" and *"update_list.php"*. "list.php" contains images and if you double click one image, the *"update_list.php"* is showed at left part of the screen.

These are codes:

Update.php

 <?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../mystyle.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#buttonList").click(function(){
        var main_id=$('#selectMainProList').val();
        var sub_id=$('#selectSubProList').val();
        $('#list').load('list.php?sub_id='+sub_id+'&main_id='+main_id);
        });

    $("#selectMainProList").change(function(){
        var main_cat_id=$('#selectMainProList').val();
        $('#selectSubProList').load('update.html', function(){
            $('#spanSubProList').load('update.php?selected='+main_cat_id+' #selectSubProList');
        });
    });


});
</script>
</head>
<body>
<?php
    $posted_parent = getGet('selected'); //birbirine bağlı selectboxlar'da main selectbox'ın id'sini tutar.
?>
<form id="formProList" method="POST">
    <table align="center">
        <tr>
            <td>Ana Kategoriyi Seçiniz</td>
            <td>
                <span id="spanMainProList" name="spanMainProList">
                    <select id="selectMainProList" name="selectMainProList">
                        <option value="0">--------------------------</option>
                        <?
                            $sql="Select * from kategori where ust_kat_id='0'";
                            $result=mysql_query($sql);
                            while($row = mysql_fetch_row($result))
                            {
                                $main_pro_id=$row[0];
                                $main_pro_name=$row[1]; 

                                echo "<option value='".$main_pro_id."'>".$main_pro_name."</option>";

                            }
                        ?>
                    </select>
                </span>
            </td>
        </tr>
        <tr>
            <td>Alt Kategoriyi Seçiniz</td>
            <td>
                <span id="spanSubProList">
                    <select id="selectSubProList" name="selectSubProList">
                        <option value="0">--------------------------</option>
                        <?
                            $sql="Select * from kategori where ust_kat_id='$posted_parent'";
                            $result=mysql_query($sql);
                            while($row = mysql_fetch_row($result))
                            {
                                $sub_pro_id=$row[0];
                                $sub_pro_name=$row[1];  

                                echo "<option value='".$sub_pro_id."'>".$sub_pro_name."</option>";
                            }
                        ?>
                    </select>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="buttonList" name="buttonList" value="Search"/></td>    
        </tr>   
    </table>
</form>
<div id="list"></div>
</body>
</html>

list.php

<?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/mystyle.css" />
<link rel="stylesheet" type="text/css" href="../../css/tooltip.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("img").dblclick(function(){
        var id=$('#hiddenID').val();
        alert(id);
        $("#update_pro").slideToggle();
        $('#update_pro').load('update_list.php?id='+id);
        });





});
</script>
</head>
<body>
<?php
    $main_cat_id=getGet("main_id"); 
    $sub_cat_id=getGet("sub_id");   
?>
<form>
<table align="center">
<tr>
<td>    
    <table align="center">
        <tr>
            <?php
                $sql="SELECT * FROM urun WHERE alt_kat_id='$sub_cat_id' and ana_kat_id='$main_cat_id'";
                $result=mysql_query($sql);
                $count=mysql_num_rows($result);
                $i=0;
                while($row=mysql_fetch_assoc($result,0))
                {
                    $image_dir=$row["resim"];
                    $id=$row["id"];
                    $isim_tr=$row["isim_tr"];
                    $aciklama_tr=$row["aciklama_tr"];
                    if($i!=2)
                    {
                        echo "<td>";
                        echo "<a href='#' class='tt'><img src='$image_dir' height='150' width='150'/><span class='tooltip'><span class='top'></span><span class='middle'>$aciklama_tr--$id</span><span class='bottom'></span></span></a><br>";
                        echo "<center><input type='button' id='buttonProDelete' value='Delete' /></center>";
                        echo "<br><center>$isim_tr</center>";
                        echo "<input type='hidden' id='hiddenID' value='$id' />";
                        echo "</td>";
                        $i++;
                    }
                    else
                    {
                        echo "<tr>";
                        echo "</tr>";
                        echo "<td>";
                        echo "<a href='#' class='tt'><img src='$image_dir' height='150' width='150'/><span class='tooltip'><span class='top'></span><span class='middle'>$aciklama_tr--$id</span><span class='bottom'></span></span></a><br>";
                        echo "<center><input type='button' id='buttonProDelete' value='Delete' /></center>";
                        echo "<br><center>$isim_tr</center>";
                        echo "<input type='hidden' id='hiddenID' value='$id' />";
                        echo "</td>";
                        $i=1;

                    }
                }
            ?>
        </tr>
    </table>
</td>
<td><div id="update_pro"></div></td>
</tr>
</table>
</form>
</body>
</html>

update.list.php

<?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/mystyle.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<?php 

    $id=getGet("id");
    echo $id;

?>


</body>
</html>

The problem is that I cannot fetch the real id of image that I double clicked.. I always fetch the first one's id! I want to click the image, after that, I want to show the properties of that image in the same page.How can I do it?

Upvotes: 2

Views: 307

Answers (1)

wirey00
wirey00

Reputation: 33661

use $(this) <--get jquery object jquery functionalites

or this <-- get DOM element - javascript functionalites

$("img").dblclick(function(){
    var id=$(this).val();  // <-- $(this) for current clicked image
    alert(id);
    $("#update_pro").slideToggle();
    $('#update_pro').load('update_list.php?id='+id);
});

Also you said you wanted the id so instead of getting val() get id like below

$(this).attr('id');

or

this.id

Upvotes: 1

Related Questions