1

在一个页面上，我有两个区域：任务列表和任务表单。在 ajax 提交表单并成功返回时，我希望通过另一个 ajax 调用调用并重新加载任务列表。那部分有效。但是，作为 ajax 调用的一部分，列表上应该有一个“加载”动画；一旦返回数据，动画就会被删除。

AAAAAAAAAAAAAA    //list of tasks. Loaded on page load or changing of a dropdown (works)
A            A
A            A
AAAAAAAAAAAAAA
...page stuff...
BBBBBBBBBBBBBB    //this is the form. on ajax:success-> call ajax to repopulate 'A' list
B            B
B            B
BBBBBBBBBBBBBB

这也是一个 MVC 框架。所以我可以轻松地调用给定的 div 并告诉它重新加载该 div 的内容（同样，这有效）但动画似乎没有找到“目标”。

代码：

//Global Js
//Loads animation over DIVs that are in the middle of an ajax operation
$.fn.addBlockLoadingDiv = function() {
var block_width = this.outerWidth();
var block_height = this.outerHeight();
var block_padding_left = this.css('padding-left');
var block_padding_top = this.css('padding-top');

var block = $("<div class='block_loading'></div>")
block.css({'width':block_width,'height':block_height, 'margin-top':'-'+block_padding_top, 'margin-left':'-'+block_padding_left})
// if the div is too big, the loading in the center not would apper in the screen
if (block_height > 400) {
    block.css({'background-position':'center 120px'});
}
this.prepend(block);
};



//Makes the ajax call and generally returns HTML to be displayed
$.fn.loadUrl = function(url, dataAjax) {
var target = this;
target.addBlockLoadingDiv();
return $.ajax({
    type: "POST",
    url: url,
    data: dataAjax,
    success: function(data) {
        if (data) {
            target.html(data);
        } else {
            target.text("Unable to display requested data, sorry.");
        }
    },
    error: function(err) {
        target.html(err.response);
    }
});
};



//and the ajax call that submits the form data to create/update/delete a task
$("#task_action_button").on('click', function(event) {
    //clear status block
    $().clearStatusBlocks()
    //hide task schedule if showing
    $("#task_persons_tasks").slideUp();
    //validate form
    $("#task_crud_form").validate();

    //return if not valid
    if ($("#task_crud_form").valid() != true) {
        return false;
    }

    //add ajaxloader
    $("#task_container_table").addBlockLoadingDiv();

    //submit ajax
    $.ajax({
        type: "POST",
        dataType:"JSON",
        url:    "./index.php?w1=TTRCTL/TTRTaskCTL",
        data:   $("#task_crud_form").serialize(),
        success: function(data) {
            //if return is null
            if (data.bool === true) {
                //clr form on successfull save
                $("#task_reset_button").trigger('click');
                //show good status message
                $().taskFormStatus('Action successful.', true);
            //else nicly fail
            } else {
                $().taskFormStatus(data.text);
            }

            $("#project_tasks").trigger('change');
            $('project_task_list_table').addBlockLoadingDiv();
        },
        error: function(data) {
            $().taskFormStatus('Could not completed the requested action.');
        },
        complete: function(data) {
            $(".block_loading").remove();
        }
    });
});

我试过的：从表单'B'调用ajax来重新填充列表'A'：重新填充但动画不显示；将可选参数传递给 loadUrl() 以指示目标元素：不行；以及其他一些当然行不通的愚蠢想法……

任何帮助表示赞赏。

4

0 回答 0