---
title: Ajax
---
<link href="css/mm-vertical.css" rel="stylesheet" type="text/css" />

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">
        {{> menu }}
      </nav>
    </div>
    <div class="col-md-9">
      <h3>Simple Ajax</h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
                <span class="fa fa-code"></span>
          </span>
        </div>
        <div class="panel-body">
          <button type="button" class="btn btn-info btn-lg" id="ajaxButton">
            get ajax menu
          </button>

          <p>

{{#markdown}}
  ```javascript
  $('#menu').metisMenu();

  $("#ajaxButton").one('click', function() {
    var $this = $(this);
    $.ajax({
      url: "demo-ajax.html",
      success: function(result) {

        $('#menu').metisMenu('dispose');
        $("#menu").append(result);

        $('#menu').metisMenu();
        $this.attr('disabled', 'disabled');
      }
    });
  });
  ```
{{/markdown}}

          </p>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">

        <ul class="metismenu" id="menu2">
          <li><a href="" class="has-arrow" data-url="ajax-1.html">Ajax Menu 1</a></li>
          <li><a href="" class="has-arrow" data-url="ajax-2.html">Ajax Menu 2</a></li>
          <li><a href="" class="has-arrow" data-url="ajax-3.html">Ajax Menu 3</a></li>
          <li><a href="" class="has-arrow" data-url="ajax-4.html">Ajax Menu 4</a></li>
        </ul>

      </nav>
    </div>
    <div class="col-md-9">
      <h3>Simple Ajax <small>one level</small></h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
                <span class="fa fa-code"></span>
          </span>
        </div>
        <div class="panel-body">

          <p>

{{#markdown}}
  ```javascript
    $('#menu2').metisMenu();

    $("[data-url]").each(function(){
        $(this).one('click', function(event){
          event.preventDefault();
          var $this = $(this);
          var url = $this.attr('data-url');
          console.log(url);

          $.ajax({
            url: url,
            success: function(result) {

              $('#menu2').metisMenu('dispose');
              $this.parent('li').append(result);

              $('#menu2').metisMenu();

              $this.click();
            }
          });

        });
    });
  ```
{{/markdown}}

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {

    $('#menu').metisMenu();

    $("#ajaxButton").one('click', function() {
      var $this = $(this);
      $.ajax({
        url: "demo-ajax.html",
        success: function(result) {

          $('#menu').metisMenu('dispose');
          $("#menu").append(result);

          noty({
              text: 'ajax menu appended to menu',
              layout: 'topRight',
              type: 'success',
              theme: 'metroui',
              progressBar: true,
              timeout: 2000
          });

          $('#menu').metisMenu();
          $this.attr('disabled', 'disabled');
        }
      });
    });

    $('#menu2').metisMenu();

    $("[data-url]").each(function(){
        $(this).one('click', function(event){
          event.preventDefault();
          var $this = $(this);
          var url = $this.attr('data-url');
          console.log(url);

          $.ajax({
            url: url,
            success: function(result) {

              $('#menu2').metisMenu('dispose');
              $this.parent('li').append(result);

              $('#menu2').metisMenu();

              $this.click();
            }
          });

        });
    });

  });
</script>