从 AJAX 返回 Jquery UI 滑块答案

【问题标题】：Return Jquery UI Slider From AJAX从 AJAX 返回 Jquery UI 滑块
【发布时间】：2013-04-10 15:06:43
【问题描述】：

我有两个页面，第一个是 ask.jsp，第二个是 get.jsp。在询问 .jsp 时有一个按钮...按下 get.jsp 时会通过 ajax 调用，我试图返回一个该页面上的滑块...但看不到它...但是如果我从该页面发送一些短信，它会显示在 ask.jso 上，那么如何通过第二页返回滑块？

ask.jsp

    <%@ page language="java" contentType="text/html; charset=windows-1256"
        pageEncoding="windows-1256"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
    <script>
    function update()
    {

        var xmlhttp;    

        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
$( "#slider" ).slider();
            document.getElementById("refresh").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","get.jsp");
        xmlhttp.send();

    }
    </script>
    </head>
    <body>
    <input type="button" id="1" value="1" onClick="update();"/>

    <%
    int value=1;
    %>
    <div id="refresh">
    <%=value %>
    </div>

    </body>
    </html>

get.jsp

$(function() {
$( "#slider" ).slider();
});
</script>
<p>
heyyyyyyyyyy
</p>
<p id="slider">
</p>

演示：Plunker

【问题讨论】：

标签： javascript jquery ajax jsp jquery-ui-slider

【解决方案1】：

尝试重新组织get.php

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<p>
    heyyyyyyyyyy
</p>
<p id="slider">
</p>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

将脚本移到底部

还可以使用.load() 将远程html 加载到元素中

function update(){
    $('#refresh').load('get.jsp')
}

看起来问题是通过innerHTMLwill not get executed插入的脚本元素

【讨论】：

因为它似乎工作正常plnkr.co/edit/GqunD04ty4HqxY7m6kab?p=preview
在$( "#slider" ).slider(); 之前添加一个alert($( "#slider" ).length) 看看发生了什么
为什么不能在主文件（ask.jsp）而不是get.jsp中加载jquery和jquery-ui相关脚本
让我们continue this discussion in chat
@james 我能够在以下演示中重新创建问题plnkr.co/edit/umbhpk0imOg4JAGSIs4n?p=preview

【解决方案2】：

在您的 AJAX 调用中的成功函数中，重新调用负责显示滑块的函数。

我没有像你在代码中那样使用 AJAX，但肯定有一个成功函数

（也许你的成功部分是：

if (xmlhttp.readyState==4 && xmlhttp.status==200)) {}

)

注意：据我所知，AJAX 最好使用 jquery ajax 函数，例如：

$.ajax({
                    type: "GET",
                    url: "url.php",
                    dataType: 'html',
                    data: ({ action: 'youraction', parameters... }),
                    success: function(data){

                          $( "#slider" ).slider(); 
                          // other AJAX actions.
                    },
                    error: function(data)  
                    {  

                    }  


                });

祝你好运。

【讨论】：

负责显示滑块或那个div的函数？ $(function() { $( "#slider" ).slider(); }); 这是 jquery ui 滑块的功能

这是显示滑块
但是您的 AJAX 调用的成功部分在哪里？？？我从未使用过 xmlhttp，请检查我的编辑以了解如何在我的成功部分添加您的功能
我希望我很清楚。在您使用 AJAX 的方式中，肯定有一个地方将您的函数放置在 AJAX 调用 succeddd 的位置。在这个地方，调用 $( "#slider" ).slider();
告诉我，您的 AJAX 调用的成功部分是什么？？
if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("refresh").innerHTML=xmlhttp.responseText; }

【解决方案3】：

我认为你应该：

1 从 get.jsp 中删除所有链接标签和脚本标签。只保留必要的 HTML 标签（在您的情况下：<p id="slider"></p>）。我们当然应该在主页中调用这些库。
2 在您的 AJAX 调用中，在 AJAX 完成后返回所需的工作人员，再次调用 jquery 动作，负责显示滑块

在您的情况下，此操作是 $( "#slider" ).slider();。所以叫它在if (xmlhttp.readyState==4 && xmlhttp.status==200) 内部或者也许在xmlhttp.send(); 之后。这里的想法是重新调用它，以便您 DOM 被 AJAX 更新后触发。
3 如果所有这些解决方案都不起作用，请使用 jquery new ajax 方式，例如在我的第一个答案中描述。

【讨论】：

链接标签和脚本标签应该放在哪里？
好的，我刚刚看到它显示了几毫秒然后消失了
下面的滑块嘿，如果你继续点击那个 1 按钮，它会显示几毫秒 ..
那很好。但是现在通过编辑您的代码告诉我们您的进度。
当我删除脚本标签时，滑块来了一会儿就走了。