-2

ajaxの使用について質問があります。画面の一部（明確にするために、いくつかの記事）を削除したいのですが、次のコードを使用して画面にコンテンツ（記事）を生成しています：

while($test = $allArticles->fetch_assoc())
{   
        echo "<div class='metfoto'>";
        echo "<h1 name='tt' class='titelopmaak'>".$test['titel'] . "<br /></h1>";
    echo "<p class='artikelopmaak'>" . $test['article'] . "</p>";
        echo "<form method='post' action=''>";
    echo "<input type='submit' class='delete' name='verwijder' value='verwijder'>";
        echo "</form>";
    //echo "<h1>".$test['id']."</h1>";
    echo "</div>";
}

これはすべて、ajaxなしで非常にうまく機能しています。しかし、ページを更新せずにこれ(ボタンによる削除)を実現したいと考えています。たとえば、$test['id'] の内容を確認すると、1 つの数字が返されます。以下のコードに関する私の問題は、タイトルを ajax の variabel (var titel) に入れたいときに、ページからすべてのタイトルをロードすることです。 

        <script type="text/javascript">
            $(document).ready(function(){
                $(".delete").click(function(){
                    var titel = $(".titelopmaak").text();
                    var artikel = $(".artikelopmaak").text();

            $.ajax({
            type: "POST",
            url: "assets/ajax/deleteArticle.php",
            data: { titelA:titel },

        }).done(function( msg ) {

            if(msg.status != "error")

                {
                    if(msg.status == "success")
                    {
                        $(".titelopmaak").fadeOut();

                    }
                    else
                    {

                    }
                }

        });
        return false;
    })

});             
        </script>

編集

今、私の質問をより良い方法で説明したことを願っています

4

2 に答える 2

0

このように試すことができます....

HTML要素ごとに個別のIDを指定する必要があります

while($test = $allArticles->fetch_assoc())
{   
     $cid = $test['id'];
        echo "<div id='div$cid' class='metfoto'>";
        echo "<h1 name='tt' id='h1$cid' class='titelopmaak'>".$test['titel'] . "<br /></h1>";
    echo "<p id='para$cid' class='artikelopmaak'>" . $test['article'] . "</p>";
    echo "<input type='submit' class='delete' name='verwijder' id='verwijder$cid' onclick='deleteValue($cid);' value='verwijder'>";
    echo "</div>";
}

JavaScript 関数

h1 と div を ID で参照します。

<script type="text/javascript">
function deleteValue(cid)
{
         var titel = $("#h1"+cid).text();
         var artikel = $("#para"+cid).text();

            $.ajax({
            type: "POST",
            url: "assets/ajax/deleteArticle.php",
            data: { titelA:titel },

        }).done(function( msg ) {

            if(msg.status != "error")

                {
                    if(msg.status == "success")
                    {
                        $("#h1"+cid).fadeOut();

                    }
                    else
                    {

                    }
                }

        });
        return false;
    })

}
</script>

deleteArticle.php

include "connection.php";
$title = $_POST['titelA'];
$ok = mysql_query("delete from yourtable where title='$title');
echo "your msg here";
于 2012-05-18T12:29:10.480 に答える
0

あなたの問題はここにあります

 var titel = $(".titelopmaak").text();

クラスを持つ要素のすべての値を取得しますが、.titelopmaak必要なのは 1 つだけです。

これは正しいものです。ツリーを上ってアイテムを見つけます。

var titel = $(this).closest('.metfoto').find('.titelopmaak').text();

ただし、タイトルによって要素を制御するのは非常に悪い習慣であり、代わりに id を使用します。

<script>
$(document).ready( function(){
    $('.delete').submit( function() {
            $.ajax({
                url:    $(this).attr('action'),
                data:   $(this).serialize(),
                type:   $(this).attr('method'),
                success: function(data, status, jqXHR) {
                        $(".titelopmaak").fadeOut();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                }
            );
    });
});
</script>
<? while($test = $allArticles->fetch_assoc()) { ?>
<form method="POST" action="" class="delete">
    <input type="hidden" value="<?=$test['id']?>" name="delete">
    <input type="submit" value='verwijder'>
</form>
<? } ?>
于 2012-05-18T12:27:24.063 に答える