jquerymobile 主题 .html 动态 div 替换 jquery

Posted

技术标签:

【中文标题】jquerymobile 主题 .html 动态 div 替换 jquery【英文标题】:jquerymobile theme .html dynamic div replacement jquery 【发布时间】:2015-08-26 15:21:00 【问题描述】:

所以我即将结束,我正在将移动网站从自定义用户构建的主题升级为使用新的 jquerymobile 主题。

问题在于该站点有一个聊天室部分,它利用以下代码不断更新聊天消息 div,其中包含另一个包含新消息的 php 文件的内容。

    <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>

这段代码可以正常工作,直到我将 jquerymobile 主题 js 添加到文件的头部,然后我得到一个空白页面,或者页面加载,但聊天文本 div 是空的并且永远不会加载。

在添加 jquerymobile 部分之前,该文件的工作副本如下: http://furrtrax.com/furryim/chatroomb.txt

损坏的是在这个网址: http://furrtrax.com/furryim/chatroomb.php.txt

所有包含都在这些页面位置的正确相对 url 中,所以如果你想查看脚本和 css 标记中加载的内容,可以通过 url 加载它们。

请帮我解决这个问题。

【问题讨论】:

【参考方案1】:

第一个测试可能是“mobileinit”事件的使用。 “mobileinit” 替换 jQuery 的“document.ready”(在您的示例中为空)并在 JQM 完全加载后触发,请参阅 here

尝试像这样包装您的代码,也许它会有所帮助...

$( 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);
);

【讨论】:

我想检查自己的代码总是很好,我只是在该页面的 php 标头中发现了潜在的 SQL 注入并修复了它。如果只能访问聊天日志表,那将是一个未成年人。 不幸的是,这没有用,我也试着摆弄了一下,但我得到了完全相同的结果。好像 jquery 主题和 jquery.min.js 不能共存

以上是关于jquerymobile 主题 .html 动态 div 替换 jquery的主要内容,如果未能解决你的问题,请参考以下文章

Jquery Mobile 读取动态列表中的文档

jQueryMobile:动态添加行到带有列切换的表后刷新

深入了解jQuery Mobile-1

jQueryMobile 'data-scroll=true' 不适用于动态注入的页面

jQuery Mobile:在列表视图数据拆分图标上更改/切换主题

移动WebAPP开发框架TOP10