0

モーダルディスプレイにカラーボックスを使用しています。モーダルディスプレイは、画像をクリックして更新するとユーザーに表示されます。ユーザーが新しい画像をアップロードし、カラーボックスモーダルで送信を押すと、モーダルは親ページの画像を閉じて更新する必要があります。

送信ボタン内で次のonClickイベントを使用しています。

  <input onClick='window.parent.location.reload(true);' type='submit' value='Submit' name='save_button' id='save_button'>

これにより、モーダルが閉じられ、親のpage.phpが更新されます。ただし、何らかの理由で、ユーザーがアップロードしたばかりの新しい画像を表示するために古い画像を更新することはありません。

編集：カラーボックスコードを追加

カラーボックスを呼び出すスクリプトが他のJavaScriptコードと競合していたため、カラーボックスコードの上に次のスクリプトを追加し、コード内のをに変更し$ましjQueryた。

<script>jQuery.noConflict();
  jQuery(document).ready(function(){
  jQuery("iframe").hide();
  });

  $('input').hide();
</script>

<script>
  jQuery(document).ready(function(){
  jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%"});
  });
</script>

何か案は？

4

3 に答える 3

1

これは、カラーボックススクリプトに固有のコードで、最終的には機能しました。onClosed:function(){ location.reload(true); }以下のスクリプトの最後の部分に追加しました。

<script>jQuery.noConflict();
  jQuery(document).ready(function(){
  jQuery("iframe").hide();
  });

  $('input').hide();
</script>

<script>
  jQuery(document).ready(function(){
  jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
  });
</script>

次に、送信ボタンのコード内に onClick イベントを追加しました。

<input type='submit' value="Submit' onClick='parent.jQuery.fn.colorbox.close();'>

これにより、親ページが更新され、現在のすべてのバージョンの FF、IE、Opera、および Chrome の画像とともに、カラーボックス モーダルが閉じられます。ページは更新されますが、Opera の画像は更新されません。

于 2012-08-29T02:11:20.317 に答える
1

ブラウザーは高速なブラウジングのためにキャッシュを作成し、ページの更新後に画像 src[location] が同じである場合、ブラウザーは画像の以前のコピーを表示します。次のように、リロードするたびにイメージの src 属性のターゲットを変更するか、関数を介して同じことを行う必要があります。

$('img').each(function(){
$(this).attr('src',$(this).attr('src')+Datetime.now());
});
于 2012-08-28T17:59:51.677 に答える
0

画像がブラウザにキャッシュされている可能性が非常に高く、画像コントロールに ID を与えてwindow.parent.document.getElementID("image").src += "?" + [some random number, or maybe the miliseconds];これを呼び出すと、サーバーに戻って画像をリロードします。

編集

より肉付けされたスクリプト:

<script language="javascript" type="text/javascript">
  function onSubmitClick(){
    parent.jQuery("#img")[0].src += "?" + Math.floor(Math.random()*1001);
    //note the above will append a random number between 0 and 1000 to the src.
    parent.jQuery.colorbox.close()
  }
</script>

<input onClick='onSubmitClick();' type='submit' value='Submit' name='save_button' id='save_button'>
<img src="pic.jpg" id="img">

また、私の提案の失敗は、ページがリロードされると、同じ画像がキャッシュから再度読み込まれるということであることに気付きました。そのため、このスクリプトはページを更新せずに記述されています。

于 2012-08-28T17:27:17.953 に答える