0

I am using the below to get the whole page when I submit a form, now the page takes time to load as it calls its CSS and JavaScript.
I need to show that data is still being loaded in that page, before anybody uses it again. I would like to use a modal popup with loading and once the page is loaded completely I will close the popup How canI achieve that?

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

additonal data:

I have two frames in a window. in the right side frame my page has links which when clicked will post certain data in hidden fields and get the whole right side page with the changed data. now my right side page has links such as 

<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"/>

These files take time to be retrieved form server once the page is loaded by $('body').html(data); I want these files to be loaded and then let the user do his work

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 回答