Dynamically adding html to a page

**Joe Fawcett** · Jul 23 '05, 07:54 PM

Re: Dynamically adding html to a page

"cjm" <cjmnews04@remo veme.yahoo.co.u k> wrote in message
news:4289da39_1 @x-privat.org...[color=blue]
>I have two problems that I suspect will be bread-and-butter problems for the
>more experienced guys on here, but I'm not the greatest with js.
>
> NB: Code snippets at the bottom
>
> The first problem is that after a bit of fiddling I'm getting am 'Object
> Expected' error when I click on the Depot dropdown which I can't seem to get
> round. The code I had was working OK but then I cut it all out, tidied it all
> up, and put it back in and now it doesnt work.
>
> The second problem is a 'How do I...'. I'm using an XML data island to
> retrieve some data without submitting the form. In the first example, when the
> user selects a Customer, the Depot list is updated with all the depots for
> that customer; This all works fine. What I want to do now is retrieve some
> more data when the Depot is selected.
>
> I have the XML bits working; the js code snippet correctly output a series of
> msgboxes with the correct value in (or at least it did until I introduced the
> Object Expect error!).
>
> However, I'm unsure as to how to display this information on the page. The XML
> contains a series of Part No's and Quantities, which I'd like to display in a
> table towards the bottom of the screen. The problem is that I don't know how
> to dynamically create and populate this table.
>
> The only caveat is that I dont want to show the table if no values are
> returned from the query.
>
> Any suggestions?
>
> Thanks in advance...
>
> Chris
>[/color]

One of the problems could be caused because to load the data island you use
XMLID.SRC when it should be XMLID.src.
It would help if you showed which line the error was on, IE usually uses a zero
based error line number so you'll need to add one to get the real line. Can't
you step through in the script debugger?

--

Joe (MVP)

https://mvp.support.microsoft.com/profile=8AA9D5F5-E1C2-44C7-BCE8-8741D22D17A5

**cjm** · Jul 23 '05, 07:54 PM

Re: Dynamically adding html to a page

"Joe Fawcett" <joefawcett@new sgroups.nospam> wrote in message
news:%23$UXXJEX FHA.3712@TK2MSF TNGP09.phx.gbl. ..[color=blue]
>
>
> One of the problems could be caused because to load the data island you
> use XMLID.SRC when it should be XMLID.src.
> It would help if you showed which line the error was on, IE usually uses a
> zero based error line number so you'll need to add one to get the real
> line. Can't you step through in the script debugger?
>
>
> --
>
> Joe (MVP)
>
> https://mvp.support.microsoft.com/pr...8-8741D22D17A5
>
>[/color]

Sorry Joe, I meant to update this thread. The object required problems is no
longer a problem - it was due to a silly error.

However, I'm still looking for suggestions on the best way to acheive the
dynamic table creation....

Chris

**Bob Barrows [MVP]** · Jul 23 '05, 07:54 PM

Re: Dynamically adding html to a page

cjm wrote:[color=blue]
>
> However, I'm unsure as to how to display this information on the
> page. The XML contains a series of Part No's and Quantities, which
> I'd like to display in a table towards the bottom of the screen. The
> problem is that I don't know how to dynamically create and populate
> this table.[/color]
You have several options:

IE-only: You can bind a table to the data island. Search for data binding at
msdn.microsoft. com/library. Basically, you use the xml data island's
ondatasetcomple te event to set the table's datasource property to the id of
the island. Here is an example:
http://www.davidpenton.com/testsite/...ta.islands.asp. It uses a
button-click event, but you shuld be able to modify it to use the data
island's ondatasetcomple te event.

You can dynamically create a table, either by concatenating the html, or by
using the DOM methods. See here:

Javascript - Benchmark - W3C DOM vs. innerHTML

http://www.quirksmode.org/dom/innerhtml.html

Bob Barrows

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"

**cjm** · Jul 23 '05, 07:56 PM

Re: Dynamically adding html to a page

Here's the solution I came up with (if anyone else is interested):

I created a table (id='OwnedTable ') with only an empty tbody
(id='OwnedBody' ) element inside and had it set to display:none (via CSS).

I then used the following code to populate and show/hide the table:

function checkCustOwned( DepotID) {
var currNode;
XMLID.async = false;

// Change Ddata Island source
strQuery = "Exec Orders_CheckFor CustOwned " + DepotID;
XMLID.SRC="/fxdb/common/xmlQuery.asp?st rQuery=" + strQuery;

// Get all "names" from XML data
objPartNo = XMLID.getElemen tsByTagName("Pa rtNo");
objOrderID= XMLID.getElemen tsByTagName("Or derID");

if (objPartNo.leng th > 0)
{
// prepare references to document tree objects for later
var mytable = document.getEle mentById("Owned Table");
var mytbody = document.getEle mentById("Owned Body");

// generate new node to be assembled in memory
var myNewtbody = document.create Element("tbody" );
myNewtbody.id = "OwnedBody" ;

// generate fragment container for tbody assembly
var docFragment = document.create DocumentFragmen t();
var trElem, tdElem;

for (var i=0; i < objPartNo.lengt h; i++) {

trElem = document.create Element("tr");
trElem.classNam e = "row" + i;

tdElem = document.create Element("td");
tdElem.classNam e = "col1";
tdElem.innerHTM L = objPartNo.item( i).text;
trElem.appendCh ild(tdElem);

tdElem = document.create Element("td");
tdElem.classNam e = "col2";

tdElem.innerHTM L = objOrderID.item (i).text;
trElem.appendCh ild(tdElem);

docFragment.app endChild(trElem );
}

myNewtbody.appe ndChild(docFrag ment);

//replace previous tbody with new tbody
mytable.replace Child(myNewtbod y, mytbody);

mytable.style.d isplay = 'block';
}
else
{
var mytable = document.getEle mentById("Owned Table");
mytable.style.d isplay = 'none';
}

}

Thanks to those who endeavoured to help.

Chris

Dynamically adding html to a page

Dynamically adding html to a page

Comment

Comment

Comment

Comment