0

我有一个 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函数放入回调中，但我一定有错误的语法或想法。任何建议表示赞赏。谢谢！

4

2 回答 2

1

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

  • 使用同步 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()
      })
    })
于 2012-06-26T16:14:53.297 回答
0

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

    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 完成时进行检查。

于 2012-06-26T16:12:00.630 回答