Semantic user interface and ajax uploaded content

I also modified the original modal.js script to support ajax content and added a new behavior called "ajax", here is my code snippet:

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 that:

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

The above code works perfectly and loads the content correlation, but I would like to expand it, so I can add additional information like user url, dataType etc. almost all ajax parameters, and I would like to do that from the initialization part, for example:

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

How to do it:

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

A bit late, but this is what works 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')
});

html, modl:

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

Source: https://habr.com/ru/post/1606091/


All Articles