Hey guys, I'm just wondering if you could help me with a little issue I'm having. I created a notification for my ASP.NET application it all works great but I have a minor problem when I try and catch the user interaction event from the screen in the .js file. For some reason when there are more than one notifications on screen, no matter which one the user clicks it always returns the last one in the queue. Below is the relevant code in the js file so if anyone can spot what I'm doing wrong I'd be very grateful. When I debug the code all the I'd are set correctly its just when the user clicks the close button the base.options.ClientNotificationId is always the last one rendered to the screen.
Entire Js File
(function($) {
$.notification = function (options, customContainer) {
var $notification = null;
var isCustom = false;
var eventType = { closeButtonClick: 1, userClick: 2, mouseOver: 3, timeOut: 4 };
this.init = function(options) {
this.options = $.extend({}, $.notification.defaultOptions, options);
this.options.type = this.options.cssPrefix + this.options.type;
this.options.id = this.options.type + '_' + new Date().getTime();
this.options.layout = this.options.cssPrefix + 'layout_' + this.options.layout;
this.options.event = '';
if (this.options.custom.container) customContainer = this.options.custom.container;
isCustom = ($.type(customContainer) === 'object') ? true : false;
return this.addQueue();
};
this.addQueue = function() {
var isGrowl = ($.inArray(this.options.layout, $.notification.growls) == -1) ? false : true;
if (!isGrowl) (this.options.force) ? $.notification.queue.unshift({ options: this.options }) : $.notification.queue.push({ options: this.options });
return this.render(isGrowl);
};
this.render = function(isGrowl, Url) {
var container = (isCustom) ? customContainer.addClass(this.options.theme + ' ' + this.options.layout + ' noty_custom_container') : $('body');
if (isGrowl) {
if ($('ul.noty_cont.' + this.options.layout).length == 0)
container.prepend($('<ul/>').addClass('noty_cont ' + this.options.layout));
container = $('ul.noty_cont.' + this.options.layout);
} else {
if ($.notification.available) {
var fromQueue = $.notification.queue.shift();
if ($.type(fromQueue) === 'object') {
$.notification.available = false;
this.options = fromQueue.options;
} else {
$.notification.available = true;
return this.options.id;
}
} else {
return this.options.id;
}
}
this.container = container;
this.bar = $('<div class="noty_bar"/>').attr('id', this.options.id).addClass(this.options.theme + ' ' + this.options.layout + ' ' + this.options.type);
$notification = this.bar;
$notification.append(this.options.template).find('.noty_text').html(this.options.text);
$notification.data('noty_options', this.options);
alert('Generating ' + this.options.ClientNotificationId);
(this.options.closeButton) ? $notification.addClass('noty_closable').find('.noty_close').show() : $notification.find('.noty_close').remove();
$notification.find('.noty_close').unbind('click').bind('click', function () {
$notification.fadeOut('slow');
alert($(this).options.ClientNotificationId);
UpdateClientNotificationEntry($(this).options.ClientNotificationId, eventType.closeButtonClick);
return false;
});
if (this.options.buttons) this.options.closeOnSelfClick = this.options.closeOnSelfOver = false;
if (this.options.closeOnSelfClick) $notification.bind('click', function() {
$notification.trigger('noty.close');
alert('Click Method' + ClientNotificationId);
if (this.options.url) {
window.location = this.options.url;
}
UpdateClientNotificationEntry(this.options.ClientNotificationId, eventType.userClick);
});
if (this.options.closeOnSelfOver) $notification.bind('mouseover', function() {
$notification.animate(5000);
$notification.trigger('noty.close');
UpdateClientNotificationEntry(this.options.ClientNotificationId, eventType.mouseOver);
}).css('cursor', 'pointer');
if (this.options.buttons) {
$buttons = $('<div/>').addClass('noty_buttons');
$notification.find('.noty_message').append($buttons);
$.each(this.options.buttons, function(i, button) {
bclass = (button.type) ? button.type : 'gray';
$button = $('<button/>').addClass(bclass).html(button.text).appendTo($notification.find('.noty_buttons'))
.bind('click', function() {
if ($.isFunction(button.click)) {
button.click.call($button, $notification);
}
});
});
}
return this.show(isGrowl);
};
this.show = function(isGrowl) {
if (this.options.modal) $('<div/>').addClass('noty_modal').addClass(this.options.theme).prependTo($('body')).fadeIn('fast');
$notification.close = function() { return this.trigger('noty.close'); };
(isGrowl) ? this.container.prepend($('<li/>').append($notification)) : this.container.prepend($notification);
if (this.options.layout == 'noty_layout_topCenter' || this.options.layout == 'noty_layout_center') {
$.notification.reCenter($notification);
}
$notification.bind('noty.setText', function(event, text) {
$notification.find('.noty_text').html(text);
if (this.options.layout == 'noty_layout_topCenter' || this.options.layout == 'noty_layout_center') {
$.notification.reCenter($notification);
}
});
$notification.bind('noty.getId', function(event) {
return $notification.data('noty_options').id;
});
$notification.one('noty.close', function(event) {
var options = $notification.data('noty_options');
if (options.modal) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
$notification.clearQueue().stop().animate(
$notification.data('noty_options').animateClose,
$notification.data('noty_options').speed,
$notification.data('noty_options').easing,
$notification.data('noty_options').onClose)
.promise().done(function() {
if ($.inArray($notification.data('noty_options').layout, $.notification.growls) > -1) {
$notification.parent().remove();
} else {
$notification.remove();
$.notification.available = true;
this.render(false);
}
});
});
$notification.animate(this.options.animateOpen, this.options.speed, this.options.easing, this.options.onShow);
if (this.options.timeout) $notification.delay(this.options.timeout).promise().done(function () {
$notification.removeProp(this.options.url);
$notification.trigger('noty.close');
UpdateClientNotificationEntry(this.options.notificationId, eventType.timeOut);
});
return this.options.event;
};
return this.init(options);
};
$.notification.get = function(id) { return $('#' + id); };
$.notification.close = function(id) {
$.notification.get(id).trigger('noty.close');
};
$.notification.setText = function(id, text) {
$.notification.get(id).trigger('noty.setText', text);
};
$.notification.closeAll = function() {
$.notification.clearQueue();
$('.noty_bar').trigger('noty.close');
};
$.notification.reCenter = function(notification) {
notification.css({ 'left': ($(window).width() - notification.outerWidth()) / 2 + 'px' });
};
$.notification.clearQueue = function() {
$.notification.queue = [];
};
$.notification.queue = [];
$.notification.growls = ['noty_layout_topLeft', 'noty_layout_topRight', 'noty_layout_bottomLeft', 'noty_layout_bottomRight'];
$.notification.available = true;
$.notification.defaultOptions = {
ClientNotificationId : 0,
layout: 'top',
theme: 'noty_theme_default',
animateOpen: { height: 'toggle' },
animateClose: { height: 'toggle' },
easing: 'swing',
text: '',
url: '',
type: 'alert',
speed: 500,
isCustomNotification : false,
closeButton: false,
closeOnSelfClick: true,
closeOnSelfOver: false,
force: false,
onShow: false,
onClose: false,
buttons: false,
modal: false,
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
cssPrefix: 'noty_',
custom: {
container: null
}
};
$.fn.notification = function(options) {
return this.each(function() {
(new $.noty(options, $(this)));
});
};
})(jQuery);
function notification(options) {
return jQuery.notification(options);
}