0

テンプレートを使用してjson情報をdivに配置し、モーダルプラグインを使用してモーダルにフェードインするjquery ajax成功関数があります。問題は、すべてのコンテンツが 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 呼び出しを行うと思います。その場合、次の 2 つのオプションがあります。

  • 同期 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 に答える