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

// Get all "names" from XML data
objPartNos = XMLID.getElemen tsByTagName("Pa rtNo");
objNumFilters= XMLID.getElemen tsByTagName("Nu mFilters");

if objPartNos.leng th > 0
{
for (var i=0; i < objPartNos.leng th; i++) {
alert(objPartNo s.item(i).text) ;
alert(objNumFil ters.item(i).te xt);
}
}
}

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="javas cript" src="/fxdb/common/validation.js"> </script>
<script language="javas cript" src="/fxdb/common/checkowned.js"> </script>
<script language="javas cript" src="/fxdb/common/custlist.js"></script>
<script language="JavaS cript" 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="neworde r.asp">
<table class="form">
<col class="field">
<col class="value">
<tbody>
<tr>
<td>Customer: </td>
<td>
<select id="CustomerID " NAME="CustomerI D"
onfocus="javasc ript:populateCo mbo(fProcess.Cu stomerID.value) "
onChange="javas cript:populateC ombo(fProcess.C ustomerID.value )"
selcontrol="tru e" mandatory="true " alt="Customer">

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

</html>
--
cj*******@REMOV EMEyahoo.co.uk
[remove the obvious bits]

Jul 23 '05 #1

Subscribe Reply

2267

Joe Fawcett

"cjm" <cj*******@remo veme.yahoo.co.u k> 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********@new sgroups.nospam> wrote in message
news:%2******** ********@TK2MSF TNGP09.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

Bob Barrows [MVP]

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
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:
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_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

Jul 23 '05 #5

Similar topics

12877

Adding events dynamically

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 obviously, I put the alert("s") part in for debugging purposes, just to make sure the error wasn't in any code I was going to be running. This line works just fine in IE6 but in Firefox it doesn't. However, if I replace that line with the...

Javascript

10795

Create dynamically LinkButton controls and EventHandlers

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 then like that, when clicking the LinkButton, the user can be navigated to another page, carrying a variable. I would like to use server.transfer method instead of QueryString as I don't want the carried variable to be visible for the user.

.NET Framework

4309

The Command event of dynamically loaded controls

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 button at runtime: //----- Code snippet protected System.Web.UI.WebControls.PlaceHolder ImageHolder; private void Page_Load(object sender, System.EventArgs e)

ASP.NET

2904

View State issue with dynamically added controls-Plz help :-)

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 avoid the problem by avoiding the table control or resorting to databound controls that better manage state for me. I hope to understand how to solve the problem by using the Table web control and sticking to the approach of building the table at run...

ASP.NET

3366

Event fails to fire first time in dynamically loaded user control(

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 the usual stuff of recreating the usercontrol in the Page Init event. The 'failure' sequence is as follows: - select web form button to display the user control - select user control button, event fires - select web form button to display...

ASP.NET

4558

Dynamically creating a web form with server controls

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 easy, but 1) How do I set about dynamically creating user controls (like TextBox, TextArea) --- simply Declare and initialised (new) the user controls?? How do I "place" it graphically on the form. Ideally, I want them to lay out in a table, one...

ASP.NET

2189

Using Dynamically Adding Controls on PostBack

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. The article that it loads from the Database is a xml field that contains html code for the article. I added some custom html to the database article called <question id="22" /> When the article contains inline questions are parse out the start...

ASP.NET

1694

Adding buttons dynamically to a form

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 page "Next" and "Previous" which I want displayed just a couple of lines below the table dynamically. Thus the positions of these buttons would vary depending on how many rows are rendered. I was wondering whether there is a programmatic way of...

ASP.NET

4472

EnableEventValidation exception when dynamically adding controls on client with JavaScript

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 selected, the row is added using JavaScript. The script uses cloneNode to clone a hidden template row and all of its children and then adds the new row to the table, updates all of the child control Ids and sets visibility etc. The hidden...

ASP.NET

5258

RE: Dynamically Add and Remove Accordion Control Panes

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 add the pane the remove event does not get handled, though thereafter it is handled without problems. ==================================================

ASP.NET

8249

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8179

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8685

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8348

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8493

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7176

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

4084

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4187

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1797

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP