CODEWITHSUNDEEP
javascriptjqueryajaxjspjquery-ui-slider
Mushahid Hussain
Mushahid Hussain

Reputation: 4055

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

Upvotes: 0

Views: 1395

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Adib Aroui
Adib Aroui

Reputation: 5067

I think you should:

  • 1 remove all your link tags and script tags from get.jsp. Keep only necessary HTML tags (in your case : <p id="slider"></p>). Our of course you should call these libraries in your main page.

  • 2 In your AJAX call, after the AJAX finished returning the required staf, re-call again the jquery action responsable of displaying the slider

    in your case, this action is $( "#slider" ).slider();. so call it inside of if (xmlhttp.readyState==4 && xmlhttp.status==200) or maybe after xmlhttp.send();. The idea here is to re-call it so that you trigger it after the DOM is updated by AJAX.

  • 3 If all these solutions dont work, use the jquery new ajax way like described in my first answer.

Upvotes: 1

Adib Aroui
Adib Aroui

Reputation: 5067

In your success function inside your AJAX call, re-call the function responsabile of displaying the slider.

I don't use AJAX the way you do in your code, but certainly, there is a success function there

(maybe your success part is : 

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

)

Note: As I know, AJAX is better by using the jquery ajax function like:

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

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

                    }  


                });

Good luck.

Upvotes: 1

Related Questions