0

誰かが私を助けてくれるのではないかと思います。

以下のコードの抜粋は、現在のユーザーに関連するレコードを示すテーブルを正常に作成します。

/* display row for each location */ 
echo "<tr>\n"; 
$theID = $row['locationid']; 
echo " <td style='text-align: Center'>{$row['locationname']}</td>\n"; 
echo " <td style='text-align: Left'>{$row['returnedaddress']}</td>\n"; 
echo " <td style='text-align: Center'>{$row['totalfinds']}</td>\n"; 
echo " <form name= 'locationsconsole' id= 'locationsconsole' action= locationsaction.php  method= 'post'><input type='hidden' name='lid' value=$theID/>                                                 <td><input type= 'submit' name= 'type' value= 'Details'/></td><td><input type= 'submit' name= 'type' value= 'Images'/></td><td><input type= 'submit' name= 'type' value= 'Add Finds'/></td><td><input type= 'submit' name= 'type' value= 'View Finds'/></td><td><input type= 'submit' name= 'type' value= 'Delete'/></td></form>\n"; 
    </tbody> 
    </table> 
    <div align="center"><p id="deletelocationresponse"></p></div>

Deleteコードのこのセクションの最後に、ボタンがあることがわかります。これをクリックすると、レコードがテーブルから削除され、削除機能が正しく機能します。

削除ボタンに加えて、と呼ばれるdivがあることに気付くでしょうdeletelocationresponse。これにより、jqueryスクリプトが実行され、削除が成功したかどうかをユーザーに通知する画面上のメッセージが提供されます。このためのコードは以下のとおりです。

<script type="text/javascript">
$(document).ready(function(){
    $('#locationsconsole').submit(function(){

        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#deletelocationresponse');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(300,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },2000)
                                    setTimeout(function() { 
                                    $('body').fadeOut(400, function(){
                                    location.reload();
                                    setTimeout(function(){
                                    $('body').fadeIn(400);
                                     }, 500);
                                     window.scrollTo(x-coord, y-coord);
                                 });
                            }, 2000);                           
                        });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
</script>
<style type="text/css">
#deletelocationresponse {
    display:inline;
    margin-left:4px;
    padding-left:20px;
    font:Calibri;
    font-size:16px;
}

.response-waiting {
    background:url("images/loading.gif") no-repeat;
}

.response-success {
    background:url("images/tick.png") no-repeat;
}

.response-error {
    background:url("images/cross.png") no-repeat;
}
</style>

私が抱えている問題は、Deleteボタンがクリックされたときに画面上のメッセージがメッセージに貼り付いてしまうことPlease waitです。

これで、このスクリプトが機能することがわかりました。これは、他のページで使用しているためです。明らかに、関連するフィールドが変更されています。そこで、フォーム名を取得する際の問題に絞り込みました。これは、jQueryコードの次の行です$('#locationsconsole').submit(function(){。

他のページでは、フォームはHTMLを介して作成されていますが、このスクリプトはPHPを使用しています。

これを調べてみましたが、JavaScriptにあまり詳しくないので、何を探すべきかよくわかりません。別の方法でフォームを呼び出す方法はありますか？

どんな助けでもありがたいです。

よろしくお願いします

4

1 に答える 1

0

最初のステップは、基本的なデバッグを行うことです。FireBug、または他のクライアント側のデバッグツールはあなたに多くの力を与えることができます。アラートの入力を開始することもできます。たとえばalert('got here!');、JavaScriptにインラインのようなコードを配置して、どの行が具体的にエラーをスローしているかを確認できます。FireBugを使用している場合は、これを次のように置き換えることができますconsole.log('got here');

console.logでは、応答に問題があることがわかった場合に、ネストされた変数をダンプすることもできます。

次に、レンダリングされたページをHTMLとして保存し、トラブルシューティングを開始します。これにより、HTMLエラーまたはAJAXリクエストからのJSON応答のエラーが発生するため、デバッグのPHP側が排除されます。

Firebugなどのクライアント側のデバッグツールでも、AJAXリクエストと生のレスポンスを確認できます。

于 2012-07-13T15:45:44.233 に答える