【问题标题】:JQuery AJAX Refresh Div on Interval and Change Content on ClickJQuery AJAX 在间隔上刷新 Div 并在单击时更改内容
【发布时间】:2015-10-16 17:37:39
【问题描述】:

我有一个带有“模式”对话框的后端控制面板,我想用它来显示实时信息(工作进度、服务器信息等)。我需要的是某个div(对话框)定期(1秒)“刷新”(从另一个php页面获取html内容),但也取决于我按下哪个按钮来显示对话框,它将从不同的 php 页面刷新。

这是对话框的代码:

<!-- Modal dialog -->
<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                One fine body&hellip;
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

任何按钮都可以使用:

<a data-toggle="modal" href="#myModal1" class="btn btn-default btn-block">Modal dialog</a>

我发现这段代码似乎可以让我从 php 页面更新模态内容(我将动态创建,我知道该怎么做):how to use jquery or ajax to refresh a div at 10 second intervals

但是我假设我需要一个 javascript onClick 来更改 javascript 函数中的 url,这取决于我按下哪个按钮?我会想象将 javascript 分成两个单独的函数,一个用于设置 url(移动到全局变量),另一个用于启动刷新间隔,但是我是 javascript 新手,想看看这是否是之前使用的正确方法我深入研究它的编码。我以前从未使用过 onClick。

提前感谢您的帮助!

【问题讨论】:

    标签: javascript php jquery html ajax


    【解决方案1】:

    你好,间隔部分会有类似的东西:

    http://jsfiddle.net/35Lyzbjc/

    类似的东西:

    var myVar = setInterval(function(){ myTimer() }, 1000);
    
    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("content").innerHTML = t;
    
        // you would normally put here the $.get of your PHP page
    }
    
    function myStopFunction() {
        clearInterval(myVar);
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多