jquerymobile theme .html dynamic div replacement jquery

Question

So i am about at witts end, i am in the process of upgrading a mobile website from a custom user built theme to use the new jquerymobile theme.

the problem is that the site has a chatroom section which utilizes the following code to constantly update the chat message div with the contents of another php file containing the new messages.

    <script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">  
// jQuery Document  
$(document).ready(function() {
});

    function loadLog(){

        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div                 
            }
        });  
    }  
    function sendData(){

        $.post ('chathandlerb.php',{message: form.message.value,roomid: form.roomid.value,cmode: form.cmode.value,sid: form.sid.value});
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div 
                $("#message").val(""); 
                loadLog();
            }
        });  
    }  

$('#form').submit(function() { 
    // submit the form 
    sendData(); 
    return false; 
});

loadLog();
setInterval (loadLog, 5000);
</script>

This code works fine, untill i add the jquerymobile theme js to the head section of the file, then i either get a blank page, or else the page loads, but the chat text div is empty and never loads.

a working copy of the file, before adding the jquerymobile sections is here: http://furrtrax.com/furryim/chatroomb.txt

the broken one is at this url: http://furrtrax.com/furryim/chatroomb.php.txt

All of the includes are in the proper relative urls from those pages locations, so if you want to look at whats loaded in the script and css tags you can load them by url.

Please help me out on this.

Answer 1

A first test could be the usage of the "mobileinit" event. "mobileinit" replaces jQuery's "document.ready" (which is empty in your example) and fires once JQM is fully loaded, see here

Try to wrap your code like this, maybe it helps...

$( document ).on( "mobileinit", function() {

    function loadLog(){
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div                 
            }
        });  
    }  
    function sendData(){

        $.post ('chathandlerb.php',{message: form.message.value,roomid: form.roomid.value,cmode: form.cmode.value,sid: form.sid.value});
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div 
                $("#message").val(""); 
                loadLog();
            }
        });  
    }  

    $('#form').submit(function() { 
        // submit the form 
        sendData(); 
        return false; 
    });

    loadLog();
    setInterval (loadLog, 5000);
});