How to show sidebar after successful ajax call

user_7247721 0
Viewed 447

I'm using ajax to show data on the sidebar. I can show the sidebar with a button but I m trying to show it after new data is loaded successfully instead of clicking the button again. This is my function to get data which works fine

    function showAirportInfo(id) {
        var id = id;
        $.ajax({
            url: "{{route('front.getairportdetail')}}",
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            type: 'POST',
            dataType: 'html',
            success: function(data) {
                var dd = JSON.parse(data);
                $('#airportdetail').html(dd);

            }
        });
    };

This is my toggle button

    <a id="sidebarNavToggler" class="btn btn-sm btn-secondary" href="javascript:;" role="button"
   aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500"> Show Airport </a>

This is my sidebar

    <aside id="sidebarContent" class="u-sidebar" aria-labelledby="sidebarNavToggler">
  <div class="u-sidebar__scroller">
    <div class="u-sidebar__container">
      <div class="u-header-sidebar__footer-offset">
        <div class="js-scrollbar u-sidebar__body">
          <div class="u-sidebar__content u-header-sidebar__content" id="airportdetail">
            
          </div>
        </div>
      </div>
    </div>
  </div>
</aside>

How can I open the sidebar after successful ajaxcall ? Thanks for your help

laravel jquery ajax
1 Answers

I'm not sure which sidebar library did you use.

But, all sidebar libraries support a method to toggle the visibility. As they mentioned in https://jillix.github.io/jQuery-sidebar/, you can trigger sidebar to open or close at any time.

// Sidebar on left (default)
    $(".sidebar.left").sidebar().trigger("sidebar:open");

You can add this snippet in success callback method of $.ajax(), something like this

function showAirportInfo(id) {
        var id = id;
        $.ajax({
            url: "{{route('front.getairportdetail')}}",
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            type: 'POST',
            dataType: 'html',
            success: function(data) {
                var dd = JSON.parse(data);
                $('#airportdetail').html(dd);

                $(".sidebar.left").sidebar().trigger("sidebar:open"); // Here!!!!!
            }
        });
    };

If the problem isn't solved yet, please let me know what sidebar library did you use.

user_154874270
Related