CODEWITHSUNDEEP
javascriptjqueryhtmlcss
M_Choudhary
M_Choudhary

Reputation: 49

how to refresh more than one div using jquery

I have a jsp page on which when i click on any image the image is changed to another.Now what i want that the effect of one user changes must be reflect to all the users at the same time who access this website without refreshing the entire page Here is my code...............

<html>
 <title>Java Web Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />

<head>
<title>Manage Objects</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
            $(document).ready(function() {
                loadbulbData();
        });
//bulbstatus
            function loadbulbData() {
                $('#main').load('index.jsp', function() 
            {
                //alert('inside refresh method');
                reloadData = window.setTimeout(loadbulbData, 20000)
            }); 
        }
</script>
</head>
<body>


<%! public static int bulbStatus = 0; 
public static int tubeStatus=0;
public static  int fanStatus=0;
public static  int acStatus=0; 

%>
  <%


%>

<%
if(request.getParameter("BULB.x")!=null)
{
   if(bulbStatus==0) 
       bulbStatus=1;
   else
       bulbStatus=0;
}

if(request.getParameter("BULBON.x")!=null)
{
   if(bulbStatus==1)
       bulbStatus=0;
   else
      bulbStatus=1;
}

if(request.getParameter("TUBEOFF.x")!=null)
{
   if(tubeStatus==0) 
       tubeStatus=1;
   else
       tubeStatus=0;
}  
if(request.getParameter("TUBEON.x")!=null)
{   
   if(tubeStatus==1) 
       tubeStatus=0;
     else
      tubeStatus=1;
}

if(request.getParameter("FanOff.x")!=null)
{
   if(fanStatus==0) 
       fanStatus=1;
  else
      fanStatus=0;
}
if(request.getParameter("FanOn.x")!=null)
{
   if(fanStatus==1) 
   fanStatus=0;
   else
       fanStatus=1;
}

if(request.getParameter("AcOff.x")!=null)
{
   if(acStatus==0) 
     acStatus=1;
   else
       acStatus=0;
}
if(request.getParameter("AcOn.x")!=null)
{
   if(acStatus==1) 
      acStatus=0;
     else
      acStatus=1;
}

%>
  <% 
     if(bulbStatus==0)
    {           
  %>
    <p><font color="white"><center><b>Manage Objects</center></b></p>
    <div id="main" name="alldivisions">
    <div id="NW" name="bulboffdiv">
    <form name="bulbForm" method="post" id="bulbonformid">  
        <input type="image" src="images/pic_bulboff.png"  align="center"    id="imagebulb" name="BULB" value="bulb"></input>
        <p><font color="RED"><b>  BULB OFF</b></p>

   </form>
    </div>  
<%
    } 
    else
    {

%> 
    <p><font color="white"><center><b>Manage Objects</center></b></p>
    <form name="bulbon" method="post">
    <div id="NW" name="bulbondiv"> 
        <input type="image" src="images/pic_bulbon.png"  align="center"     id="imagebulb" name="BULBON" value="bulb"></input>  
        <p><font color="Green"><b>  BULB ON</b></p>
    </div> 

</form>

<%
    }
    if(tubeStatus==0)
    {
   %> 
   <form  name="lampOffForm" method="post">
   <div id="NE" name="lampoffdiv">
        <input type="image" src= "images/lampoff.png" align="center"     name="TUBEOFF" value="tube" id="lampoff"></input>
        <p><font color="RED"><b>  LAMP OFF</b></p>
    </div>
    </form>
  <%  }
    else
    {
  %>
  <form name="lampOnForm" method="post">
        <div id="NE" name="lampondiv">
        <input type="image" src= "images/lampon.png" align="center" name="TUBEON" value="tube" id="lampon"></input>
        <p><font color="Green"><b>  LAMP ON</b></p>
    </div>
  </form>
  <%
    }
   if(fanStatus==0)
    {
   %>
   <form  name="fanOffForm" method="post">
        <div id="SW" name="fanoffdiv">
        <input type="image" src="images/Fanoff.png" align="center" id="image3" name="FanOff" value="ac"></input>
        <p><font color="RED"><b>  FAN OFF</b></p>
    </div> 
    </form>
   <%
    }
    else
     {
   %>
   <form name="FanOnForm" method="post">
   <div id="SW" name="fanondiv"> 
        <input type="image" src="images/Fanon.png" align="center"     id="image3" name="FanOn" value="ac"></input>
        <p><font color="Green"><b>  FAN ON</b></p>  
     </div>
</form>
 <%     
     }
     if(acStatus==0)
     {
   %>
   <form name="Acoffform" method="Post">
        <div id="SE" name="acoffdiv"> 
       <input type="image" src="images/ACoff.png" align="center"  id="image4" name="AcOff" value="fan"></input>
        <p><font color="RED"><b>  AC OFF</b></p>
     </div>
  </form>
    <%
    }
    else
    {
    %>
<form name="AcOnForm" method="Post">
    <div id="SE" name="acondiv"> 
        <input type="image" src="images/ACon.png" align="center"    id="image4" name="AcOn" value="fan"></input>
        <p><font color="Green"><b>  AC ON</b></p> 
    </div>
   </form>

<%
    }
%>
 </div>
</body>
</html>

Thanks in advance......

Upvotes: 1

Views: 80

Answers (3)

M_Choudhary
M_Choudhary

Reputation: 49

Hey i solve the problem just adding the following in my jquery code

    $('#main').load('index.jsp', function() #main)

Upvotes: 0

Sumit Pandey
Sumit Pandey

Reputation: 448

I think you just need to call a function for refreshed data without refreshing. If that's true. Then you can use jquery ajax to fetch updated data and poll it after some amount of time

For ex:

setTimeout(function(){
     $.ajax({
             url: "demo_test.txt", //url for fetching refreshed data 
             success: function(result){
                  // write your refresh image code here
             }           
    });
}, 5000); //specify the time interval after which you need to refresh the data(this is 5 secs)

Upvotes: 1

G.H
G.H

Reputation: 317

You'll need to implement some kind of server polling - this article gives a good example http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery/ using jquery - and it might point you in the right direction. (this is essentially demonstrating a Server Push method)

Upvotes: 1

Related Questions