Question

I have a basic jQuery webpage that shows off some basic features, however there are some not so basic components as well. Some of my portions of the page require SQL queries via external PHP pages. These pages are feed into the main webpage via a GET, then inserted into a div. The code design to perform this action is shown below:

function changeSystem(sysName)
{
    pageReq = "menu/"+group+"/"+sysName+".php";
    $("#thesys").load(pageReq);
    stylize();
}

Stylize was created into a function to describe my styles (call via the function above and though the page creation):

function stylize()
{
    $("#form").submit(function(event) {event.preventDefault();});
    $(".tabs").tabs();
    $("button").button();
    $(".radioset").buttonset();
    $(".sortable").sortable();
    $(".sortable").disableSelection();
    $(".accordion").accordion();
}

The response returns some buttons and fields according to the page creation. The code works great, to a point. The content is displayed, however the returned content is not stylized like all the other jQuery objects on the rest of the page. They show up as traditional buttons and fields throwing off the look and feel of the page. If I replace the automated content with static imbedded content, the buttons appear appropriately stylized. Do I need to call a specialized jQuery method to correct the style of this page for this new content?

EDIT:

The style that I am referring to is jQuery’s theme via http://jqueryui.com/. The bordering style, colors and sizes do not carry over into the generated content. The theme of the buttons seem to resemble the default html theme.

SECOND EDIT:

Thank you pilotcam for those great recommendations. I have implemented your second recommendation with great success, however the second one I am still working on. The progress is shown above.

Answer 1

If you are using jQuery functions to style your original page, you’ll need to do the same with the dynamically loaded content. For example:

$("#myButton").button();

You might also consider using the jQuery load() function instead of using XMLHttpRequest directly. (although that won’t help the issue at hand)

$("#thesys").load("menu/"+group+"/"+sysName+".php");

If you need to do something after the load completes, you can add a callback to your stylize() funciton as follows:

$("#thesys").load("menu/"+group+"/"+sysName+".php", stylize);