Search code examples
javascriptjqueryajaxjspjquery-ui-slider

Return Jquery UI Slider From AJAX

I have two pages first one is ask.jsp and second one is get.jsp.On ask .jsp there is a button...which is when pressed get.jsp is called through ajax and i am trying to return a slider from that page ...but not able to see it ...but if i send some text message from that page it is displayed on ask.jso so how can i return a slider through second page?

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>

Demo: Plunker

Solution

  • Try to reorganize 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>

    move the script to the bottom

    Also use .load() to load the remote html to a element

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

    It looks like the problem is the script elements inserted via innerHTML will not get executed