insert Dynamic table into <Div> using javascript

Hi,

I have a javascript variable with table and  table values stored in it.
want to insert the table from the variable inside <Div name="div1" id="div1"> ... </Div> using javascript.

ex:-  retvalue->  is javascript variable

retvalue = " <table><tr><td>one</td></tr/<table> "

after the insert ......<Div> show look like this..
<html>
<form name="frm1" >
<Div name="div1" id="div1">
<table> <tr><td>...</td></tr></table>
</Div>
</form>
</html>

kishan66Asked:
Who is Participating?
 
DesignbyonyxConnect With a Mentor Commented:
Use jQuery to make things easy
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery(function($) {
  // You must load the table somehow and assign it to retvalue
  var retvalue = " <table><tr><td>one</td></tr/<table> ";
  $(retvalue).appendTo('#div1');
});

</script>

Open in new window

0
 
DesignbyonyxCommented:
Or using plain javascript
document.getElementById('div1').innerHTML = retvalue;

Open in new window

0
 
kishan66Author Commented:
hi Designbyonyx,

innerHtml doesn't work .
FYI, i'm using FireFox.

JQuery looks intresting...but i have ZERO knowledge in that...

i would appreciate if u can tell me how to call the above function from my javascript function....
my JavaScript function.....(using Ajax -- grabbing the return value)

function stateChanged()
{
    if (xmlhttp.readyState == 4)
        {
          var responsestr = xmlhttp.responseText;            
              OnInsert(responsestr);  // responsestr ->has the value which i have to append/add to Div
                
        }
}

function OnInsert(retvalue)
{                   
      document.getElementById('div1').innerHTML = retvalue;  // it doesnt work
}


0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
DesignbyonyxCommented:
That should work.  Can you try doing alerts to make sure the function is getting called correctly.  You should get 2 alert popups.
function stateChanged()
{
    if (xmlhttp.readyState == 4)
        {
          alert('Ready State = 4');
          var responsestr = xmlhttp.responseText;            
              OnInsert(responsestr);  // responsestr ->has the value which i have to append/add to Div
                
        }
}

function OnInsert(retvalue)
{
     alert('OnInsert was called.  Attempting to insert html: ' + retvalue);
      document.getElementById('div1').innerHTML = retvalue;  // it doesnt work
}

Open in new window

0
 
kishan66Author Commented:
function call works fine...tested... i even variable value->perfectly fine..as expected...
0
 
ddayx10Commented:
$.02...

It depends on what the ajax return value is. When you say append are you:
a) Trying to insert an entire <table></table> as a string into the <div> in quesiton OR
b) Your ajax is returning just a table cell <td>SomeData</td> that you want to append to an existing table in the <div> OR
c) Something else

The code given would work for some scenarios, but not all. Please be more clear about what you are returing from ajax and where you intend it to be placed.
0
 
DesignbyonyxCommented:
Don't really know what else to tell you.  @ddayx10 makes good points... is your ajax returning text/html?  Using the last code snippet I gave you, the second alert should read:

OnInsert was called.  Attempting to insert html: <table><tr><td>one</td></tr/<table>

Also, your MIME type for the ajax call must be set as text/html.  Can you post your code for your ajax.
0
 
scrathcyboyCommented:
Javascript --

var tableString = '<table><tr><td>hello</td></tr></table>';

 document.getElementById('div1').innerHTML = tableString;

Note, you need something in the DIV to replace with the tableString innerHTML, else it might throw error.
0
 
scrathcyboyCommented:
The other problem is you have a FROM, then a DIV inside, then a TABLE inside that.  If the table does not have to be part of the FORM input, then put it OUTSIDE the FORM boundaries.  Only if you are adding an input field or some changeable data field that MUST be part of the form, should it be inside the form.
0
 
scrathcyboyCommented:
FORM, not FROM, sorry
0
 
kishan66Author Commented:
Hi guys,

Ajax returns a value which conatins the whole table includeing "<table>..</table>".

if i copy the return value and just place it in a separate .htm  file(for test purpose) and open with browser ..it show the whole table as needed.

innerHTML doesnt work though i have placed some text inside Div.

0
 
scrathcyboyCommented:
innerHtml does work, so you have some other issue stopping it from working in your case.
0
 
kishan66Author Commented:
Hi Scrathcyboy,

if no Isuue, i would not have landed here

would welcome even alternata solutions
0
 
ddayx10Connect With a Mentor Commented:
Pretty interresting. It's got to be a mis-communication of some sort through this testing process.

So if you put the alerts in as Designbyonyx suggested earlier you get 2 seperate alerts. The first showing "Ready State 4" the 2nd showing the <table> html?

If that is YES then you should be getting the table put into your div1 element unless something strange is happening. There must have been some miscommunication between the beginning of this post and here. The devil is in the details.

Maybe the page is reloading. What is calling the function stateChanged? Maybe the document.getElementById('div1') is failing to find the element because of some html markup issue or syntax error in the markup or the JS. Maybe there is a JS error somewhere that is stopping the works up. Do you have any indications of a JS error?

Probably we should step back and go over again. Below is a full .htm page with the elements you describe in your initial post plus the JS events you mention above. I have faked out the xmlhttp object to mimic an ajax return. If you run this stand-alone you will see that the code is sound. If we can find what is different in your code we will have the answer.

It would also be helpful for you to try to post as much of your code as possible for review (html markup, JS as used, etc).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax Test</title>
    <script type="text/javascript">
    
		var xmlhttp = new Object();
		xmlhttp.readyState = 4;
		xmlhttp.responseText = '<table><tr><td>Test Table Data</td></tr></table>';
		
    
		function stateChanged()
		{
			if (xmlhttp.readyState == 4)
				{
				  var responsestr = xmlhttp.responseText;            
					  OnInsert(responsestr);
		                
				}
		}

		function OnInsert(retvalue)
		{                   
			  document.getElementById('div1').innerHTML = retvalue;
		}
    </script>
</head>
<body onload="stateChanged();">
	<form id="form1">
	<div name="div1" id="div1">
		<table><td>...</td></tr></table>
	</div>
	</form>
</body>
</html>

Open in new window

0
 
kishan66Author Commented:
Belive it OR Not ... it worked.....with eyebrows raised
would be surprised if u know the reason.

there is no reason actually, sounds weird, but true. I quit all the applications and relaunched them...boom..it worked . could be some cache issue...(not sure)..

Thanks to one and all especially.... "ddayx10 & Designbyonyx"
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.