Handle preloader view

I have a controller to validate data and call API, after that, it will return a View with a preload View.
Problem is that I want my route go like this

... -->Fill value(View) --> Validate data(controller) --> Preload View --> Call API and wait --> Final View()
But it’s now going like this
... -->call API then return --> Preload View --> Final View.

Can you guys help me to make the Validate return to Preload View then return Final View after call API success?

Can you provide more details with code examples on how are you doing this?

Validate in Routes

app.request.post('/ve-may-bay-quoc-te/validate',
                          {
                              OriginCode: $$("#ipOriginalValue").val(), DestCode: $$("#ipDestinationValue").val(), DepartDate: $$("#ipDepatureDateValue").val(),
                              ReturnDate: $$("#ipReturnDateValue").val(), ADT: $$("#adultvalue").html(), CHD: $$("#childvalue").html(), INF: $$("#infantvalue").html(),
                              ItineraryType: '1', PreferAirline: +$$(".search-chips").find('input[type="hidden"]').val()
                          },
                          function (data) {

//I want preload View() happen in here!!!

//After that routes will post Data below to Controller  --> call API --> Final View()
                              var check_return = data;
                              if ('0'.localeCompare(check_return) === 0) {
                                  var oneway = $$('#one-ways').prop('checked');
                                  if (undefined === oneway || oneway === true) {
                                      app.dialog.alert('1', 'tpbank');
                                     
                                      app.router.navigate('/ve-may-bay-quoc-te/danh-sach/?OriginCode=' + $$("#ipOriginalValue").val()
                                          + '&DestCode=' + $$("#ipDestinationValue").val()
                                          + '&DepartDate=' + $$("#ipDepatureDateValue").val()
                                          + '&ReturnDate=' + $$("#ipReturnDateValue").val()
                                          + '&ADT=' + $$("#adultvalue").html()
                                          + '&CHD=' + $$("#childvalue").html()
                                          + '&INF=' + $$("#infantvalue").html()
                                          + '&ItineraryType=1'
                                          + '&PreferAirline=' + $$(".search-chips").find('input[type="hidden"]').val());
                                  } else {
                                      if ($$('#ipReturnDateValue').val() != null || $$('#ipReturnDateValue').val() !== "") {
                                          app.dialog.alert('2', 'tpbank');

                                          app.router.navigate('/ve-may-bay-quoc-te/danh-sach-hai-chieu/?OriginCode=' + $$("#ipOriginalValue").val()
                                              + '&DestCode=' + $$("#ipDestinationValue").val()
                                              + '&DepartDate=' + $$("#ipDepatureDateValue2").val()
                                              + '&ReturnDate=' + $$("#ipReturnDateValue").val()
                                              + '&ADT=' + $$("#adultvalue").html()
                                              + '&CHD=' + $$("#childvalue").html()
                                              + '&INF=' + $$("#infantvalue").html()
                                              + '&ItineraryType=2'
                                              + '&PreferAirline=' + $$(".search-chips").find('input[type="hidden"]').val());
                                      }
                                  }
                              }
                              else {
                                  app.dialog.alert("Dữ liệu chưa chính xác, vui lòng nhập lại", "TPBANK");
                              }
                          });

And this is my preload and result view()

<div class="page__load page__load--fly">
            <div class="nav-c">
                <table>
                    <tr>
                        <td class="left">
                            <a href="#" class="link nav-c__button nav-c__button--back back"></a>
                        </td>
                        <td class="center">
                            <div class="nav-c__text">
                                @objSearch.orig_code <img class="nav-c__text__icon" src="/Resources/img/ic_1way_white_ngang.svg" alt=""> @objSearch.dest_code
                            </div>
                            <div class="nav-c__sub-text">
                                <span class="inline-block">Thứ 5 18/05/2017</span>
                            </div>
                        </td>
                        <td class="right">
                            <a href="tel:1900555520" class="external link nav-c__button nav-c__button--call"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="page__load__item">
                <div class="page__fly">
                    <div class="page__fly__inner page__fly__title2">
                        <div class="page__fly__title">Đang tìm kiếm chuyến bay</div>
                        <div>Hà Nội</div>
                        <div>
                            <img src="/Resources/img/ic_1way_white.svg" alt="">
                        </div>
                        <div>Singapore</div>
                    </div>
                    <div class="page__fly__inner page__fly__title3">
                        <span class="inline-block">Chúng tôi làm việc với hơn</span><span class="inline-block">30 hãng hàng không trên khắp thế giới</span>
                    </div>
                    <div class="page__fly__inner page__fly__title4">
                        <img src="/Resources/img/group-282.png" alt="">
                    </div>
                    <div class="page__fly__inner page__fly__loading">
                        <div class="page__fly__loading-left">
                            <div class="page__fly__loading-left__text">
                                Đang tìm kiếm
                            </div>
                            <div class="spiner-wraper">
                                <div class="spinner">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="page__fly__loading-right" id="demo-determinate-container">
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="page__show">
            <div class="nav-c">
                <table>
                    <tr>
                        <td class="left">
                            <a href="#" class="link nav-c__button nav-c__button--back back"></a>
                        </td>
                        <td class="center">
                            <div class="nav-c__Text">
                                Danh sách chuyến bay
                            </div>
                        </td>
                        <td class="right">
                            <a href="tel:1900555520" class="external link nav-c__button nav-c__button--call"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="page-content">
                <div class="content__wrap content__wrap--list-fly">
                    <div class="box-c">
                        <div class="box-c__content">
                            <table class="list-fly__head">
                                <tr>
                                    <td>
                                        <div class="list-fly__loc">Hà Nội - @ViewBag.RspFlights</div>
                                        <div class="list-fly__loc-short">HNA</div>
                                        <div class="list-fly__time">Thứ 5 18/05/2017</div>
                                    </td>
                                    <td class="center">
                                        <img class="list-fly__ic" src="/Resources/img/ic_1way_gray.svg" alt="">
                                    </td>
                                    <td class="right">
                                        <div class="list-fly__loc">Singapore</div>
                                        <div class="list-fly__loc-short">SIN</div>
                                        <div class="list-fly__time">&nbsp;</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="box-c">
                        <div class="box-c__content no-padding">
                            <a class="item-link smart-select smart-select--custom smart-select-init">
                                <select name="price-low-high-1">
                                    <option value="low" selected>Thấp đến cao</option>
                                    <option value="high">Cao đến thấp</option>
                                </select>
                                <div class="item-content">
                                    <table>
                                        <tr>
                                            <td>
                                                <div class="item-inner">
                                                    <div class="item-title">Giá:</div>
                                                </div>
                                            </td>
                                            <td class="right">
                                                <img class="dropdown-ic" src="/Resources/img/ic_dropdown.svg" alt="">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="box-list box-list--int-1">
                        <div class="box-list__item">
                            @if (objData != null)
                            {
                                foreach (var data in objData)
                            {
                                for (var i = 0; i < data.depart_flight.segments.Length; i++)
                                {

                                    <label class="box-list__radio sheet-open link" data-sheet=".sheet-modal--price-detail">
                                        <input type="radio" name="boxlist1">
                                        <div class="box-list__wrap box-list__wrap--one">
                                            <table class="box-list__top">
                                                <tr>
                                                    <td class="box-list__class">@data.depart_flight.segments[i].classify</td>
                                                    <td class="center">
                                                        <table class="box-list__middle">
                                                            <tr>
                                                                <td class="box-list__time">@data.depart_flight.segments[i].depart_date.Split(' ')[1]</td>
                                                                <td class="box-list__time2 center">
                                                                    @(data.depart_flight.segments[i].duration/60)h @(data.depart_flight.segments[i].duration%60)m
                                                                    <br>
                                                                    <hr> Điểm dừng 1
                                                                </td>
                                                                <td class="box-list__time right">@data.depart_flight.segments[i].arrival_date.Split(' ')[1]</td>
                                                                @*<td class="box-list__time right">(data.depart_flight.segments[i].arrival_date)</td>*@
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td class="box-list__flight right"><img src="/Resources/img/ic_vja_lg.png" alt=""></td>
                                                </tr>
                                            </table>
                                            <hr class="box-list__hr">
                                            <table class="box-list__bottom">
                                                <tr>
                                                    <td class="box-list__codef">@data.depart_flight.segments[i].airline_code</td>
                                                    <td class="box-list__price right">
                                                        @data.depart_flight.totalPrice đ
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </label>
                                }
                            }
                            }
                            

                            @*<label class="box-list__radio sheet-open link" data-sheet=".sheet-modal--price-detail">
                                <input type="radio" name="boxlist1">
                                <div class="box-list__wrap box-list__wrap--one">
                                    <table class="box-list__top">
                                        <tr>
                                            <td class="box-list__class">Economy</td>
                                            <td class="center">
                                                <table class="box-list__middle">
                                                    <tr>
                                                        <td class="box-list__time">5:45</td>
                                                        <td class="box-list__time2 center">
                                                            2h10m
                                                            <br>
                                                            <hr> Điểm dừng 1
                                                        </td>
                                                        <td class="box-list__time right">7:45</td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="box-list__flight right"><img src="/Resources/img/ic_vja_lg.png" alt=""></td>
                                        </tr>
                                    </table>
                                    <hr class="box-list__hr">
                                    <table class="box-list__bottom">
                                        <tr>
                                            <td class="box-list__codef">VJ111</td>
                                            <td class="box-list__price right">
                                                1,780,000 đ
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </label>
                            <label class="box-list__radio sheet-open link" data-sheet=".sheet-modal--price-detail">
                                <input type="radio" name="boxlist1">
                                <div class="box-list__wrap box-list__wrap--one">
                                    <table class="box-list__top">
                                        <tr>
                                            <td class="box-list__class">Economy</td>
                                            <td class="center">
                                                <table class="box-list__middle">
                                                    <tr>
                                                        <td class="box-list__time">5:45</td>
                                                        <td class="box-list__time2 center">
                                                            2h10m
                                                            <br>
                                                            <hr> Điểm dừng 1
                                                        </td>
                                                        <td class="box-list__time right">7:45</td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="box-list__flight right"><img src="/Resources/img/ic_vja_lg.png" alt=""></td>
                                        </tr>
                                    </table>
                                    <hr class="box-list__hr">
                                    <table class="box-list__bottom">
                                        <tr>
                                            <td class="box-list__codef">VJ111</td>
                                            <td class="box-list__price right">
                                                1,780,000 đ
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </label>
                            <label class="box-list__radio sheet-open link" data-sheet=".sheet-modal--price-detail">
                                <input type="radio" name="boxlist1">
                                <div class="box-list__wrap box-list__wrap--one">
                                    <table class="box-list__top">
                                        <tr>
                                            <td class="box-list__class">Economy</td>
                                            <td class="center">
                                                <table class="box-list__middle">
                                                    <tr>
                                                        <td class="box-list__time">5:45</td>
                                                        <td class="box-list__time2 center">
                                                            2h10m
                                                            <br>
                                                            <hr> Điểm dừng 1
                                                        </td>
                                                        <td class="box-list__time right">7:45</td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="box-list__flight right"><img src="/Resources/img/ic_vja_lg.png" alt=""></td>
                                        </tr>
                                    </table>
                                    <hr class="box-list__hr">
                                    <table class="box-list__bottom">
                                        <tr>
                                            <td class="box-list__codef">VJ111</td>
                                            <td class="box-list__price right">
                                                1,780,000 đ
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </label>*@
                        </div>
                    </div>
                </div>
            </div>
        </div>

Still not very clear. But do you mean to show preloader while ajax request?

Then you can call preloader for example:

app.preloader.show(); // show before sending request
app.request.post('/ve-may-bay-quoc-te/validate',
  {
      //...
  },
  function (data) {
    app.preloader.hide(); // hide when you got a response
    // your other checks
  }
);

use beforeSend, maybe

1 Like


I want show my preloader View in exactly where you put app.preloader.show();

app.preloader.show(); // in this
app.request.post('/ve-may-bay-quoc-te/validate',
  {
      //...
  },
  function (data) {
    app.preloader.hide(); // hide when you got a response
    // your other checks
  }
);

Can I make it happen?

If you mean another page by preloader view, then logic sould be the following:

app.views.main.router.navigate('/path-to-preloader-page/', {
  once: {
    pageAfter(){
      // once page view is in, start sending request
      app.request.post('/ve-may-bay-quoc-te/validate',
        {
            //...
        },
        function (data) {
          app.preloader.hide(); // hide when you got a response
          
          // your other checks
        }
      );
    }
  }
})

I got it, thanks you, sir!