-1

私はJQueryとJavascriptが初めてで、div内のhtmlオブジェクトだけを更新する方法の良い例をオンラインで見つけることができません.

html オブジェクトは、cosm.com のこのグラフです。 ここに画像の説明を入力

index.html

<div id="graph" >
<object type="text/html" style="width:100%; height:100%; margin:1%;"data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" >
</object>
</div>

script.js

$(document).ready( function() {
updateGraph;
setInterval (updateGraph, 2000);
}
function updateGraph() {
     //This line is not working!!!!
    $('#graph').reload();
    //$('#graph').load();

}

http://jsfiddle.net/spuder/PNK4k/

4

3 に答える 3

1

これを試してみてくださいhttp://jsfiddle.net/Bvpft/16/

Chrome と FireFox でテスト済み。画像を更新して再ダウンロードしますが、それ以上に何をすべきかわかりません。

HTML

<!DOCTYPE html>
<body>
    <div id="graph" >
        <object type="text/html" style="width:100%; height:100%; margin:1%;" data="">
        </object>
    </div>
</body>

Javascript

$(document).ready( function()  {
    var graph = $('#graph'),
        uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
        params = {
            width: 740,
            height: 150,
            colour: '#0055ff',
            duration: '5minutes',
            legend: 'Vibration measure 0 -> 1024 ',
            title: 'Foosball Vibrations - 5 Minutes',
            show_axis_labels: 'true', 
            detailed_grid: 'true',
            scale: 'manual',
            max: 75,
            timezone: 'Mountain Time (US & Canada)'
        };
    var updateGraph = function() {
        var data = uri + $.param(params);
        graph.empty();
        graph.append($('<object/>')
                     .prop({'type': 'text/html', data: data})
                     .css({'width': '100%', 'height': '100%'}))
   };
   updateGraph();
   setInterval (updateGraph, 1000);
});

編集 - 画像に変更し、ちらつきをなくし、キャッシュを追加しませんでした (IE10、Chrome、および FireFox でテスト済み): http://jsfiddle.net/JAYDb/4/

HTML

<div id="graph" ></div>

CSS

#graph {
    background-color:#C0C0C0;
    margin: 0 auto;
    min-height: 200px ;
    min-width: 750px ;
    display: inline-block;
}
#graphObject{
    display: block;
    width: 100%;
}

Javascript

$(document).ready( function()  {
    var uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
        params = {
            width: 740,
            height: 150,
            colour: '#0055ff',
            duration: '5minutes',
            legend: 'Vibration measure 0 -> 1024 ',
            title: 'Foosball Vibrations - 5 Minutes',
            show_axis_labels: 'true', 
            detailed_grid: 'true',
            scale: 'manual',
            max: 75,
            timezone: 'Mountain Time (US & Canada)'
        };
    var data = uri + $.param(params),
        graph = $('#graph'),
        obGraph = $('<img/>').prop({'id': 'graphObject'});
    var updateGraph = function() {
        var date = new Date(),
        src = data + '&' + date.getTime();
        obGraph.prop('src', '');
        obGraph.prop('src', src);
   };
   graph.empty().append(obGraph);
   updateGraph();
   setInterval (updateGraph, 1000);
});
于 2013-03-30T00:47:09.273 に答える
0

jsフィドル

この作品..

あなたobjectをimgタグに変えました

<img id='obj' style="width:100%; height:100%; margin:1%; " src=...


$('document').ready( function() {
    var i;

        var src = $('#obj').prop('src'); 
    setInterval(function(){
        i++;
        $('#obj').prop('src',src+"&"+i);

    },5000);
});
于 2013-03-30T00:38:16.240 に答える
0

閉じ括弧がありませんか?

$(document).ready
(  function() 
    {
     updateGraph;
     setInterval (updateGraph, 2000);
    } 
); // missing

jQuery のバージョンが選択されていないため、jsfiddle が機能していません。私は実用的な例を作りました:

$(document).ready( function()  {
    alert("OK");
   updateGraph();
   window.setInterval(updateGraph, 5000);
} );

function updateGraph() {
    //This line is not working!!!!
    alert("ok");
    //$('graph').reload(); // unknown method?
}

http://jsfiddle.net/mmGT9/4/

"$('graph').reload(); とはどういう意味ですか?それはカスタム関数ですか?

「オブジェクト」をリロードする場合は、HTML 領域からオブジェクトを削除し、空白の DIV だけを残します。次に、JavaScript 関数に次の行を追加します。

$("#graph").html('<object type="text/html" style="width:100%; height:100%; margin:1%; " data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" ></object>');

これにより、ID「graph」を持つ要素にオブジェクトが設定されます。div 内の既存のコンテンツは上書きされます。この関数は n 秒ごとに呼び出され、オブジェクトを置き換えます。これにより、リロードが強制されます。変数を使用すると、よりきれいにすることができます。

以下に例を示します: http://jsfiddle.net/mmGT9/5/

于 2013-03-30T00:17:43.753 に答える