Solved

insert Dynamic table into <Div> using javascript

Posted on 2010-11-18
15
988 Views
Last Modified: 2012-05-10
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>

0
Comment
Question by:kishan66
  • 5
  • 4
  • 4
  • +1
15 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 250 total points
ID: 34167819
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34167845
Or using plain javascript
document.getElementById('div1').innerHTML = retvalue;

Open in new window

0
 

Author Comment

by:kishan66
ID: 34168342
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34168756
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
 

Author Comment

by:kishan66
ID: 34168811
function call works fine...tested... i even variable value->perfectly fine..as expected...
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 34169042
$.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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34169222
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170062
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170075
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170079
FORM, not FROM, sorry
0
 

Author Comment

by:kishan66
ID: 34170277
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170352
innerHtml does work, so you have some other issue stopping it from working in your case.
0
 

Author Comment

by:kishan66
ID: 34170364
Hi Scrathcyboy,

if no Isuue, i would not have landed here

would welcome even alternata solutions
0
 
LVL 20

Assisted Solution

by:ddayx10
ddayx10 earned 250 total points
ID: 34170481
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
 

Author Comment

by:kishan66
ID: 34172919
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This Micro Tutorial demonstrates how to create Excel charts: column, area, line, bar, and scatter charts. Formatting tips are provided as well.

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now