0

以下を使用して、フォームを送信するときにページ全体を取得していますが、CSS と JavaScript を呼び出すため、ページの読み込みに時間がかかります。
誰かがそのページを再び使用する前に、データがまだそのページにロードされていることを示す必要があります。ローディングでモーダル ポップアップを使用したいのですが、ページが完全にロードされたら、ポップアップを閉じます。どうすればそれを実現できますか?

$.ajax({  
    type: "POST",
    url:  $url,
    data: "post=" +  post,
    //   data: form_data,
    success: function(data) {
        if(data!=""){
            $('body').html(data);
            ...

追加データ:

ウィンドウに 2 つのフレームがあります。右側のフレームには、クリックすると特定のデータが非表示のフィールドに投稿され、右側のページ全体が変更されたデータで取得されるリンクがあります。今、私の右側のページには次のようなリンクがあります 

<link rel="Stylesheet" href="abc.css" type="text/css" />
<script src="jquery-1.6.3.min.js"></script>

<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>

$('body').html(data); によってページが読み込まれると、これらのファイルがサーバーから取得されるまでに時間がかかります。これらのファイルをロードして、ユーザーに作業を任せたい

4

4 に答える 4

1

load要素全体に適用しているbodyため、これより前のモーダル ポップアップ表示は削除され、新しいコンテンツの準備が整います。

したがって、最初に次を使用してコンテンツを変数にロードする$.get()ことをお勧めします。

var content;
$.get($url, "post=" + post, function(data){
    content = data;
});

これは、このプロセス中に読み込みアイコンを表示してから、コンテンツを にbody読み込み、読み込みアイコンを削除できることを意味します。

//show modal popup here    
$.get($url, "post=" + post, function(data){
    var content;
    content = data;
    if (content!=null){
       $("body").html(content);
     }
});

これをテストできなかったため、私の構文は完全に正しくない可能性がありますが、機能するロジックのアイデアが得られるはずです。

于 2012-04-30T11:10:39.053 に答える
1

読み込みメッセージを表示するには、ajaxStart と ajaxEnd を使用します。

$("#myjaxloader").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

myajaxloader にメッセージと画像を追加します

より多くのブロック機能が必要な場合は、 blockUIを使用できます。

于 2012-04-30T11:10:58.113 に答える
0

ロードされたフレームのonloadイベントを使用する必要があります。両方のフレームが同じドメインにある場合は、次のように実行できます。

ナビゲーションウィンドウ：

$.post(url, data).then(
    function() { // success handler
        window.errorTimer = setTimeout(showErrorPopup, 10);
    }, function() { // error handler
        showErrorPopup();
    }
);
showLoadingPopup();

コンテンツウィンドウ：

$(function() { // runs after everything is loaded
    window.top.otherFrame.clearTimeout(window.top.otherFrame.errorTimer);
    window.top.otherFrame.hideLoadingPopup.call(window.top.otherFrame);
});
于 2012-04-30T11:48:13.103 に答える
0 
$(form).on('submit', function(e) {
    e.preventDefault();  // to stop the page from reloading
    $.ajax({  
        type: "POST",
        url:  $url,
        data: "post=" +  post,  //use form.serialize to send the whole form
        beforeSend: function () {
            $(modal).show();
        }
    }).done(function(data) {
        if(data!=""){ $('body').html(data); }
    )).always(function() {
        $(modal).hide();
    });
});
于 2012-04-30T11:15:23.370 に答える