0

ajaxから受け取ったデータでicon1とicon2の位置を変更したいです。

「結果」はdiv要素です。ajax から受信したメッセージを表示することで問題なく動作しますが、「icon1」と「icon2」が動かないのはなぜでしょうか。メッセージが受信され、「結果」要素が 0.5 秒ごとに変化し、結果が表示されます。変？！

クロムで次のコードを試しましたが、機能しません。コードで何をすべきか。他のブラウザでは試していませんが、chrome 以外のブラウザで動作する場合はお知らせください。ありがとうございました。

setInterval(function(){

    // post data
    $.ajax({
        type: "POST",
        url: "http://localhost:8080",
        data: {id:mId,color:mColor,x:mX,y:mY}
    }).done(function(msg){

        // result is div element
        result.text(JSON.stringify(msg) );          


    }).fail(function(jqXHR, textStatus) {
        result.text( "Request failed: " + textStatus );
    });

    var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
        position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}, 500);
4

2 に答える 2

6

ajaxは非同期です!!! ajaxが必要な値を返すことを確認するために、常にajaxの成功関数内にコードを記述する必要があります..これを試してください

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          
     var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
       position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
});

}, 500);

ORそれを少しきれいにする...（そして答えの後に編集された）

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          

    changeCss();

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
    changeCss();
});

}, 500);

function changeCss(){
     var jObj = jQuery.parseJSON( result.text() );
     icon1.css({
       position:"absolute",top:(jObj[0].y+"px"),left:(jObj[0].x+"px")
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y+"px"),left:(jObj[1].x+"px")
    });
}
于 2013-06-11T12:19:31.833 に答える
0

@bipen、解決策をありがとう。コードを試してみましたが、まだ機能しません。

私があなたのコードを使用して編集を行った後、それは機能します。たぶん解決策はかなり初心者ですが、jObj の後ろに「px」を追加した後はうまく機能します。

function changeCss(){
     var jObj = jQuery.parseJSON( result.text() );
     icon1.css({
       position:"absolute",top:(jObj[0].y+"px"),left:(jObj[0].x+"px")
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y+"px"),left:(jObj[1].x+"px")
    });
}

とにかく、+1 は私の問題の 50% を解決しました。

于 2013-06-11T12:37:39.630 に答える