从AJAX返回Jquery UI滑块

Return Jquery UI Slider From AJAX

本文关键字：UI 滑块 Jquery 返回 AJAX      更新时间：2023-09-26

我有两个页面，第一个是ask.jsp，第二个是get.jsp。在ask.jsp上有一个按钮…这是当按下get.jsp通过ajax调用，我试图从该页面返回滑块…但是看不见……但是如果我从那个页面发送一些短信，它就会显示在ask上。那么我如何通过第二页返回滑块呢?

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>

演示:恰好

尝试重新组织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插入的脚本元素不会被执行

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

我不像你在代码中那样使用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)  
                    {  
                    }  

                });

好运。

我认为你应该:

  • 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新的ajax方式像

相关文章：