Question

我有一个jquery ajax成功函数，它使用模板将json信息放入div中，然后使用模态插件淡入模态。问题是，模式在所有内容完全写入div之前触发。在调用模态火灾之前，有没有办法让这个模板动作集完成？

        success: function (data) {

        //run generic order header through template
        $('#order_detail_header').vkTemplate('scripts/templates/header_template.tmpl?<?=time()?>', data);

        //run header 2 information through template
        $('#order_detail_header_2').vkTemplate('http://scripts/templates/detail_header_2_template.tmpl?<?=time()?>', data);

        //run shipment information through template
        $('#order_detail_shipment_information').vkTemplate('scripts/templates/detail_shipment_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide();});

        //run line item information through template
        $('#order_detail_line_item_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_line_item_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide();});

        //run pricing information through template 
        $('#order_detail_pricing_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_pricing_information_template.tmpl?<?=time()?>', data['order']);

        $('#order_detail_modal').reveal({ // The item which will be opened with reveal
            animation: 'fade',                   // fade, fadeAndPop, none
            animationspeed: 600,                       // how fast animtions are
            closeonbackgroundclick: true,              // if you click background will modal close?
            dismissmodalclass: 'close_modal'    // the class of a button or element that will close an open modal
        });

        }

我尝试将整个事物包装在函数中并将.reveal函数放入回调中，但我必须使用错误的语法或想法。任何建议表示赞赏。谢谢！

Answer 1

我认为vkTemplate会进行ajax调用。如果是这样，那么你有两个选择：

使用sync ajax

向vkTemplate添加回调参数，以便您可以订购请求

    div1.vkTemplate(url1,data1,function(){
      // the cbk function, when vkTemplate is done getting data from url and added the html
      div2.vkTemplate(url2,data2,function(){
        // all data loaded? yes? then call your function
        modal.reveal()
      })
    })

Answer 2

这是一个简单的答案，因为我不熟悉您正在使用的插件，但它会起作用....

    success: function (data) {

        var counter = 5;

        //run generic order header through template
        $('#order_detail_header').vkTemplate('scripts/templates/header_template.tmpl?<?=time()?>', data, function() { doReveal(); });

        //run header 2 information through template
        $('#order_detail_header_2').vkTemplate('http://scripts/templates/detail_header_2_template.tmpl?<?=time()?>', data, function() { doReveal(); });

        //run shipment information through template
        $('#order_detail_shipment_information').vkTemplate('scripts/templates/detail_shipment_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide(); doReveal(); });

        //run line item information through template
        $('#order_detail_line_item_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_line_item_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide(); doReveal(); });

        //run pricing information through template 
        $('#order_detail_pricing_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_pricing_information_template.tmpl?<?=time()?>', data['order'], function() { doReveal(); });

        function doReveal() {
            counter--;
            if (counter > 0) return;
            $('#order_detail_modal').reveal({ // The item which will be opened with reveal
                animation: 'fade',                   // fade, fadeAndPop, none
                animationspeed: 600,                       // how fast animtions are
                closeonbackgroundclick: true,              // if you click background will modal close?
                dismissmodalclass: 'close_modal'    // the class of a button or element that will close an open modal
            });
        }
    }

它只是应用一个计数器，指定在执行显示之前需要完成多少函数，然后在每次调用vkTemplate完成时检查。

首先触发一组函数，然后回调到最终函数

2 个答案: