By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,023 Members | 1,297 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,023 IT Pros & Developers. It's quick & easy.

Dynamically adding html to a page

P: n/a
cjm
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:

<!-- #include virtual="/fxdb/common/dates.asp" -->
<!-- #include virtual="/fxdb/common/FilterSQL.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>

<!-- Data Island-->
<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">
<!-- #include virtual="/fxdb/common/custlist.asp" -->
</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 >&lt;Select Depot&gt;</option>
</select>
</td>
</tr>
<tr>
..
..
[snipped for clarity]
..
..

</html>
--
cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"cjm" <cj*******@removeme.yahoo.co.uk> wrote in message
news:42********@x-privat.org...
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

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
Jul 23 '05 #2

P: n/a
cjm

"Joe Fawcett" <jo********@newsgroups.nospam> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...


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


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
Jul 23 '05 #3

P: n/a
cjm wrote:

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.

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"
Jul 23 '05 #4

P: n/a
cjm
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
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.