Dynamically adding html to a page

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

CODE SNIPPETS

checkowned.js:

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

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

// Get all "names" from XML data
objPartNos = XMLID.getElementsByTagName("PartNo");
objNumFilters= XMLID.getElementsByTagName("NumFilters");

if objPartNos.length > 0
{
for (var i=0; i < objPartNos.length; i++) {
alert(objPartNos.item(i).text);
alert(objNumFilters.item(i).text);
}
}
}

neworder.asp:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>FXDB: Create New Order</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/fxdb/FXDB.css">
<script type="text/javascript" src="/fxdb/menu.js"></script>
<script language="javascript" src="/fxdb/common/validation.js"></script>
<script language="javascript" src="/fxdb/common/checkowned.js"></script>
<script language="javascript" src="/fxdb/common/custlist.js"></script>
<script language="JavaScript" src="/fxdb/common/calendar1.js"></script>
</head>
<body>


<XML ID="XMLID"></XML>

<div id="content">
<h1>Filter Exchange Database</h1>
<h2>Maintain Orders</h2>

<h4>Create New Order:</h4>
..
..
[snipped for clarity]
..
..

<form method="post" id="fProcess" name="fProcess" action="neworder.asp">
<table class="form">
<col class="field">
<col class="value">
<tbody>
<tr>
<td>Customer:</td>
<td>
<select id="CustomerID" NAME="CustomerID"
onfocus="javascript:populateCombo(fProcess.Custome rID.value)"
onChange="javascript:populateCombo(fProcess.Custom erID.value)"
selcontrol="true" mandatory="true" alt="Customer">

</select>
</td>
</tr>
<tr>
<td>Depot:</td>
<td>
<select name="depot" id="depot" size="1" selcontrol="true"
mandatory="true" alt="Depot"
onchange="javascript:checkCustOwned(fProcess.depot .value)">
<option value="" selected ><Select Depot></option>
</select>
</td>
</tr>
<tr>
..
..
[snipped for clarity]
..
..

</html>

--
cjmnews04@REMOVEMEyahoo.co.uk
[remove the obvious bits]

"cjm" <cjmnews04@removeme.yahoo.co.uk> 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/pr...8-8741D22D17A5

"Joe Fawcett" <joefawcett@newsgroups.nospam> wrote in message
news:%23$UXXJEXFHA.3712@TK2MSFTNGP09.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

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
ondatasetcomplete 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 ondatasetcomplete event.

You can dynamically create a table, either by concatenating the html, or by
using the DOM methods. See here:
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"

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_CheckForCustOwned " + DepotID;
XMLID.SRC="/fxdb/common/xmlQuery.asp?strQuery=" + strQuery;

// Get all "names" from XML data
objPartNo = XMLID.getElementsByTagName("PartNo");
objOrderID= XMLID.getElementsByTagName("OrderID");

if (objPartNo.length > 0)
{
// prepare references to document tree objects for later
var mytable = document.getElementById("OwnedTable");
var mytbody = document.getElementById("OwnedBody");

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

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

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

trElem = document.createElement("tr");
trElem.className = "row" + i;

tdElem = document.createElement("td");
tdElem.className = "col1";
tdElem.innerHTML = objPartNo.item(i).text;
trElem.appendChild(tdElem);

tdElem = document.createElement("td");
tdElem.className = "col2";

tdElem.innerHTML = objOrderID.item(i).text;
trElem.appendChild(tdElem);

docFragment.appendChild(trElem);
}

myNewtbody.appendChild(docFragment);

//replace previous tbody with new tbody
mytable.replaceChild(myNewtbody, mytbody);

mytable.style.display = 'block';
}
else
{
var mytable = document.getElementById("OwnedTable");
mytable.style.display = 'none';
}

}

Thanks to those who endeavoured to help.

Chris

Dynamically adding html to a page

re: Dynamically adding html to a page

re: Dynamically adding html to a page

re: Dynamically adding html to a page

re: Dynamically adding html to a page

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about