0

写真を表示するフォームがあります。画像の横に表示される「削除」ボタンを使用して、表示されている画像を削除したいです。ボタンをクリックすると、画像がデータベースから削除されます。その後、画像はフォームから削除されます。

それを達成するために、データベースから画像を削除するAJAX呼び出しを開始する削除ボタンでonclick関数を使用することを考えています。次に、フォームから画像を削除します(jquery .remove()を介して) .

何をしなければならないかはわかっていますが、コードが機能していないようです。

エラー: 削除ボタンをクリックしても何も起こりません。

誰かが私が間違っているところを指摘できれば本当に助かります。

ありがとう!

私のコード:

メインページ:

    <?php
if(!isset($_SESSION))
{
    session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
<!--Links to Css Page-->
<link type="text/css" rel="stylesheet" href="style.css">
<!--Loads JQuery script-->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!--edits list of item categories on page load-->
<script type="text/javascript">
$(document).ready(function(){
    $("#edititemtable").hide();
    $("#edititemsubcat").hide();
    $("#edititemdetails").hide();
    $("#edititemcat").load("getcategory.php");

    $("#edititemcat").change(function(){
        var cat=$("#edititemcat").val();
        $("#edititemsubcat").show();
        $("#edititemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#edititemsubcat").change(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        $("#edititemdetails").show();
        $("#edititemdetails").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#edititemsubmit").click(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        var item=$("#edititemdetails").val();
        $("#edititemtable").show();
        $("#edititemtable").append($("#details").load('changeitem.php?cat='+cat+'&subcat='+subcat+'&item='+item));

    });


    //Loads the Categories
    $('#changeitemcat').load("getcategory.php");
    //Loads the SubCategories
    $("#changeitemcat").change(function(){
        var cat=$("#changeitemcat").val();
        $("#changeitemsubcat").load('getsubcategory.php?cat='+cat);
    });
    //Deletes the existing pic via AJAX
    $("#changeitempicdel0").click(function(){
        alert("SUCCESS");
    });

});



</script>

</head>
<body style=" width:500px">
<form id="edititem" name="edititem" method="POST" action="getitem.php" >
    <table>
        <tr>
            <td>
                <select id="edititemcat" name="edititemcat"></select>
            </td>


            <td>
                <select id="edititemsubcat" name="edititemsubcat"></select>
            </td>



            <td>
                <select id="edititemdetails" name="edititemdetails"></select>
            </td>



            <td>
                <input type="button" id="edititemsubmit" name="edititemsubmit" value="Get Item" />
            </td>


</form>

<table id="edititemtable" border='1'>

<tr>
    <td colspan='2'>Item Info</td>
</tr>

<tr>
    <td>Select Category: </td>
    <td>
        <select id='changeitemcat' name='changeitemcat'></select>
    </td>
</tr>

<tr>
    <td>Select SubCategory: </td>
    <td>
        <select id='changeitemsubcat' name='changeitemsubcat'></select>
    </td>
</tr>

<tr>
    <td colspan="2" id="details" name="details">
    </td>
</tr>

</table>
</body>
</html>

フォームページの抜粋(changeitem.php)

//NOTE:$imagecount is used to provide a unique id to each of the images loaded,     starting from index 0, increasing per loop.
//E.g changeitempicdel0,changeitempicdel1,changeitempicdel2, etc.
$imagecount=0;
WHILE($showpic=$getpic->fetch(PDO::FETCH_ASSOC))
{


echo"<div id='image'.$imagecount>";
        $image=$showpic['Path'];
        $imageid=$showpic['ImageName'];
        echo"<tr>";
            echo"<td>";
                echo"Image";
            echo"</td>";

            echo"<td>";

                echo"<input type='hidden' id='changeitempicchangeid'$imagecount value=$imageid />";
                echo"<input type='button' id='changeitempicchange'$imagecount value='Change Picture' />";

            echo"</td>";
        echo"</tr>";

        echo"<tr>";
            echo"<td></td>";
            echo"<td>";
                //Displays image
                echo"<img src=$image id='image'$imagecount width='250' height='250' alt=''>";
                //Passes image id, used for deletion
                echo"<input type='hidden' id='changeitempicdelid'$imagecount value=$imageid />";
                //Delete button
                echo"<input type='button' id='changeitempicdel$imagecount' value='Delete' />";

            echo"</td>";
        echo"</tr>";
        echo"</div>";
        $imagecount++ ;

    }

処理中ページ(deletepic.php)

    <?php
if(!isset($_SESSION))
{
session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php

include("cxn.inc");
$picid=$_POST['pid'];
$picdel=$cxn->prepare("DELETE FROM `testdb`.`itempic` WHERE `PicID`=:picid ");
$picdel->bindValue(":picid",$picid);
$picdel->execute();

?>
</body>
</html>
4

2 に答える 2

0

クリック機能で changeitempicdel0 をハードコーディングしました。要素ごとにクリック イベントを追加する必要があります。

たとえば、関数は次のようになります。

$(".fooClass").click(function(){
        ...
    });

        echo"<input type='button' class="fooClass" id='changeitempicdel'$imagecount value='Delete' />";
  • コードには他にも多くの改善点があります。Sql インジェクションもその 1 つです。
于 2013-09-15T16:08:55.913 に答える