Stefan: JQueryMobile 1.4 reload via AJAX?

Hallo zusammen,

ich bin neu im Bereich JQueryMobile und komme irgendwie mit dem PageReload / Pagecontainer nicht klar.

Ich will eine ganz kleine Admin erstellen mit Loginseite, Übersichtsseite mit Suche in einer Artikelliste und eine Seite mit den Artikeldetails.

Als Backend habe ich PHP/MSSQL.

So weit alles kein problem nun meine Frage:

Muss ich zuerst die Container anlegen und dann den Inhalt via AJAX nachladen, oder muss ich die ganze seite via AJAX laden?

z.B:
HTML:

  
<div data-role="page"  data-dialog="true" data-close-btn="none" id="login">  
            <div data-role="header">  
                <h1>Login</h1>  
            </div>  
  
        <div data-role="main" class="ui-content">  
            <form id="check-user" class="ui-body ui-body-a ui-corner-all" method="post" data-ajax="false" action="/">  
                    <fieldset>  
                        <div data-role="fieldcontain">  
                            <!-- TODO Get from DB -->  
                            <label for="select-choice-1" class="select">Login:</label>  
                            <select name="select-choice-1"  data-native-menu="false" id="loginUser">  
                                <?php  
                                $sql = "SELECT * FROM users WHERE status = 'active'";  
                                $users = $db->queryArray($sql);  
                                foreach ($users as $user){  
                                    echo "<option value='" . $user["ID"] . "'>" . $user["login"] . "</option>";  
                                }  
                                ?>  
                            </select>  
                        </div>  
  
  
                        <div data-role="fieldcontain">  
                            <label for="password">Enter your Passwort:</label>  
                            <input type="password" value="" name="password" id="loginPassword"/>  
                        </div>  
                        <input type="submit" name="submit" id="loginSubmit" value="Login">  
                    </fieldset>  
                </form>  
        </div>  
    </div>  
  
<div data-role="page"  data-dialog="true" data-close-btn="none" id="search">  
            <div data-role="header">  
                <h1>Produktsuche</h1>  
            </div>  
  
        <div data-role="main" class="ui-content">  
            filter +  
            Category List?  
            Liste mit Links zum Artikel  
            <a href="#" data-role="button" id="loginLogout">Logout</a>  
        </div>  
    </div>  
  
<div data-role="page"  data-dialog="true" data-close-btn="none" id="details">  
            <div data-role="header">  
                <h1>Details</h1>  
            </div>  
  
        <div data-role="main" class="ui-content">  
           Artikeldetails mit tabs  
        </div>  
    </div>  
  

irgendwie kapiere ich nicht, wie ich nun z.B: im Formular die Page zur Kategorieliste umschalte, falls das Login "ok" ist.

muss ich nun via JQuery den Submit abfangen und dann bei erfolg die Page ändern? Aber wie bekomme ich dann den Inhalt in die category page?

  
$("#loginSubmit").on("click", function(e) {  
        e.preventDefault();  
        login();  
    });  
  
function login() {  
    var password = $("#loginPassword").val();  
    var userID = $("#loginUser").val();  
    $.ajax({  
        type: "POST",  
        url: "/",  
        data: {  
            type: "login" ,  
            userID: userID,  
            password: password  
        },  
        dataType: "html",  
        success: function(html) {  
            if (html == "error"){  
                //nothing => show login again, perhaps with error?  
            }  
            else {  
                //Change page to category, but how?  
                //var newPage = $(data.d);  
                var newPage = html;  
                //append it to the page container  
                newPage.appendTo($.mobile.pageContainer);  
                //go to it  
                $.mobile.changePage(newPage);  
            }  
        }  
    });  
}  

irgendwas mach ich da im JS total falsch :s SORRY ich gehe mal davon aus, dass das sicher gnaz einfach ist und ich nur den Wald vor lauter Bäumen nicht sehe :s

DANKE im Voraus!