Accessing innerHTML of a div in a custom control

[RoyHB]

New to V3 and I'm having some difficulty getting my head around the data model.

The innerHTML of a custom control looks like:

<div id="A">
    some content
    <div id="B">
           some other content
    </div>
</div>

i.e. there is a <div id='B'> within another <div id='A'> within the innerHTML of a custom control.
I want to modify the innerHTML of div B on the fly, as events are triggered.

I can't sort out the method to access and update this data.  Tried the simplest thing I could think of -
document.getElementById("B").innerHTML  but that didn't work, it's reported as null.

I'd be most appreciative if someone could point me in the right direction

[Luke Mahé]

Can you include a link to show what you have tried so far?

Thanks

-- Luke

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/mLlBWTMKMCkJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[RoyHB]

Luke, you can see it all in action at my site

The error that I see in the Firefox error console is:

Error: document.getElementById("LatLonTxt") is null
Source File: http://oceantracker.net/tracker/V4/test1.php
Line: 42

I understand that this may be more of a javascript question than a Google Map question but I'll appreciate a pointer to a solution or suggestions.

Thanks
Roy

[RoyHB]

I've gone a step further in This page.

It attempts to find and list all div elements in the document in alert windows.
The only named div it finds is map_canvas.

I'm inferring from that that my "LatLonTxt" div isn't part of the document domain but rather part of the map object.

[Pil]

It seems you're confusing a couple of things.

As far as I see myHTML should be a string. A string across a few lines
can be defined like this

var myHTML = '<div id="logo" class="logo"> +
.....
'<div id="LatLonTxt"></div>' +
'</div>';

In this string the backslash should be used like this:

var myHTML = '<div id="logo" class="logo">' +
.....
'<div id="LatLonTxt"><\/div>' +
'<\/div>';

Now you want innerHTML doing all the magic for you to convert the
string to a regular div element and append it to the DOM tree

logo_holder.innerHTML = myHTML;
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(logo_holder);

That should be allright, but now you cannot say immediately after that

var myDiv = document.getElementById("LatLonTxt");

and change its content again

myDiv.innerHTML = "This is a test";

because you'd have to wait until all the API stuff has created the DOM
and finally added your own string and converted it to an element. In
any case this may take time.



On Jun 23, 10:35 am, RoyHB <roy.bar...@gmail.com> wrote:
> I've gone a step further in This page<http://oceantracker.net/tracker/V4/test2.php>
> .

[RoyHB]

Thanks Pil.

The page I posted is just to demonstrate the issue.  In the actual application there are several places where large and complex bits of html are used within objects.  For the production world I build the html into files that I include via php pre-processing.  I've just found it easier to maintain these files as text rather than as strings.  When I load them I do so via statements like:

var myHTML = '<?php $myHtmlFile = fopen("Logo_HTML.txt","r");$logoHTML = fread($myHtmlFile , filesize("Logo_HTML.txt"));echo $logoHTML?>';

I'll try to add something to the demo that will allow me to trigger the attempt to access LatLonTxt after the page has finished loading and see it that works.

Cheers;
Roy

[RoyHB]

You were absolutely correct Pil.  It was a timing issue.  I built a page where my attempt to access LatLonTxt was delayed until after the entire page loaded.  It now works as planned.

Thanks for your help.

Roy

[Martin™]

Hi.

I tend to use something like this when i need to wait for an element
to exist in the DOM before i can manipulate it:

function waitForDOM(){
if(document.getElementById('myDiv')){
// do something with the div
} else {
setTimeout(waitForDOM, 250);
}
}

// start it going
waitForDOM();

Martin.

[Paul Smith]

I've never been a big fan of "wait for sometime and hope" code, although I appreciate it often works :-).  Is there a more rigourous way to achieve what you are doing, i.e. wait for the DOM to create the object?

 

And on a general Javascript theme, there seem to be lots of instances where a script requests something and then a callback indicates it has completed.  Do people tend to just chain "request, wait for callback, request, wait for callback...", or "request it all, each callback checks if everything is done"?  Or is there a cunning "you requested lots of things and now they are ALL done" Javascript mechanism which I've not come across yet?

 

Thanks,

Papadeltasierra

[Martin™]

That example is no bodge job!

It'll poll the DOM til the element that you want to manipulate exists
and then manipulate it - end of story.
Change the poll frequenqy - maybe set a limit to the number of times
that the timeout will execute before it gives up.

The Google Maps API doesn't trigger many (or even any) events to let
you know that it has created a DOM element 'sometime' after you asked
it to.

Martin.

[geoco...@gmail.com]

On Jun 23, 4:20 am, RoyHB <roy.bar...@gmail.com> wrote:
> You were absolutely correct Pil.  It was a timing issue.  I built a page
> where my attempt to access LatLonTxt was delayed until after the entire page
> loaded.  It now works as planned.

There is another option. Build the DOM nodes and attach them to the
DOM yourself rather than waiting for the infowindow to be rendered.

-- Larry