innerHTML problem

Hi All,

I am using Struts 2 with jquery. It has one div element as which is used to insert a page reportgrid:
<div id=“abc”>

  &lt;sj:div id='main1' href='%{reportgrid}'&gt;&lt;/sj:div&gt;
  &lt;/div&gt;

No on certain selection i want to refresh div (abc). For this I have created a button whose onclick I call a javascript where I have written following:
function setVal()
{
alert(‘Hi’);
var aDiv = document.getElementById(‘abc’);
aDiv.innerHTML=“Hi<sj:div id=‘main1’ href=‘%{reportgrid}’></sj:div>”;
}

This does not work. According to me since it has special characters. Please let me know what can I do to make it work.

Thanks,
Vikash Anand.

There is no div=“abc” or div=“main1” in the generated HTML and so there is no way for any JavaScript to interact with those tags. The problem must therefore be in the server side code generating the HTML since it isn’t generating the HTML that the JavaScript is trying to interact with. JavaScript can’t update the innerHTML of a div that isn’t in the web page.

I suggest you ask again in the Java/JSP forum where you can ask why those div tags are not being created by the JSP. Presumably the JavaScript will work if you can get the JSP to generate the HTML it is to interact with.

Hi,

The resultant HTML code for that DIV is:
<sj:div id=“main1” href=“%%7Breportgrid%7D”></sj:div>

I am using firebug on Firefox but still unable to get whole HTML. I have selcted the are and above HTML code is resultant code for innerHTML replacement.

Whole page source is:

<?xml version="1.0" encoding="utf-8"?>

 








<html> 
<head>  

    <meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="struts2,jquery, hibernate, plugin,showcase, grid" />
	<meta http-equiv="description" content="Showcase for jQuery Plugin and Full Hibernate Struts2 Plugins" />
	<link href="styles/layout.css" rel="stylesheet" type="text/css" />

   <title>NTrack</title>
   
    <link href="/NTrack1/css/main.css" rel="stylesheet"
          type="text/css"/>


  <script type="text/javascript" src="/NTrack1/struts/js/base/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="/NTrack1/struts/js/base/jquery-ui-1.7.2.js"></script>

  <script type="text/javascript" src="/NTrack1/struts/js/plugins/jquery.form.js"></script>

  <script type="text/javascript" src="/NTrack1/struts/js/plugins/jquery.subscribe.1.1.js"></script>
  <script type="text/javascript" src="/NTrack1/struts/js/base/jquery.cookie.js"></script>
  <script type="text/javascript" src="/NTrack1/struts/js/base/jquery.bgiframe.js"></script>
        <link rel="stylesheet" href="/NTrack1/themes/showcase/ui.theme.css" type="text/css"/>
  <script type="text/javascript" src="/NTrack1/struts/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
  <script type="text/javascript" src="/NTrack1/struts/js/plugins/jquery.jqGrid.js"></script>

  <link rel="stylesheet" href="/NTrack1/struts/themes/ui.jqgrid.css" type="text/css"/>
  <script type="text/javascript" src="/NTrack1/struts/js/struts2/jquery.struts2.js"></script>
<script type="text/javascript">
	var ajaxhistory=false;
$(document).ready(function () {

	$.ajaxSetup ({
		cache: false
	});
});
</script>


      
</head>  


<body> 
  <div class="page_margins">
    <div class="page">
      <div id="header" class="ui-widget-header">

        <div id="headline">
	        <h1 class="ui-state-default" style="background: none; border: none;width: 700px">Welcome to NTrack Application</h1>
        </div>
      </div>
      <div id="nav">
        <div class="hlist ui-widget-header">
          <ul>
          
            <li class="ui-widget-header  ui-state-active"><a id="seleclink">Reports</a>

<script type='text/javascript'>
$(document).ready(function () { 
	var options_seleclink = {};
	options_seleclink.jqueryaction = "anchor";
	options_seleclink.id = "seleclink";

	options_seleclink.targets = "main";
	options_seleclink.href = "#";

$.struts2_jquery.bind($('#seleclink'),options_seleclink);

 });  
</script></li>
            <li class="ui-widget-header"><a id="gridlink" href="#">Grid (Editable)</a>
<script type='text/javascript'>
$(document).ready(function () { 
	var options_gridlink = {};
	options_gridlink.jqueryaction = "anchor";
	options_gridlink.id = "gridlink";

	options_gridlink.targets = "main";
	options_gridlink.href = "/NTrack1/Selec.action";

$.struts2_jquery.bind($('#gridlink'),options_gridlink);

 });  
</script></li>
            
            
            <li class="ui-widget-header"><a id="gridsubgridlink" href="#">Settings</a>
<script type='text/javascript'>
$(document).ready(function () { 
	var options_gridsubgridlink = {};
	options_gridsubgridlink.jqueryaction = "anchor";
	options_gridsubgridlink.id = "gridsubgridlink";

	options_gridsubgridlink.targets = "main";
	options_gridsubgridlink.href = "/NTrack1/grid-subgrid.action";

$.struts2_jquery.bind($('#gridsubgridlink'),options_gridsubgridlink);

 });  
</script></li>
            <li class="ui-widget-header"><a id="logout" href="#">Logout</a>
<script type='text/javascript'>
$(document).ready(function () { 
	var options_logout = {};
	options_logout.jqueryaction = "anchor";
	options_logout.id = "logout";

	options_logout.href = "/NTrack1/logout.action";

$.struts2_jquery.bind($('#logout'),options_logout);

 });  
</script></li>

          </ul>
        </div>
      </div>
         
    
    
    
    
    <div
                   id="main"         
    
    
    
    >
        
      </div><script type='text/javascript'>
$(document).ready(function () { 
	var options_main = {};
	options_main.jqueryaction = "container";
	options_main.id = "main";

	options_main.href = "#";

$.struts2_jquery.bind($('#main'),options_main);

 });  
</script>

      <!-- begin: #footer -->
       <div id="footer">

        Copyright Novire Technologies Pvt. Ltd.<br/>
      </div>
    </div>
  </div>
</body>  



</html>  

I am unable to fine resultant HTML for my required DIV element.

That is garbage if it is what is meant to be HTML as an HTML tag should have <div … without the sj\: in front. So the problem is with whatever isn’t removing those characters when it generates the HTML.

I am posting my whole file, It is in JSP


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> 
    <s:url id="reportgrid" action="report"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Insert title here</title>
<script type="text/javascript">
function setVal()
{
	
	var a = "<sj\\:div id=\\'main1\\' href=\\'&#37;&#123;reportgrid&#125;\\'></sj\\:div>";
	
	var abcDiv = document.getElementById("abc");
	
	abcDiv.innerHTML = z;
}
</script>
</head>
<body>

   
    <button onclick="setVal();" type="button">click</button>
   
    <div id="abc">
    hi &#123;
      <sj:div id='main1' href='%{reportgrid}'></sj:div>
      </div>
     
</body>
</html>

Since the website does replace the HTML symbols please read following line:
var a = “<sj\:div id=\‘main1\’ href=\‘%{reportgrid}\’></sj\:div>”;

as
var a = “<sj\:div id=\‘main1\’ href=\‘& # 3 7 ; & # 1 2 3 ;reportgrid & # 1 2 5 ;\’></sj\:div>”;

I have added spaces for HTML codes.

Please help me out. My architecture is in trouble due to this small thing

I think this website is not allowing me to put HTML code for special characters.

I will use space.

HTML code that I am using for % is “& # 3 7 ;”
HTML code that I am using for { is “& # 1 2 3;”
HTML code that I am using for } is “& # 1 2 5 ;”

Thanks,
Vikash Anand.

yes…the resultant HTML code is:
<sj:div id=“main1” href=“%%7Breportgrid%7D”></sj:div>

Expected Code:
<sj:div id=“main1” href=“%{reportgrid}”></sj:div>

The problem is with replacement of { and }

The code that I am using in innerHTML is:
<sj\:div id=\‘main1\’ href=\‘%{reportgrid}\’></sj\:div>

HTML code for % is % which is working fine.
HTML code for { and } is { and } respectively which is not translated.
Printed { and } on HTML and I can see { and } on normal HTML resultant page but not working from inside Javascript innerHTML code.

Please let me know where I am making mistake or suggest some different solution.

Thanks and Regards,
Vikash Anand.

Display the page in a web browser and then use “View Source” to view the generated HTML. Then you will be able to tell if the problem is on the server or in the JavaScript. Until you determine which of the two has the problem there isn’t much point in anyone else looking at it as there are too many places the error could be.

When asking questions about JavaScript you should post the HTML the way it looks in the browser and not the source code on the server that generates the HTML.

Have you tried looking at the HTML that is being generated as that is what the JavaScript will be interacting with. Looking at the original server side source code makes it impossible to tell whether the problem is in the JavaScript or on the server.

I tried:
var a = “Hi1<sj\:div id=\‘main1\’ href=\‘%{reportgrid}\’></sj\:div>”;
var abcDiv = document.getElementById(“abc”);
alert(a);
//abcDiv.innerHTML = ‘’;
abcDiv.innerHTML = a;

% gets replaced with %…no replacement for { and }

Where am i making mistake?

I tried by using:

aDiv.innerHTML = “hi1<sj\:div id=\‘main1\’ href=\‘%{reportgrid}\’></sj\:div>”;

nut if I see result on JSP by i get on seeing resultant HTML source:
<sj:div id=“main1” href=“%%7Breportgrid%7D”></sj:div>

%, { and } were replaced.

Let me know how to handle that.