Question

I have an jquery ajax success function which uses a template to put json information in a div, then a modal plugin to fade in a modal. The problem is, the modal is firing before all the content is completely written to the div. Is there a way that I can make this collection of template actions complete before I call the modal fires?

        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
        });

        }   

I tried wrapping the whole thing in an function and putting the .reveal function in a callback, but i must have the wrong syntax or idea. Any suggestions are appreciated. Thank you!

Answer 1

I presume that vkTemplate dose a ajax call. If so then you have 2 options:

• use sync ajax

• add a callback param to vkTemplate so you can order the requests

      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()
        })
      })