473,387 Members | 1,619 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,387 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 3588

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...
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: 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?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
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...
0
Oralloy
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,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.