jeudi 7 juillet 2016

Javascript module parttern ajax

I am learning javascript design patterns. So am converting my rough jquery code into cleaner module pattern. The question is, how will i call a click event after ajax has loaded in module pattern (Object literal). I used to solve it using $(document).ajaxcomplete(callback).

here is the working supergetti code

$('.meidaBtn, #media_load_btn').on('click', function(event) {
  event.preventDefault();
  $('.media').show(500);

  $('#mediaBox').html('Loading...');
  var link = location.origin + '/dashboard/media';

  $.ajax({
    url: link
  }).done(function(data) { // data what is sent back by the php page
    $('#mediaBox').html(data); // display data

    // Click through
    $('.imageBox img').bind('click', function() {
      var src = $(this).attr('src');
      var alt = $(this).attr('alt');
      src = src.replace('tumbnail_', '');

      tinyMCE.execCommand('mceInsertContent', false, '<img src="' + src + '" alt="' + alt + '">');
      $('.media').hide();
    });
  });

});

Here is the javascript module pattern / object literal

var mediaPlugin = {
  init: function() {
    this.cacheDom();
    this.bindEvents();
  },

  // Cache Dom 
  cacheDom: function() {
    this.baseUrl = location.origin + '/dashboard/media';

    this.$button = $('.meidaBtn, #media_load_btn');
    this.$media = $('.media');
    this.$mediaBox = $('#mediaBox');
    this.$imageBox = $('.imageBox img');
  },

  // Bind Events
  bindEvents: function() {
    this.$button.on('click', this.render.bind(this));
    this.$imageBox.on('click', this.addImage.bind(this));
  },

  // Show Data
  render: function(e) {
    e.preventDefault();
    this.$media.show(500);
    this.loadData();
  },

  // Load the data
  loadData: function() {
    var that = this;
    $.ajax({
      url: this.baseUrl,
      type: 'GET',
      success: function(data) {
        // console.log(that.$mediaBox);
        that.$mediaBox.html(data);
      },
      error: function() {
        console.log("An error occored!");
      },
      complete: function() {
        // console.log("I am now complete");
        // that.loadMore();
      }
    });
  },

  // Add Image
  addImage: function() {
    var src = $(this).attr('src');
    var alt = $(this).attr('alt');
    src = src.replace('tumbnail_', '');

    tinyMCE.execCommand('mceInsertContent', false, '<img src="' + src + '" alt="' + alt + '">');
    this.$media.hide();
  }
};

mediaPlugin.init();

Aucun commentaire:

Enregistrer un commentaire