Rails spinoffs - Jun 2006 - Ajax - Inserting selected elements from request.responseText

After retrieving a URL using an Ajax.Request...
 
function onComplete (request, json) {
// request.responseText holds the entire page
 
Only the content contained in elementID = ''source'' is intended
for display
 
At this time, the following code works, but it disturbingly copies the
entire page from the source URL into the target DIV
 
$(''target'').innerHTML = request.responseText; // copy the
entire page
$(''target'').innerHTML =
$(''source'').innerHTML; // remove everything bur the
content of element ''source''
 
Any suggestion for a method to copy only the innerHTML of
''source''  ?
 
Sam
 
 
 


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Sam wrote:
> After retrieving a URL using an Ajax.Request...
>  
> function onComplete (request, json) {
> // request.responseText holds the entire page
>  
> Only the content contained in elementID = ''source'' is
intended for display
>  
> At this time, the following code works, but it disturbingly copies the 
> entire page from the source URL into the target DIV
>  
> $(''target'').innerHTML = request.responseText; // copy the
entire page
> $(''target'').innerHTML =
$(''source'').innerHTML; // remove everything bur
> the content of element ''source''
>  
> Any suggestion for a method to copy only the innerHTML of
''source''  ?
You''d probably have to use Javascript''s regular expression
matching
to extract the section of the page text string that''s inside the tag
having the id="source" attribute.

-- 
We develop, watch us RoR, in numbers too big to ignore.

The easiest way is to make the server return only the spefic element  
you need,
instead of a complete page.

It depends on the web dev frameworks of your choice on how easy this  
is to
implement, though. For example, with Rails and many other MVC  
frameworks,
you''ve partials (generating HTML snippets) that you can use both for  
Ajax (update specifc
parts of the page) and non-Ajax (complete page that''s composited from  
a layout
and one or more partials) HTML rendering.

If you want to do it the hard way, you can use string manipulation in  
JavaScript, of course.

-Thomas

Am 27.06.2006 um 07:47 schrieb Sam:
> After retrieving a URL using an Ajax.Request...
>
> function onComplete (request, json) {
> // request.responseText holds the entire page
>
> Only the content contained in elementID = ''source'' is
intended for
> display
>
> At this time, the following code works, but it disturbingly copies  
> the entire page from the source URL into the target DIV
>
> $(''target'').innerHTML = request.responseText; // copy the
entire page
> $(''target'').innerHTML =
$(''source'').innerHTML; // remove everything
> bur the content of element ''source''
>
> Any suggestion for a method to copy only the innerHTML of
''source''  ?
>
> Sam
>
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
--
Thomas Fuchs
wollzelle

http://www.wollzelle.com

questentier on AIM
madrobby on irc.freenode.net

http://www.fluxiom.com :: online digital asset management
http://script.aculo.us :: Web 2.0 JavaScript
http://mir.aculo.us :: Where no web developer has gone before






_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Sam wrote:
> After retrieving a URL using an Ajax.Request...
>  
> function onComplete (request, json) {
> // request.responseText holds the entire page
>  
> Only the content contained in elementID = ''source'' is
intended for display
>  
> At this time, the following code works, but it disturbingly copies the 
> entire page from the source URL into the target DIV
>  
> $(''target'').innerHTML = request.responseText; // copy the
entire page
> $(''target'').innerHTML =
$(''source'').innerHTML; // remove everything bur
> the content of element ''source''
>  
> Any suggestion for a method to copy only the innerHTML of
''source''  ?
Mark wrote:
>You''d probably have to use Javascript''s regular expression
matching
>to extract the section of the page text string that''s inside the
tag
>having the id="source" attribute.
Ack!  I was hoping I could manipulate the incoming stuff with more of an
"out of <body>" experience.

oMyDiv = document.createElement(''div''); // this div
isn''t attached to the
dom

oMyDiv.innerHTML = request.responseText ; // Stuff the external page URL
into this DIV

// hocus pocus... 
$(''target'').innerHTML =
oMyDiv.getElementByID(''source'').innerHTML ;  // in
your dreams

My understanding is that until the incoming ''source'' HTML is
attached to the
DOM, it stays as HTML and isn''t OO.  If this is right, then yes,
I''d need a
regEx.

I''m off to the regEx forum for assistance.  This problem is what regEx
was
created for.  Anyone have a regEx to pull the content of element
''source''
out of a page?

Thomas - thanks for your comments.  I''m stuck reading html from a
non-scripting server, so I''ve got to do this the hard way, but thanks.

Sam

Sam wrote:
> Ack!  I was hoping I could manipulate the incoming stuff with more of an
> "out of <body>" experience.
> 
> oMyDiv = document.createElement(''div''); // this div
isn''t attached to the
> dom
> 
> oMyDiv.innerHTML = request.responseText ; // Stuff the external page URL
> into this DIV
> 
> // hocus pocus... 
> $(''target'').innerHTML =
oMyDiv.getElementByID(''source'').innerHTML ;  // in
> your dreams
> 
> My understanding is that until the incoming ''source'' HTML
is attached to the
> DOM, it stays as HTML and isn''t OO.  If this is right, then yes,
I''d need a
> regEx.
If your problem is not speed, but having the whole page flash briefly, you
can use this method within an invisible div (div.style.display =
''none'').

-- 
We develop, watch us RoR, in numbers too big to ignore.

Mark wrote:
>If your problem is not speed, but having the whole page flash briefly, you
>can use this method within an invisible div (div.style.display =
''none'').
Good question.  I think the answer is: "it bothers me".  I know that
sounds
bad, but I could be influenced into not caring.  I see no performance hit,
no flash, and I test in several browsers: FF, IE, Safari.  It bothers me to
be stuffing DOCTYPE, <head><body> into a div contained in an already
well-formed DOM.  It seems like something bad *should* happen, but nothing
has (yet).

If anyone can confirm that this is a regular practice and I shouldn''t
worry
about it, I think I could walk away from this problem.  

BTW: I don''t want to use an iFrame to hold the document.  I''m
trying to keep
the page frameless.

Sam