473,382 Members | 1,437 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Dynamically adding html to a page

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
4 2233
"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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

20
by: David | last post by:
I have a one-line script to add an onunload event handler to the body of the document. The script is as follows: document.getElementsByTagName("BODY").onunload=function s() {alert("s")} Now...
3
by: Kiyomi | last post by:
Hello, I create a Table1 dynamically at run time, and at the same time, I would like to create LinkButton controls, also dynamically, and insert them into each line in my Table1. I would...
8
by: Donald Xie | last post by:
Hi, I noticed an interesting effect when working with controls that are dynamically loaded. For instance, on a web form with a PlaceHolder control named ImageHolder, I dynamically add an image...
2
by: Chad | last post by:
I have a problem that I am desperate to understand. It involves dynamically adding controls to a Table control that is built as a result of performing a database query. I am not looking to...
6
by: Steve Booth | last post by:
I have a web form with a button and a placeholder, the button adds a user control to the placeholder (and removes any existing controls). The user control contains a single button. I have done all...
2
by: Patrick | last post by:
I want to define a set of web-form templates in XML and render the equivalent web-form with ASP.NET, then process any input server controls on the form. Reading the XML file from Page_load is...
3
by: Ben Dewey | last post by:
Okay, so I have a base Page class called ArticlesPageBase. This base class has reads in an overridable ArticleId and Loads the data into a Panel object in the ContentPlaceHolder of the Master. ...
1
by: Paddy | last post by:
The problem I am facing is as follows: I am populating an HTML table on my webpage with rows of data from a database. The rows may be sometimes 10 and sometimes say,3. I have two buttons on that...
4
by: Lewis Holmes | last post by:
Hi I have the following situation in one of my asp.net pages. The user can add multiple table rows to a form by selecting a button. These rows can contain asp.net controls. When this button is...
3
by: Allen Chen [MSFT] | last post by:
Hi Richard, Quote from Richard================================================== However I also want to be able to remove the panes. I have tried to include this, but find that when I first...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.