2017-09-07 5 views
0

innerHTML関数を使用してボタンをクリックするとdivにHTMLが読み込まれます。初めてクリックするとHTMLが正しく読み込まれますが、データソースを変更すると、ボタンを再度クリックするとこれらの変更は反映されません。はじめてボタンがクリックされたときに正確だったHTMLをリロードするだけです。ページをリフレッシュすることは役に立ちません。クリックごとに現在のデータソースを正しく呼び出すにはどうすればよいですか?呼び出されたinnerHTML関数は、クリック時にデータへの変更を反映しません

ボタン:

<li><button onclick="load_bookings();">Bookings</button></li> 

機能:

それ あなたが開始するかなり珍しい objectタグにページをロードしているやっている表示されます何を
function load_bookings() { 
     document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html" height=100% width=100%></object>'; 
    } 
+0

データソースをどのように正確に変更していますか? F12 Developer Toolsを使用して 'data'属性を手動で編集しますか? –

+0

「データソースを変更する」とはどういう意味ですか?*、どのように正確にそれを行いますか? Obsidianとadeneoへの返信で – adeneo

+0

- 「データソースを変更する」というのは、私はbooking_home.htmlファイルを編集するということです。これらの編集内容は、ロードするボタンをクリックしても、ページを更新しても反映されません。 – vanscurvy

答えて

0

。あなたが持っていると思う問題は、ファイルbookings_home.htmlがGET要求で要求され、キャッシュされているということです。で、もちろん

document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html?_=' + Date.now() + '" height=100% width=100%></object>'; 

にマークアップを追加するためのdocument.createElement()を使用するのが好ましい:あなたは、そのファイルの新しいバージョンが必要な場合は、URL /ファイル名は、「キャッシュ・バスター」パラメータを追加する必要がありますページ。

+0

Ok - 私はdocument.createElement()を使用して、結果を投稿しようとします。私が間違ったタイプのJava関数を使用しているという事実は、おそらく私がこれについて多くの投稿を見つけられなかった理由です! – vanscurvy

-1

のindex.html:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<ul> 
    <li><button onclick="load_bookings();">Bookings</button></li> 
</ul> 
<div id="content"></div> 
<script> 
    function load_bookings() { 
     document.getElementById('content').innerHTML = '<object type="text/html" data="bookings_home.html" height="100%" width="100%"></object>'; 
    } 
</script> 

bookings_home.html:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<div id="some"></div> 
<script> 
    document.getElementById('some').innerHTML = String(Math.random()); 
</script> 

が、私はそれをローカルにテストしました。すべてうまく動作します。 (サムR)のキャッシングにも注意してください。

+0

あなたはそれをやったのですか? –

関連する問題