Question

I have a function like: uiModal.simpleModal('<p>This is some content</p>');

Which should call a modal with the passed data as the modal content. e.g. (note I haven’t added the modalHtml as it’s not relevant to this question).

simpleModal: function (data) {

    var responseHtml = data;

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

    // Dynamically load in the passed data from the call
    $.ajax({
        timeout: 5000,
        success: function (responseHtml) {
            $(modalInstance).find('.uiModalContent').html($(responseHtml));
            $(modalInstance).find('.uiModalContent').removeClass('loading');

            isModalSuccess = true;
        },
        error: function () {
            $(modalInstance).find('.uiModalContent').html('<div class="message error"><h2>Unknown Error</h2> Please contact support</p></div>');
            $(modalInstance).find('.uiModalContent').removeClass('loading');
        }
    });

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

However it doesn’t load in the data! Can someone point me in the right direction

Thanks

Answer 1

It looks like you haven’t told your ajax method where to load the data from.

You need to pass in a URL from which you will load your data:

$.ajax({
        url: "http://www.example.com/jsonRequest",
        timeout: 5000,
        success: function (responseHtml) {}
});

UPDATE

Given your comment below it seem that you might have a slight misunderstanding of what ajax is designed for.

In your case you already have the data for the modal window and so you can use it without the need for an ajax call.

    $(modalInstance).find('.uiModalContent').html($(responseHtml));
    $(modalInstance).find('.uiModalContent').removeClass('loading');

If you also need to check that the data exists in your respoonseHtml variable then you can do that with a simply if statement:

if(responseHtml.length > 0)
{
        $(modalInstance).find('.uiModalContent').html($(responseHtml));
        $(modalInstance).find('.uiModalContent').removeClass('loading');
}
else
{
   $(modalInstance).find('.uiModalContent')
     .html('Error message here');
   $(modalInstance).find('.uiModalContent').removeClass('loading');

}