rocky rocky - 4 months ago 26
Javascript Question

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();




Answer

I finally figured how to get this code working. I used jquery .delegate() and i now work like magic. Below is the working code. thanks @abc123 for stoping by.

var media = (function(){
// Cache dom
var baseUrl = location.origin+'/dashboard/media';

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

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

// Bind Events
$button.on('click', _render);
$mediaBox.delegate('.imageBox', 'click', _addImage);

function _render(e){
    e.preventDefault();
    $media.show(500);
    _loadData();
}

// Load images
function _loadData(){
    $.ajax(options);
}

// Add Images 
function _addImage(){
    img = $(this).find('img');

    console.log(img.attr('src')); // This should display the image url
}

})();