Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1006
  • Last Modified:

Populating Div without reload

hi
i am developing a struts based application with jsp as frontend .
i want to populate a div with table of database values i.e 5 columns per row.
this i want to do without a page refresh.my req is such when user clicks on a link a div is shown with a table,for this on click i want to retrieve values from DB.i don't want the page to be reloaded.

how the same can be done. please help with some code.this is very urgent
0
manojvashisht
Asked:
manojvashisht
  • 3
  • 2
  • 2
  • +2
7 Solutions
 
CEHJCommented:
0
 
objectsCommented:
use ajax

heres an example
http://ajaxpatterns.org/Periodic_Refresh
u would refresh on a click instead of periodically

0
 
striker46Commented:
I have written an article:

http://www.aleixcortadellas.com/main/?p=364

Just make the page to be retrieved be a PHP query to the MySQL database. I've implemented it exactly this way and it works perfectly in a site I recently made.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
manojvashishtAuthor Commented:
hi
the values are not be refreshed ,that is div is hidden at the first time and the moment user clicks the link it calls a struts action and retrieves db values.
now the problem is that how the response i.e suppose 100 records are to be shown on the jsp div.
i dont know how to make xml/html output.
please help with some sample code
0
 
striker46Commented:
From my site, sample code.

This is the PHP retrieved by AJAX with the query. Note it makes a loop to output each row found and format it with the HTML tags for table cells, etc.




<h2>Consulta de membres</h2>
<br />
<div align="center">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
    <tr>
      <td width="5%">N&uacute;m.</td>
      <td width="15%">&#192;lies</td>
      <td width="31%">Nom</td>
      <td width="6%">Edat</td>
      <td width="18%">Ciutat</td>
      <td width="26%">E-mail</td>
    </tr>
    
<?php
 
 
$result = func_mysqlSelectFrom('id, numero_soci, alies, nom, cognom1, cognom2, datanaixement, ciutat, email',
							   'socis');
 
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
 
echo '<tr>' .
     '<td width="5%">' . $row['numero_soci'] . '</td>' .
     '<td width="15%"><a href="javascript: func_veurePerfil('.$row['numero_soci'].')">' . $row['alies']. '</a></td>' .
     '<td width="31%">' . $row['cognom1'] . ' ' . $row['cognom2'] . ', ' . $row['nom'] . '</td>' .
     '<td width="6%">' . calcularEdat($row['datanaixement']) . '</td>' .
     '<td width="18%">' . $row['ciutat'] . '</td>' .
     '<td width="26%">' . $row['email'] . '</td>' .
     '</tr>';
     
}
 
?>
 
  </table>
</div>

Open in new window

0
 
manojvashishtAuthor Commented:
friend i am not using php for frontend,instead i am using jsp.

i have to do all the processing at java class level not at front end.

suggest how the data can be populated in jsp
0
 
Jim CakalicSenior Developer/ArchitectCommented:
This article describes in-depth a minimally intrusive approach that I think will work for you:
http://www.firstpartners.net/whitepapers/Sprinkle_some_Ajax_Magic_into_your_Struts_application.pdf

Regards,
Jim
0
 
objectsCommented:
> i have to do all the processing at java class level not at front end.

the refresh needs to be done on the client side using javascript/ajax
so your jsp's need to generate the appropriate javascript to perform the update
0
 
manojvashishtAuthor Commented:
hi my code is attached below,

the problem i am facing is that when i click on the img icon the div is not coming properly,there is no color difference and the clear button is not shown.

where as when i acess the same div on click of fade now button it shows the clear button.

basically i want to show the div as highlighted and grey out the remaining area on screen on click at image icon. the div has to be filled with response text.

please look at code below and tell where i am making the mistake
 <script>
 
 function disableAllFields(){
	for (j=0 ; j < document.forms.length ; ++j) 
		{
		  for (i=0 ; i < document.forms[j].elements.length ; ++i) 
		  {
		 
			  if((document.forms[j].elements[i].type == "text") ){
				  var nm = document.forms[j].elements[i].name;
					
					document.forms[j].elements[i].readOnly=true;
				  
 
			  }else
			  if ((document.forms[j].elements[i].type == "text")||(document.forms[j].elements[i].type == "radio") || (document.forms[j].elements[i].type == "select-multiple") || (document.forms[j].elements[i].type == "select-one") || (document.forms[j].elements[i].type == "checkbox")|| (document.forms[j].elements[i].type == "textarea"))  
			  document.forms[j].elements[i].zIndex=-100;
			  document.forms[j].elements[i].disabled = true;
			   document.forms[j].elements[i].disabled = true;
			  document.forms[j].style.visibility="hidden";
		  }
		}
	return;
}
 
function enableAllFields(){
	for (j=0 ; j < document.forms.length ; ++j) 
		{
		  for (i=0 ; i < document.forms[j].elements.length ; ++i) 
		  {
		 
			  if((document.forms[j].elements[i].type == "text") ){
				  var nm = document.forms[j].elements[i].name;
					
					document.forms[j].elements[i].readOnly= false;
				  
 
			  }else
			  if (	(document.forms[j].elements[i].type == "radio") || 
			  		(document.forms[j].elements[i].type == "select-multiple") || 
			  		(document.forms[j].elements[i].type == "select-one") || 
			  		(document.forms[j].elements[i].type == "checkbox")|| 
			  		(document.forms[j].elements[i].type == "textarea") ||
			  		(document.forms[j].elements[i].type == "text"))  
			  document.forms[j].elements[i].disabled = false;
			  document.forms[j].style.visibility="visible";
		  }//for i
		}//for j
	return;
}
 var vis=1;
function cover() 
{  
 
	var cover=document.getElementById('cover');
 
	if(vis)
	{
		vis=0;
		cover.style.display='block';      
	} 
	else 
	{   
		vis=1;
		cover.style.display='none'; 
	}
 
}
 
 
if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
        try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
        throw new Error( "This browser does not support XMLHttpRequest." )
};
 
window.onload = function() {
 // alert("inside onload function");
        // updates every 2.5 seconds
        var msBeforeUpdate = 10000;
        setInterval("checkMe()", msBeforeUpdate);
 
}
 
 function checkMe() {
 // alert("inside check me");
        var request =  new XMLHttpRequest();
        var params = "recordIcon=" + recordIcon.src;
   
    serverUrl = encodeURI(serverUrl + "?" + params);
        
        var serverUrl = "<%=request.getContextPath()%>" + "/NotifyAction.do";
        serverUrl = encodeURI(serverUrl + "?" + params);
        // alert("server url"+serverUrl);
        request.onreadystatechange = function() {
                if(request.readyState == 4 ) {
 
                        // toggles based on returned value
                        //toggleIcon(parseInt(request.responseText) > 0);
                        var res = request.responseText.replace(/(^\s+|\s+$)/g,'');
                        var target ="<valid>true</valid>";
                        
                       //  alert("%%%%%%%%%%%%%%"+request.responseText);
                        if(res== target)
                        {
                                toggleIcon(true);
                                }
                        else 
                        {
                        toggleIcon(false);
                        }
                }
        };
       //  alert("outside servlet call");
        request.open("GET", serverUrl);
        request.send(null);
 
}
 
 function ShowAlerts() {
 // alert("inside check me");
        var request =  new XMLHttpRequest();
        var params = "time";
   
   
   
  
        
        var serverUrl = "<%=request.getContextPath()%>" + "/NotificationListAction.do";
        serverUrl = encodeURI(serverUrl + "?" + params);
        // alert("server url"+serverUrl);
        request.onreadystatechange = function() {
                if(request.readyState == 4 ) {
 					var divData = request.responseText;
 					 alert("%%%%%%%%%%%%%%%%%%%%%"+divData);
                        // toggles based on returned value
                        //toggleIcon(parseInt(request.responseText) > 0);
                        var res = request.responseText.replace(/(^\s+|\s+$)/g,'');
                        var cover=document.getElementById('cover');
                        document.getElementById("cover").innerHTML = request.responseText;   
                        document.getElementById('cover').style.display='block';
                        
                       //  alert("%%%%%%%%%%%%%%"+request.responseText);
                      
                }
        };
       //  alert("outside servlet call");
        request.open("GET", serverUrl);
        request.send(null);
 
}
 
 
 
 
function showRecords() {
 var alertWin = "<%=request.getContextPath()%>" + "/inc/Notification.jsp";
//  alert("##########"+alertWin);
        if(window.showModalDialog) {
                window.showModalDialog(alertWin, "records",
                "dialogWidth: 600px; dialogHeight: 400px");
        } else {
                window.open(alertWin, "records","height=600,width=400,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes");
        }
 
} 
 
function toggleIcon(stat) {
 
        var recordIcon = document.getElementById("recordIcon");
 
        if(stat) recordIcon.src = "img/new.png";
        else recordIcon.src = "img/no_new.png";
 
}
 
</script>
 
 
 </head>
 
 
  
<img id="recordIcon" src="img/no_new.png" onClick="ShowAlerts()" />  
 
  <input type="button" onclick="javascript:disableAllFields();cover();" value="fade now" />
 
<div id="cover">
 
	<div id="warning">
	Mantas Alerts
	<p align="center">
	<input type="button" onclick="javascript:enableAllFields();cover();" value="clear" /> 
	
	</p>
	</div>
<input type="button" onclick="javascript:enableAllFields();cover();" value="clear" /> 
</div>
  
  </html>

Open in new window

0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now