Semantic UI modal and ajax loaded content

Question

I have modified original modal.js script to support ajax content as well, and added a new Behavior called "ajax" here is my piece of code:

ajax: function(callback) {
  callback = $.isFunction(callback)
    ? callback
    : function(){}
  ;
  var $content = $(this).find('.content');
  $.get("contentData.php", function(data) {
    $content.html(data);
  });

And I call it like:

$('body').on('click', '.domOdal', function() {
    $('.ui.modal')
        .modal({
            observeChanges: true
        }).modal('ajax')
});

The above code works perfect and loads content correclty, but I would like to extended a bit more, so I can include additional info such as custom url, dataType, etc pretty much all the ajax options, and I would like to do that from initialization part like:

$('body').on('click', '.domOdal', function() {
    $('.ui.modal')
        .modal({
            observeChanges: true
        }).modal('ajax', {"id":5}, dataType:"json", "url": http://myurl.php" etc...)
});

Answer 1

A bit late but this it what's working for me:

$('body').on('click', '.domOdal', function (e) {
    e.preventDefault();
    $('.ui.modal')
        .modal({
            blurring: true,
            observeChanges: true,
            transition: 'scale',
            onVisible: function (callback) {
                callback = $.isFunction(callback) ? callback : function () { };
                var $content = $(this).find('.content');
                $.get("contentData.php", function (data) {
                    $content.html(data);
                });
            }
        }).modal('show')
});

And in your html where the modl is called:

<div class="ui modal">
    <i class="close icon"></i>
    <div class="content">
    </div>
</div>

Answer 2

How about doing it like this:

$('body').on('click', '.domOdal', function() {
    $.ajax({
      url: "specs.html",
      type: 'POST',
      dataType: 'xml',
      dataType: 'html'
    }).done(function(response) {
        console.log(response)
      $(response).modal();
    });     
});