Question

I have the following function:

simpleModal: function (data, id) {

        var responseHtml = data;

        // Append the modal HTML to the DOM
        var modalInstance = $('body').append(modalHtml);

        $(modalInstance).attr('id', id);

        $(id).find('.uiModalContent').width(480);
        $(id).find('.uiModalContent').height(320);

        // Hide the modal straight away, center it, and then fade it in
        $(id).find('.uiModal').hide().center().fadeIn();

        // Dynamically load in the passed data from the call
        $(id).find('.uiModalContent').html($(responseHtml));
        $(id).find('.uiModalContent').removeClass('loading');

        $(id).find('.ModalClose').live('click', function (e) {
            e.preventDefault();
            $(this).parents('.uiModal').fadeOut(function () { $(this).parents('.uiModalWrapper').remove() });
        });
    },

when called like:

uiModal.simpleModal('<p>An error has occured</p>','TestError');

it should append the modal to the body with the passed content and give the modalHtml an id that is also passed. However it gets confused to appends the id to the body instead of the html. How do I get around this? Thanks

Answer 1

This is because the append method returns the element you are appending to, rather than the element you’re appending.

Instead, you can use the appendTo method, and use it as follows;

var modalInstance = $(modalHtml).appendTo('body');

You also need to be using $('#' + id) as the ID selector as opposed to $(id); otherwise you’ll end up looking for all elements with the tag name of TestError.

Additionally, you should seriously consider caching the result of $('#' + id); you’re performing the same DOM lookup operation 6 times; which is totally unnecessary, as you have exactly the same jQuery object cached in var modalInstance; replace all instances of $('#' + id) to modalInstance

This point applies to $(id).find('.uiModalContent') as well; cache it!

var uiModelContent = modelInstance.find('.uiModalContent');
uiModelContent.height(320);
uiModelContent.width(480);
uiModelContent.html($(responseHtml));
uiModelContent.removeClass('loading');

Although you can also chain your methods for the same result;

 modelInstance.find('.uiModalContent').height(320).width(480).html($(responseHtml)).removeClass('loading');