0

ユーザーが[見積もりを取得]ボタンをクリックするたびに、GIFアニメーションが表示され、古い表示は非表示になります。

ページにダンプしたばかりのHTMLを返すバックエンドサービスにクエリを実行します（APIのSMARTYを利用して、フロントエンドのスキルが低いため、フォーマットを処理します）。エラーが発生すると、HTMLの代わりにJSONが返されます（したがって、ちょっと逆にtry catchが返されます。この場合、「success」は「catch」で発生し、「failure」は「try」で発生します）。

エラーが発生すると、HandleMessages（）は応答を取得し、そこに格納されているメッセージを処理します（これは正常に機能します）。エラーが処理された後、GIFは消えるはずです（.collapseにあり、非表示にしているため）。これは発生しておらず、ページに何かをalert（）した場合にのみ発生します。alert（）にコメントが付いているか欠落している場合、これは機能しません。

それはとてもばかげた、またはばかげたものだと確信していますが、あなたの助けはいつもありがたいです。

コードは次のとおりです。

$('#findCarriers').click(function(){

    var data = new Object();

    $('#carrierLoad').collapse('show');
    $('#carriers').collapse('hide');

    data.general = {
        'code': $('#warehouse').val(),
        'shipper': $('#shipper_zip').val(),
        'consignee': $('#consignee_zip').val(),
        'shipment_type': $('#direction').val(),
        'total_weight': $('#total_weight').text(),
    };

    data.accessorials = [];

    $('#accessorials').find('input:checkbox:checked').each(function(acc_index){

        data.accessorials.push($(this).val());

    });

    data.units = [{
        'num_of': $('#total_pallets').val(),
        'type': 'pallet',
        'weight': 0
    }];

    data.products = [];

    $('#items tr').each(function(index){

        data.products.push({
            'pieces': 1,
            'weight': parseFloat($(this).find('.weight').val(), 10),
            'class': parseInt($(this).find('.class').val(), 10)
        }); 

    });

    $.post('index.php?p=api&r=html&c=ctsi&m=lcc', data, function(resp){
        try {

            resp = $.parseJSON(resp);
            handleMessages(resp);

            carriersClear('find carriers');
            alert('good'); // comment out or remove and the show and hide on the collapse never happens
            $('#carrierLoad').collapse('hide');
            $('#carriers').collapse('show');
        } catch(err) {

            $('#carriers').html(resp);
            alert('fail'); // comment out or remove and the show and hide on the collapse never happens
            $('#carrierLoad').collapse('hide');
            $('#carriers').collapse('show');

        }

    });

    return false;

});

ヘルパー関数：

function setError(e_title, e_msg, e_type) {

    $.pnotify({
        title: e_title,
        text: e_msg,
        type: e_type
    });

}

function handleMessages(jsResponse) {

    $.each(jsResponse.message, function(){

        setError(this.traceroute[0] + '-' + this.traceroute[1] + '-' + this.traceroute[2], this['message'], this['type'])

    });

}

function carriersClear(reason) {

    $('#carriers').html('');

    //alert(reason);

}

そしてここにHTMLがあります：

<div class="row">

<div class="span10">

    <h3 class="heading" data-toggle="collapse" data-target="#carrierSelect">Carriers</h3>

    <div class="bg-light collapse in bg-light" id="carrierSelect">

        <div class="row spacer-top spacer-bottom">

            <div class="span2 offset8">
                <a href="#" class="btn btn-primary" id="findCarriers">Get Quote</a>
            </div>

        </div>

        <div class="row spacer-bottom collapse" id="carrierLoad">
            <div class="span2 offset4"><img class="center-block" src="view/img/load.gif" /></div>
        </div>

        <div class="row">

            <div class="span10 bg-x-light collapse in spacer-top" id="carriers">

            </div>

        </div>

    </div>

</div>

4

1 に答える 1

0

carriersClear（）の後の行をcallbackとしてcarriersClear関数に渡す必要があります。そのようです：

$.post('index.php?p=api&r=html&c=ctsi&m=lcc', data, function(resp){
    try {

        resp = $.parseJSON(resp);
        handleMessages(resp);

        carriersClear('find carriers', function(){
            $('#carrierLoad').collapse('hide');
            $('#carriers').collapse('show');
        }
    }

それから：

function carriersClear(reason,callback) {
    $('#carriers').html('');
    callback();
}
于 2013-03-26T18:01:04.697 に答える