Load in passed HTML using jQuery AJAX

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

Jamie Dixon · Accepted Answer · 2011-11-07 11:01:32Z

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

}

edited Nov 7, 2011 at 11:01

answered Nov 7, 2011 at 10:55

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cameron Over a year ago

There is no URL, the content is being passed in the function call

Jamie Dixon Over a year ago

It isn't. The ajax method is for retriving data from a URL. You're doing this the wrong way. Forget about the ajax part, you don't need it in this case.

Anand · Accepted Answer · 2011-11-07 10:55:54Z

1

Why I do not see any URL for the ajax call. There must be some url you want to hit, to retrieve data, if not then why you are doing $.ajax ?

answered Nov 7, 2011 at 10:55

Anand

15k8 gold badges35 silver badges44 bronze badges

2 Comments

Cameron Over a year ago

There is no URL, the content is being passed in the function call

Kyberias Over a year ago

If your passing the content, why use AJAX?

Collectives™ on Stack Overflow

Load in passed HTML using jQuery AJAX

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related