Jasny Bootstrap offcanvas menu - ajax 'close' causing dismiss issue

Question

Question Background:

JSFiddle - https://jsfiddle.net/k9K5d/200/embedded/result/

I am using Jasny Bootsrap to develop an 'off-canvas' slide out menu.

The Issue:

The menu slides out fine and also closes fine when the toggle button is pressed. The problem comes when closing the menu with an ajax call through code.

Within the menu I have a button (labeled 'Click') that makes an ajax call to append some data to a div. Within the Success method of the ajax call I am calling a Jasny 'hide' method that should dismiss the menu.

The menu does dismiss BUT often the 'body' of the view is closing before the menu slides, as shown by the red arrow:

The Code:

The Following shows my code for calling the data to be appened to a div, and then to close the off canvas menu:

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

var jsonData = {
    "values" : ["Test1", "Test2"]
    }

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data : { json: JSON.stringify( jsonData ) },
  success: function(data)
  {
    var arraySize = data.values.length;

    $('#arrayHolder').html(arraySize);

    closeMenu();
  }

});

});


function closeMenu()
{
    $('.navmenu').offcanvas('hide');
}

I have provided a JSFiddle to display this: https://jsfiddle.net/k9K5d/200/

This issue appears on the second click of the ajax call 'Click' button.

Any help working out why the ajax call to the closeing code is causing this style would be great.

Answer 1

try to use .promise().done()

$('#arrayHolder').html(arraySize).promise().done(function(){
   closeMenu();
});

Answer 2

Make your function like this. Work fine.

function closeMenu()
{
     $('.navbar-toggle').click()
}