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

[pamelafluente]

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"> ... <DIV> by 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

 

[Tom Cole]

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"> ... <DIV> by 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.

 

[pamelafluente]

Tom Cole ha scritto:

Absotively!

Thank you Tom!

Absotively !? I just learned a new word!

Assume we have:

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.lang.javascript/browse_frm/thread/b3b8fa7bad9223a4?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.lang.javascript/browse_frm/thread/96a2b3c31cbda538?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?

Not if the Grid Container is the only thing that changes.

what do you mean? (Probably I will understand this later )

Thank you

-Pam

 

[Laurent Bugnion]

Hi,

(e-mail address removed) wrote:

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"> ... <DIV> by 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

 

[pamelafluente]

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

 

[Laurent Bugnion]

Hi Pamela,

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

 

[mail]

div.innerHTML = http.responseText

 

[Laurent Bugnion]

Hi,

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