0

アプリがタスクを完了しているときに表示されるポップアップdivを作成しようとしています。ajaxタスクが完了したら、ポップアップを削除したいと思います。私はhttp://jqueryui.com/demos/dialog/#modalを確認していて、同様のソリューションを実装しようとしました。しかし、divをポップアップさせることができません。divを作成するための私のコードは次のとおりです。

<div id="progress-indicator">
    <img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait...
</div>

その後、ページの後半で、誰かがボタンをクリックするまでdivを非表示にするJavaScriptがあります。

$(document).ready(function(){
$('#progress-indicator').hide();
});


$('#saveData').live('click', function()  {
//$('#progress-indicator').show();
    $( "#progress-indicator" ).dialog({
    height: 140,
    modal: true
});
});

残念ながら、保存ボタンがクリックされたときにポップアップが表示されないようにしてください。どこが間違っているのか教えていただければ幸いです。

ありがとう！

編集：
ポップアップdivを作成する前に、既存のページ内にdivを表示するだけの行があったため、ボタンクリックイベントが発生することを知っています。そしてそれはうまくいきます。したがって、たとえば、次のコードは機能します。

$(document).ready(function(){
$('#progress-indicator').hide();
});

$('#save').live('click', function()  {
$('#progress-indicator').show();
});

このコードは、ページの中央にポップアップが必要な場合を除いて、正常に機能します。

編集2：ちなみに、FirefoxのWeb開発者コンソールも確認しましたが、エラーメッセージは生成されていません。それが役立つ場合...また、私はjqueryとjquery-uiの両方を含めています：

<script src="assets/js/jquery-1.8.1.min.js" charset="utf-8"></script>
<script src="assets/js/jquery-ui-1.8.23.custom.min.js"></script>
4

3 に答える 3

0

ドキュメントを閉じるのが早すぎます。live または on とのクリックのバインドは、ドキュメントの準備が整っている必要があります。これで、最初の非表示の直後にドキュメントの準備が整いました。この方法では、クリック イベントがバインドされているときに、ダイアログ関数がまだ読み込まれていない可能性が高くなります。

于 2012-09-10T17:59:24.920 に答える
0

これにより、ダイアログボックスがポップアップします

<div id="progress-indicator" style="display:none;">
 <img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait...
</div>

(function ($) {
 $('#saveData').click(function()  {
 $( "#progress-indicator" ).dialog({
    height: 140,
    modal: true
    });
  });
})(jQuery);
于 2012-09-10T18:21:58.313 に答える