jQuery Mobile: Styling content loaded through AJAX

Question

On a particular jQuery Mobile page I am loading content through an AJAX post. I am then replacing some content in the DOM with the returned HTML. The returned HTML contains form elements, which I would like jQM to style.

This used to work in beta 1:

$.ajax({
            type: 'POST',
            url: form.attr("action"),
            data: form.serialize(),
            success: function (response) {
                if (response.worked) {
                    voucher_area.fadeOut(function () {
                        $(this).html(response.html).children().page();
                        $(this).fadeIn();
                    });
                }
                else {
                    Notify.showMessage("Could not update your call with voucher information: " + response.message, "error");
                }
            },
            dataType: "json",
            error: function () {
                Notify.showMessage("Fatal Error.");
            }
        });

The call to page on the content would style the content. However in the latest version this no longer seems to work.

Is there a correct way to style loaded content?

Thanks

I hope this is the answer to your question stackoverflow.com/questions/5346424/… — Gjorgji Tashkovski

user497876 user497876 · Accepted Answer · 2011-07-22T01:44:48

You should be able to style content directly using something like: $(this).css({'padding':'5px'}) using the styles of your choice.

Alternatively, you should be able to define the appropriate styles in an external css file as well.

jQuery Mobile: Styling content loaded through AJAX

1 Answers