Question

I am trying to transfer my website into jquery mobile and am running into an error when using:

$('#information').load('getRegister.php'  , function() {
                    $('#preloader').hide(); 
                });

This function gets called to load html code dynamicaly into the page without a refresh, but the code that appears does not match the css of code already in the website. You can see this in the screenshot below:

I am pretty stumped on why, the buttons and text fields do not take on the styling of the form already loaded into the page. The code the .load calls is this php file:

<?php
  require ('myConnectDB.inc.php');     

// echo registration form

echo "

<p class=\"center\"> &nbsp;</p>

<form name=\"input2\" action=\"\" onsubmit =  \" return register()\" method=\"post\"  data-ajax=\"false\">
                    <p class=\"center\"> User Name: 
                    <input type=\"text\" name=\"user\"  id=\"userRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Email: 
                    <input type=\"text\" name=\"user\"  id=\"emailRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Password: <input type=\"password\" name=\"password\" id=\"passwordRegister1\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Re-Type Password: <input type=\"password\" name=\"password\" id=\"passwordRegister2\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> 
                    <input type=\"submit\"  class=\"  button blue\" name = \"login\" value=\"Register\" />
                    </p>
            </form>";   
?>

Answer 1

You need to trigger the create event on the newly added content.

From the Docs

If you should generate new markup client-side or load in content via
AJAX and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(see below).

For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs

and buttons in this case) into the enhanced versions. The code for
this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

In your case you will probably want to something like the following

$('#information').load('getRegister.php'  , function() {
        $('#preloader').hide(); 
        $('#information').trigger("create");
 });