javascript - 从 AJAX 返回 Jquery UI slider

标签 javascript jquery ajax jsp jquery-ui-slider

我有两个页面,第一个是ask.jsp,第二个是get.jsp。在ask.jsp上有一个按钮...按下时get.jsp通过ajax调用,我试图返回一个来自该页面的 slider ...但无法看到它...但是如果我从该页面发送一些文本消息,它会显示在ask.jso上,那么我如何通过第二页返回 slider ?

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

最佳答案

尝试重新组织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')
}

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

关于javascript - 从 AJAX 返回 Jquery UI slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15929633/

相关文章:

javascript - 我的网页无法通过 JSON 请求运行

migration - 为什么我收到错误 : "Attempted to unrender a fragment that was not rendered" when migrating from ractive. js 0.3.9 到 0.5.5

Javascript 计数选中的复选框

javascript - 如何使用jquery中的选择框将页面内容加载到div?

javascript - jQuery:使用children()比使用子选择器更有效

java - 将系列数据从 Java 传递到多 Y 轴 Highcharts

javascript - 如何正确设置浏览器创建的桌面通知的无限超时

javascript - 如何增加 Javascript 中的最大调用堆栈?

Javascript 路由正则表达式脚本

javascript - ajax成功但PHP文件无法运行