2

現在、PHP、Jquery、および Ajax に関して問題があります。

ページの下部に、データベースからのデータを含む div があります。データの反復ごとに新しい div が形成され、div には 'pagestatus' の ID があり、その横に自動インクリメントがあります。 「pagestatus0」、「pagestatus1」などのように、各 div の ID が変わります。

Jquery を使用してページをよりインタラクティブにしたり、Ajax を使用して MySQL データベースを更新したりしたので、Jquery はまったく初めてというわけではありません。

コードに問題がありますが、次のようにしたいと思います。

  • ボタンはdivでクリックされます
  • ボタンのフェードイン (または div のどちらか簡単な方)
  • 読み込み中の gif を含む非表示の div が下に表示されます
  • データベースに変更を加えるためのphpファイルへのAjax呼び出し
  • jquery は、読み込み中の gif をフェードアウトし、ボタンをフェードインします。

私はそのためのコードをいくつか書きましたが、どこかで間違っていると思います。誰かが私が間違っていることを見て、それを修正する方法を教えてください。

これが私のJqueryです：

$(document).ready(function(){
    for(i=0;i<$('#changestatusoff').val();i++){
        (function(x){
            $('#changestatusoff'+x).click(function(){
                $('#changestatusoff'+x).fadeOut('slow',function(){
                    $('#loadingstatus').fadeIn('slow',function(){
                        $.ajax
                        ({
                            type: "POST",
                            url: '.php',
                            data: {'changestatusoff': changestatusoff}, 
                            success: function(data) {
                                return data;
                            },
                            error: function() {
                                alert('Error occured');
                            }
                            $('#loadingstatus').fadeOut('slow',function(){
                                $('#changestatusoff'+x).fadeIn('slow',function();
                            });
                        });
                    });
                });
            });
        });         
    }
})(i);
});

そして、これがdivのボタンです:

<input type='button' value='Offline' id='changestatusoff".$count."' style='background: none repeat scroll 0% 0% rgb(0, 118, 188); color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); font-weight: bold; cursor: pointer; margin:5px;'/>

どんな助けでも大歓迎です

4

4 に答える 4

1

他の人が言ったように、私たちはあなたが何を提出しているのか分かりません;-)

クラスを使用します。つまり、アイテムごとに新しいバインドを作成する必要があり、一度にすべてを実行できます。

あなたは次のようなことをすることができます：

$(function() {
    //set loading
    var $loading = $('#loadingstatus');

    //on changeStatus click
    $('.changeStatus').click( function(e) {
        //since we dont have a form, disable default behaviour
        e.preventDefault();
        //set $this as the item clicked
        var $this = $(this);
        //fadeIn loading, fadeout the item
        $this.fadeOut();
        $loading.fadeIn();
        //make ajax request
        $.ajax
            ({
            type: "POST",
            url: 'yourPhpFile.php',
            data: {'changestatusoff': $(this).val()}, 
            success: function(data) {
                //Do something with data?
                $loading.fadeOut();
                $this.fadeIn();
            },
            error: function() {
                //Do nothing, and tell an error happened
                alert('An error occured');
                $loading.fadeOut();
                $this.fadeIn();
            }
        });
    });

});
于 2012-10-18T09:52:07.310 に答える
0

次を試してください

$(function(){
   $('#Your_Event_Source').click(function(){
      $(this).fadeOut(600);
      $('#loadingstatus').fadeIn(600);
      $.post('you_file.php',{changestatusoff: 'yourValue'},function(data){
         if(data.success == 'yes'){
             alert(data.message);
             $('#Your_Event_Source').fadeIn(600);
             $('#loadingstatus').fadeOut(600);
         }else{
             alert('failed'+ data.message);
             $('#Your_Event_Source').fadeIn(600);
             $('#loadingstatus').fadeOut(600);
         }
      },'json');
   });
});

PHPで「success」を使用することをお勧めします。

$data = array('success'=>'yes','message' => 'your meaasage',...);
echo json_encode($data);
于 2012-10-18T11:52:05.333 に答える
0

gif の読み込みを元に戻したい場合は、最後の 2 行を追加する必要があります。

$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();

ajax 呼び出しの後ではなく、完了したコールバックで。

$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff}, 
success: function(data) {
    return data;
},
error: function() {
    alert('Error occured');
},
completed: function() {
    $('#loadingstatus').fadeOut('slow',function(){
    $.('#changestatusoff'+x).fadeIn('slow',function();
}
于 2012-10-18T10:03:45.760 に答える
0

data: {'changestatusoff': changestatusoff}確認して変更してみる必要があると思いますdata: {changestatusoff: 'changestatusoff'}

于 2012-10-18T09:47:22.943 に答える