JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

How do I identify what type and where my code is in the HTML DOM tree?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2008
Posts: 4
Reputation: loboman is an unknown quantity at this point 
Solved Threads: 0
loboman loboman is offline Offline
Newbie Poster

How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #1
Apr 13th, 2008
April 13, 2008

I have a web-site that is a Google Map mash-up and I place my markers by listing them in the body right after the map loads (in a load function).

I convert my data from a spreadsheet to xml and then use a program to write the xml into a list that displays the information the way I want it. I do not insert the xml tags because I don’t want them in my html because I do not know how they would react, and I really don’t know where they would go once I pull the info out of the xml doc anyway. I insert the xml in with other text.

Right now I am cutting and pasting the data into my html but eventually I want to automate this. But I do not know how to “grab” the data since there are no tags or id’s. I think that it is in the tree somewhere but can anyone give me an idea where and how to identify this?

Typical lay-out in the html below. The code below “// add markers” is the code in which I am interested.

I hope this makes sense.

Thanks,

loboman

 
// ..... </head>

<body onload="load()"  >

// divs here

<script type="text/javascript">

function load() {
   	if (GBrowserIsCompatible()) {
   	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(12.942,100.8888), 13);
	map.setMapType(G_NORMAL_MAP);
	map.addControl(new GLargeMapControl());

  
 
   
 
 
// add markers

var point = new GLatLng( 12.94675,100.88696);
var marker = createMarker(point,'Soi 1 Pattaya','soi','66');
map.addOverlay(marker);

var point = new GLatLng( 12.93307,100.88154);
var marker = createMarker(point,'Soi 10 Pattaya','soi','67');
map.addOverlay(marker);

var point = new GLatLng( 12.9317,100.88198);
var marker = createMarker(point,'Soi 11 Pattaya','soi','68');
map.addOverlay(marker);

//... etc.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #2
Apr 13th, 2008
It is a bit fuzzy as to what you are trying to do here but as far as I can see, you need some way of automating the data which adds markers to the Javascript 'map' object on the fly by reading in data from some external XML file.

One way of doing this would be to dynamically write out Javascript using the server side language of your choice. Simply put; you read in the XML file using some SAX/DOM parser, run a loop which would dynamically write out the common three lines of javascript code with server side tags embedded in them so that once they are served to the client they contain the entire data you have in your XML/external file.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 4
Reputation: loboman is an unknown quantity at this point 
Solved Threads: 0
loboman loboman is offline Offline
Newbie Poster

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #3
Apr 13th, 2008
S.O.S.,

Thank you for your response. I was afraid that my question might be a little fuzzy. I am at the stage where I know just enough about DOM to be dangerous.

I don’t want to up-date on the fly. I have done that with both json and xml feeds and I want to try something new.

What I want is to up-date more statically by every so often replacing in mass the section under the “// add marker”. I think that normally you would do this by using “getElementById()” or “getElementByTagName()” or by walking the node tree and getting or “grabbing” the element nodes and use something like “delete” and “new” to change them. . (I will eventually automate this process.)

My problem is that I don’t have the markers in a div or something else with a tag, so I don’t know how to find the nodeName.

Does this make anymore sense? Probably not but maybe a step in the right direction. I apologize for not knowing enough to ask my question more intelligently but I thank you and all for your help.

loboman
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 4
Reputation: loboman is an unknown quantity at this point 
Solved Threads: 0
loboman loboman is offline Offline
Newbie Poster

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #4
Apr 14th, 2008
April 14, 2008

Here is a little of what I think I understand. My “code” (as I am calling it which may not be the proper nomenclature), i.e. the markers, is in, document.html.body.script.text, where text is the whole load function.

Maybe that is as far as it can be isolated and to replace the “code” I have to replace the whole load function. I suppose I could do this, but is there a way to further isolate the “code” below the “// add markers”? Is there, or can I make, a child node containing the “code” within the function (text) without disrupting the flow of the load function?

Thanks again,

loboman
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #5
Apr 14th, 2008
OK, let's look at things from a broader perspective. The 'replacing' which you keep on talking about is not the cause, it's the effect, an action done to produce certain result; which in our case being able to modify the contents of 'map' dynamically after the page has been loaded.

What kind of event would initiate this 'replace'? Would it be some background function which executes after fixed intervals of time or some function which is fired on a user initiated action (like a button click)?

The cod which you posted, below the //markers is nothing but adding / modifying the contents of the map variable. So, if you can effectively figure out a way of updating the 'map' after the page has completed loading, you have your solution. This I fear, depends a lot on how you are actually pulling in the data or making the external data available to Javascript. Assuming that your data is available to the program in a JSON string; you can iterate over its contents and update the contents of 'map' variable accordingly.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 4
Reputation: loboman is an unknown quantity at this point 
Solved Threads: 0
loboman loboman is offline Offline
Newbie Poster

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #6
Apr 14th, 2008
S.O.S.,

Again thank you for your response and again I apologize for not making my question more clear.

The map works fine. If desired I can provide a link.

The situation is like this. As you are quite aware, there are several ways to supply the marker data to the map. It can be kept in SQL or in a spreadsheet on a server, which I have previously done, and the marker data is feed to the map dynamically as needed.

In this case I am not looking for a dynamic change of marker data.

In the experiment I am trying now, as you see, I have put the marker data directly into the body of the HTML.

Every so often, weeks, months, I up-date the marker data. In the first two cases (sql and ss) the new data is uploaded to the server. In this experiment I cut and paste the marker data into a new html file, upload the new file, replacing the old, and on we go.

I have written a program that takes the marker data from the original spreadsheet on which I store it and converts it to the marker data which you see in the “code”. Now I want to go one step further and have the program replace the marker data in the in the body of the HTML. This will not be done dynamically but every so often as needed.

That is why I want to “grab” the marker data specifically.

I’m sure many may ask why I want to do it this way but sufficient to say, it’s a learning experience.

Thanks again,

loboman
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: How do I identify what type and where my code is in the HTML DOM tree?

 
0
  #7
Apr 15th, 2008
> In the experiment I am trying now, as you see, I have put the marker data directly into the
> body of the HTML.

You can definitely do it though I am pretty sure it won't be of any use as such since Javascript replaced that way won't be executed the way you are thinking it would. Plus it is craziness trying to do this client side when you can very well dynamically write out a Javascript. But since you are doing it for fun, you would be happy to know that you can grab hold of a <script> element the way you do it with normal elements by assigning it an ID.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.             "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.     <meta http-equiv"Script-Content-Type" content="text/javascript">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <meta http-equiv="Expires" content="0"> <!-- disable caching -->
  8.     <title>Example</title>
  9.     <script type="text/javascript">
  10.     function showAll() {
  11.       var txt = document.getElementById("targetScript");
  12.       alert("script content: " + txt.text);
  13.       alert("a: " + a);
  14.     }
  15.     function replace() {
  16.       var oldScript = document.getElementById("targetScript");
  17.       oldScript.text = "a = 100;";
  18.     }
  19.     </script>
  20.     <script type="text/javascript" id="targetScript">
  21.       a = 1; b = 2; c = 3;
  22.     </script>
  23. </head>
  24. <body>
  25.   <form id="frm" name="frm" action="#">
  26.     <input type="button" value="Show All" onclick="showAll();">
  27.     <br><br>
  28.     <input type="button" value="Replace" onclick="replace();">
  29.     <br><br>
  30.     <div>Instructions: First click on 'Show All' and it will show you the 
  31.     contents of the script. Then press 'Replace' to change the script
  32.     contents and again press 'Show All'. Note that it still doesn't
  33.     change the value of 'a'!
  34.     </div>    
  35.   </form>
  36. </body>
  37. </html>
  38.  
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC