Question

I’ve made this little plugin to show Twitter style alerts:

        jQuery.fn.myAlert = function (options) {
            var defaults = {
                message: false,
            class: 'normal',
                timer: 500,
                delay: 3000,
            };
            var options = $.extend(defaults, options);
            if (!options.message || options.message == '') {
                return false;
            }
            $('body').append('<div id="alert_notification" class="'+options.class+'"><div id="alert_message">' + options.message + '</div></div>')
            $('#alert_notification').slideToggle(options.timer).delay(options.delay).slideToggle(options.timer);
        return;
        }

The problem is: first time it works great, but when I call again in the same page, the values are set from previous call.

Any ideas how to make it work?

Answer 1

My guess is that the slideToggle() isn’t showing the <div> you are intending it to show because jQuery isn’t appending new <div>s that don’t have unique IDs. You should probably remove the originally appended <div>s from the page before appending the new ones. Or, make jQuery replace the existing ones.

$('#alert_notification').remove();
$('body').append(...);

In addition, class is a reserved word in JavaScript. I would change your defaults to:

var defaults = {
    message: false,
    'class': 'normal',
    timer: 500,
    delay: 3000,
};

And then access it with options['class'] instead of options.class, or pick a different name for the class property.