472,805 Members | 1,243 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

how to substitute HTML within <DIV>...</DIV> using XMLHttpRequest ?

The precious input given by Laurent, Martin, Benjamin about
XMLHttpRequest in Javascript, has made me think that perhaps I could
improve what I am currently doing by using Ajax.
Let's make it simple and schematic, to see if there is a simple Ajax
answer to this.

A. I have an HTML page which has some pure html/css code representing a
GRID of cell. The page may also contain other objects (images, etc).

B. On the server I have a windows application which is able to generate
by direct construction of the string, the html representing this GRID.

On the html page I have a simple javascript which is capable to
submit() to an asp page a form which describes the changes the user
requires to be done on the GRID (for instance a drill down). The server
is capable to generate the new html (of the new GRID).
QUESTION.
Has I understand the Ajax technology, it should allow me to redraw the
grid ONLY, without reloading the whole page. Assume we have:
<DIV id="Grid Container">... Here the grid html <DIV>
and assume I have the string to represent the inner HTML "grid html".

1. How would I do the HTML substitution within <DIV id="Grid
Container"... <DIVby using an Ajax style (using async
XMLHttpRequest) javascript?

2. Would that be reliable or is it advisable to reload the whole page.

Thanks for any help.

-Pam

Aug 29 '06 #1
7 3527

pa***********@libero.it wrote:
The precious input given by Laurent, Martin, Benjamin about
XMLHttpRequest in Javascript, has made me think that perhaps I could
improve what I am currently doing by using Ajax.
Let's make it simple and schematic, to see if there is a simple Ajax
answer to this.

A. I have an HTML page which has some pure html/css code representing a
GRID of cell. The page may also contain other objects (images, etc).

B. On the server I have a windows application which is able to generate
by direct construction of the string, the html representing this GRID.

On the html page I have a simple javascript which is capable to
submit() to an asp page a form which describes the changes the user
requires to be done on the GRID (for instance a drill down). The server
is capable to generate the new html (of the new GRID).
QUESTION.
Has I understand the Ajax technology, it should allow me to redraw the
grid ONLY, without reloading the whole page.
Absotively!

Assume we have:
<DIV id="Grid Container">... Here the grid html <DIV>
and assume I have the string to represent the inner HTML "grid html".

1. How would I do the HTML substitution within <DIV id="Grid
Container"... <DIVby using an Ajax style (using async
XMLHttpRequest) javascript?
Assuming the server sends back HTML, simply use the
XMLHttpRequest.responseText variable and set it as the innerHTML of
your Grid Container DIV.

document.getElementById("GridContainer").innerHTML =
request.responseText.

Of couse I'm assuming that you already know how to create an
XMLHttpRequest and initiate the request, etc. If you need more of a
step by step, please advise.
>
2. Would that be reliable or is it advisable to reload the whole page.
Not if the Grid Container is the only thing that changes.
>
Thanks for any help.

-Pam
Aug 29 '06 #2
Tom Cole ha scritto:
Absotively!
Thank you Tom!

Absotively !? :) I just learned a new word!
Assume we have:
<DIV id="Grid Container">... Here the grid html <DIV>
and assume I have the string to represent the inner HTML "grid html".

1. How would I do the HTML substitution within <DIV id="Grid
Container"... <DIVby using an Ajax style (using async
XMLHttpRequest) javascript?

If you need more of a
step by step, please advise.
Absotively! I don't know if you have taken a look at a couple of
threads
http://groups.google.it/group/comp.l...ad9223a4?hl=it

.... you will also gather that I am completely new to Javascript and
actually
this is my very first script:

http://groups.google.it/group/comp.l...1cbda538?hl=it

About Ajax, what I know are basically the things that Laurent has
kindly tought to me. And the URL checker, put togheter with the
contributions of Laurent, Martin, Benjamin,
is the only example of Ajax I have actually seen and (not completely)
understood.

I do need more of step by step because this is all new to me: I just
need to pick the basic mechanism: usually I am able to become
independent quite soon, if I have a good teacher :)

My current scheme is as follows.

1. HTML page with a GRID and other objects

2. When the user does some action (eg. Drill down) a code of the action
and of the cell
is transmitted (GET) to an ASP page

3. The ASP page gets this information and the code behind makes a new
HTM string that
represents the new GRID (eg. a drilled down view)

(currently I "redirect" to a new regenerated page, but I guess that
this part should be removed in ajax )

So given the above starting point, do I have to change something in the
above mechanism and, most importantly, how would I proceed step by
step to do this the Ajax way?

2. Would that be reliable or is it advisable to reload the whole page.

Not if the Grid Container is the only thing that changes.
what do you mean? (Probably I will understand this later :) )

Thank you

-Pam

Aug 29 '06 #3
Hi,

pa***********@libero.it wrote:

<snip>
QUESTION.
Has I understand the Ajax technology, it should allow me to redraw the
grid ONLY, without reloading the whole page. Assume we have:
<DIV id="Grid Container">... Here the grid html <DIV>
and assume I have the string to represent the inner HTML "grid html".

1. How would I do the HTML substitution within <DIV id="Grid
Container"... <DIVby using an Ajax style (using async
XMLHttpRequest) javascript?

2. Would that be reliable or is it advisable to reload the whole page.

Thanks for any help.

-Pam
Since you are a ASP.NET 2.0 user (me too BTW), you should really take a
close look at ATLAS, which is Microsoft's AJAX implementation.

http://atlas.asp.net

Check especially their update panel. I personally saw Scott Guthrie on
stage in Las Vegas transform a static HTML todo list in a full blown
AJAX application in less than 10 minutes.
http://atlas.asp.net/Default.aspx?tabid=47

Also:
http://tinyurl.com/owy99

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Aug 29 '06 #4
Since you are a ASP.NET 2.0 user (me too BTW), you should really take a
close look at ATLAS, which is Microsoft's AJAX implementation.

http://atlas.asp.net
Yes Laurent. That is beautiful. I also think that the future will see a
big development of these techniques to improve the user experience on
the client side. Probably, right now they are still not mature enough,
as, from what I can get, even a few recent samples which one can find
on the web do not work with the latest versions of Atlas. This suggests
that the development rate of this stuff is quite high. Probably
Microsoft's effort is that of making converge everything towards a
unified kind of programming. After all, ASP.NET talks clear. My
learning curve for ASP.NET was practically flat, although I never had
ASP before: just because they have well managed to unify the
programming environment. Probably, the same will happen for the client
side tools, even tough it is probable that there they will have hard
time, due to the browser limitations. I expect they will put a lot of
stuff in IE7, as to transform it into a programming enviroment that
unify everything (winform/webform/client side). This will also probably
cause a further and unstoppable expansion of egemony, which many people
may not regard as a good thing.

Back to my particular problem, note that, in this specific instance
case, I am actually working with a *plain* HTML/CSS page. This page is
generated directly writing the HTML to a stringbuilder. So it is not an
ASP.NET page, where one could use Atlas or similar tools. It is also so
complex (might contains several grids with several thousands cells,
interactive charts, pictures, textboxes, etc.) that could not
practically be done with ASP.NET or any attempt could take ages. I use
an external ASP.NET page only to the purpose of passing the user action
from the html page to the server (a do a GET using an hidden field of a
form in the html page, to pass the javascript variable to the ASP.NET
page which does the server side processing). As I explained in my first
post, this has also the advantage that the report will be portable and
will work without ASP. In fact, thanks to Your beautiful function to
check URL existence, it will continue to work seamlessy even in stand
alone mode.

So what I am now looking for is a simple Ajax way to do the html
substitution within the html page, so that one can avoid the whole page
reload. This could be a good chance to see how this things actually
work.

-Pam

Aug 29 '06 #5
Hi Pamela,

pa***********@libero.it wrote:
>>Since you are a ASP.NET 2.0 user (me too BTW), you should really take a
close look at ATLAS, which is Microsoft's AJAX implementation.

http://atlas.asp.net


Yes Laurent. That is beautiful. I also think that the future will see a
big development of these techniques to improve the user experience on
the client side. Probably, right now they are still not mature enough,
as, from what I can get, even a few recent samples which one can find
on the web do not work with the latest versions of Atlas. This suggests
that the development rate of this stuff is quite high.
ATLAS is still in development, but they will be releasing soon. As with
their other technologies in development (the amazing Windows
Presentation Foundation, for instance), the release date, though
unknown, should be sometimes this year. The monthly CTPs (community
technology previews) are more and more stable, and most of the time you
don't need to modify the code anymore to be able to recompile.

Sorry to the group for that paragraph, which is off-topic.
Probably
Microsoft's effort is that of making converge everything towards a
unified kind of programming. After all, ASP.NET talks clear. My
learning curve for ASP.NET was practically flat, although I never had
ASP before: just because they have well managed to unify the
programming environment. Probably, the same will happen for the client
side tools, even tough it is probable that there they will have hard
time, due to the browser limitations. I expect they will put a lot of
stuff in IE7, as to transform it into a programming enviroment that
unify everything (winform/webform/client side). This will also probably
cause a further and unstoppable expansion of egemony, which many people
may not regard as a good thing.
Actually, never before has Microsoft worked on a technology as
cross-platform compatible as this one. I was in Mix06 earlier this year,
and I saw them demonstrate new web technologies (ATLAS, mash-ups,
infocards, etc...) using all kinds of computers. In most of the events,
there was at least one Mac on stage, and often also a Unix-based server
to show that ASP.NET 2.0 based features can easily be used on other systems.

ATLAS is documented to work on IE, Firefox and other Mozilla browsers,
Opera, and also on Safari for Mac. IIRC it will also work on Linux
platforms. I think that this shows that Microsoft is changing slowly to
a more open approach, which is also confirmed by the recent development
of WPF/E, which will also run on all these platforms. There is really a
wind of change in that firm, with developers communicating quite openly
and publishing demos, source code, etc... on their blogs.

I came to OOP through Java and I had a Mac before. I was never an
extremist in any technology, and cannot be qualified as pro Windows or
pro Mac, pro Firefox or pro IE (I use both anyway). But I must say, I
was impressed by what I saw since I started working with .NET 1.0.
Back to my particular problem, note that, in this specific instance
case, I am actually working with a *plain* HTML/CSS page. This page is
generated directly writing the HTML to a stringbuilder. So it is not an
ASP.NET page, where one could use Atlas or similar tools. It is also so
complex (might contains several grids with several thousands cells,
interactive charts, pictures, textboxes, etc.) that could not
practically be done with ASP.NET or any attempt could take ages. I use
an external ASP.NET page only to the purpose of passing the user action
from the html page to the server (a do a GET using an hidden field of a
form in the html page, to pass the javascript variable to the ASP.NET
page which does the server side processing). As I explained in my first
post, this has also the advantage that the report will be portable and
will work without ASP. In fact, thanks to Your beautiful function to
check URL existence, it will continue to work seamlessy even in stand
alone mode.
I understand. Some parts of ATLAS are client-side only, so you could
select only some of the JavaScript files and use this as standalone, I
suppose. I never did that though. I think that the simple AJAX request
you describe has better chances, and it will be fun to develop anyway.

So what I am now looking for is a simple Ajax way to do the html
substitution within the html page, so that one can avoid the whole page
reload. This could be a good chance to see how this things actually
work.

-Pam
Tom explained to you how to do that. I am not a fan of innerHTML to
update node values, because of compatibility issues (which might be
solved now though). I prefer to use nodeValue.

Anyway, once you have the HTML result of your request, the idea is to
use DOM Level 2 methods to access the container node and the to replace
the content with something else. This will fail in older browsers, but
the modern ones will automatically update the display.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Aug 30 '06 #6
div.innerHTML = http.responseText

Sep 8 '06 #7
Hi,

ma**@imarr.com wrote:
div.innerHTML = http.responseText
Many readers have no idea what you reply to because you didn't quote.
Additionally, the post you answer to is 10 days old and has been
answered very completely (adding a post by Tom Cole on the 29th of
August with the exact same reply as yours, but delivered in a useful form).

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Sep 8 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: F. Da Costa | last post by:
Hi, I' looking to retrieve ProdName1 form the <tr> below. <tr id="1-1-1" class="even"> <td> <div class="tier4"> <a href="#" class="leaf"></a> ProdName1 </div>
2
by: Marcus Otmarsen | last post by:
Ok, the situation is as follows: I defined a <DIV> like: <div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div> This pane is...
14
by: Charlie T | last post by:
Hello, is there any way to get this to work? myID.innerHTML = "Hello" <DIV id="myID"></DIV> <DIV id="myID"></DIV>
4
by: He Shiming | last post by:
Hi, I'm wondering how can I use <DIV> to mimic a <TABLE>. In a bare <TABLE> without a width attribute, the width of the table get dynamically expanded according to the content. However, <DIV>...
2
by: Nicky | last post by:
hi, all I know we can do this by some jscript. But is there a way to do it in asp.net c# code? In our project, users could sumit a piece of html code and I need to remove all html tag out. What's...
3
by: rsteph | last post by:
I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes,...
13
by: Mark | last post by:
Dear folks, In Javascript, is it possible to get all id names within, say, a <div></divpair? Like the array of "document.images", I mean. The reason I ask, is that I have a calender whose...
2
by: ShankerNair | last post by:
Howdy all, I would like to manipulate an HTML tag - a <div>, using ASP.NET, C# is the code behind. The tag would look something like this - <div id="divLime" style="visiblity:hidden"> ...
0
by: Patricia Mindanao | last post by:
Assume I have a HTML web page with a pre-defined <div...</divarea. When the users clicks now on a certain link on this web page (outside or inside this "div" area) then the content of a file say...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

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.