0

デフォルトで display:none を持つ html ページに 3 つの div があります。定期的に DB をチェックし、それに応じて div の表示属性を更新したいと考えています。

<div class="gunnybag" style="float:right">
        <div id="p1" style="display:none;"><img id="drag1"  draggable="true" src="coconut.png"></div>
        <div id="p2" style="display:none;"><img id="drag2"  draggable="true" src="coconut.png"></div>
        <div id="p3" style="display:none;"><img id="drag3"  draggable="true" src="coconut.png"></div>
    </div>

このために、このJSファイルを作成しました。

$(document).ready(function() {
     doAjax();
    });

function doAjax(){
$.ajax({
    url: "db_fetch.php",
    dataType: "json",
    success: function(json){
        var dataArray = JSON.decode(json);
        dataArray.each(function(entry){
            var i=1;
            if(entry.valueName==true){        //checking if `state`= true/false.
                $q('#p'+i).css( "display","block" );
            }
            else{
                $q('#p'+i).css( "display","none" );
            }
            i=i++;
        })
    }

}).complete(function(){
        setTimeout(function(){doAjax();}, 1000);  // check with DB every sec
    });
}

これがdb_fetch.phpです

<?php
try{
  $con=mysql_connect("sqlservername","uname", "pass") or die(mysql_error());
}
catch(Exception $e){
    echo $e;
}
mysql_select_db("db_name", $con) or die(mysql_error());

$q = mysql_query("SELECT `state` FROM `table` ");   //selecting all `state` from table
var_dump($q);
$query = mysql_query($q, $con);
$results = mysql_fetch_assoc($query);
echo json_encode($results);    //returns json obj to above JS

?>

私のDBにはIDと状態の2つの列があり、IDには値としてp1、p2、p3があり、状態はtrueまたはfalseです。

私が間違っていることを親切に指摘してください。

あなたの応答は大歓迎です。前もって感謝します。

4

2 に答える 2

0

これが最終的な作業コードです。問題は、json を解析していたことです。注: $.ajax() で dataType: "json" を使用している場合は、JSON を解析する必要はありません。すでに解析済みです。

ajx.js:

    $(document).ready(function() {
 doAjax();
});

function doAjax(){
var i=0;
$.ajax({
    url: "db_fetch.php",
    dataType: "json",
    success: function(json){

        jQuery.each(json, function(i){

            if(json[i].data.state=='true'){
                $('#p'+(i+1)).css( "display","block" );
            }
            else{
                $('#p'+(i+1)).css( "display","none" );
            }
            i=i++;
        });
    }

}).complete(function(){
        setTimeout(function(){doAjax();}, 2000);
    });
}
于 2013-04-12T14:19:41.283 に答える
0

このように window.onload 関数を使用します。

<script language="javascript">
 window.onload = function() {

  doAjax();

 }
</script>
于 2013-04-12T10:47:48.093 に答える