Web and WebWorks Development

[jmace]

I want to pass HTML snippets back to my widget from my web service instead of parsing through the xml on the device and building tables to display.

My respsonse is an array of strings and it's length can vary. The first node is always a station number. The rest of the nodes are HTML tables that I just want to insert into a <DIV> on my page and save in my sqlite DB. 

I've tried

document.getElementsByID('myDiv').innerHTML = xmlHttp.responseXML.documentElement.getElementsByTagName("string")[1].childNodes[0].nodeValue;

but I get "null" instead of my expected table.

the above statement does work for  

xmlHttp.responseXML.documentElement.getElementsByTagName("string")[0].childNodes[0].nodeValue;

 and I get a "503" or whatever the variable is in that place.

I've also tried escaping the  '<' and '&'  with  '&lt;'   and '%amp;'  and I still get a null from the top example.

Can anyone help with this?

<?xml version="1.0" encoding="utf-8" ?> 
- <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://TalonMobile.org/">
  <string>503</string> 
  <string><font size=3 color="Gold"><I>last updated: 1/8/2010 7:15:00 AM</I></font><table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;'><tr align='left' valign='top'><td align='left' valign='top'>Description</td><td align='left' valign='top'>Value</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Current Day Volume</td><td align='left' valign='top'>74</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Previous Day Volume</td><td align='left' valign='top'>1415</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Differential Pressure</td><td align='left' valign='top'>58.97</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Corrected Flow Rate</td><td align='left' valign='top'>1429.04</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Pressure</td><td align='left' valign='top'>65.72</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tubing Pressure</td><td align='left' valign='top'>101.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Casing Pressure</td><td align='left' valign='top'>385.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Separator Pressure</td><td align='left' valign='top'>68.86</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tank 1 Level</td><td align='left' valign='top'>74.66</td></tr></table></string> 
  <string><font size=2 color="Gold"><I>Hourly Data Run 1</I></font><table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;'><tr align='left' valign='top'><td align='left' valign='top'>Time</td><td align='left' valign='top'>Volume</td><td align='left' valign='top'>Diff</td><td align='left' valign='top'>Static</td><td align='left' valign='top'>Casing</td><td align='left' valign='top'>Tubing</td><td align='left' valign='top'>Tank1</td><td align='left' valign='top'>Tank2</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 6:00:00 AM</td><td align='left' valign='top'>58.87</td><td align='left' valign='top'>57.37</td><td align='left' valign='top'>66</td><td align='left' valign='top'>386.21</td><td align='left' valign='top'>103.69</td><td align='left' valign='top'>74.43</td><td align='left' valign='top'>74.43</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 5:00:00 AM</td><td align='left' valign='top'>58.82</td><td align='left' valign='top'>57.49</td><td align='left' valign='top'>65.71</td><td align='left' valign='top'>385.56</td><td align='left' valign='top'>104.01</td><td align='left' valign='top'>74.11</td><td align='left' valign='top'>74.11</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 4:00:00 AM</td><td align='left' valign='top'>58.97</td><td align='left' valign='top'>57.15</td><td align='left' valign='top'>66.88</td><td align='left' valign='top'>384.82</td><td align='left' valign='top'>104.28</td><td align='left' valign='top'>73.8</td><td align='left' valign='top'>73.8</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 3:00:00 AM</td><td align='left' valign='top'>58.81</td><td align='left' valign='top'>57.46</td><td align='left' valign='top'>66.54</td><td align='left' valign='top'>383.22</td><td align='left' valign='top'>104.76</td><td align='left' valign='top'>73.5</td><td align='left' valign='top'>73.5</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 2:00:00 AM</td><td align='left' valign='top'>58.98</td><td align='left' valign='top'>57.64</td><td align='left' valign='top'>67.22</td><td align='left' valign='top'>382.44</td><td align='left' valign='top'>105.92</td><td align='left' valign='top'>73.21</td><td align='left' valign='top'>73.21</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 1:00:00 AM</td><td align='left' valign='top'>58.79</td><td align='left' valign='top'>58.08</td><td align='left' valign='top'>66.04</td><td align='left' valign='top'>383.08</td><td align='left' valign='top'>105.06</td><td align='left' valign='top'>72.93</td><td align='left' valign='top'>72.93</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/8/2010 12:00:00 AM</td><td align='left' valign='top'>58.79</td><td align='left' valign='top'>57.73</td><td align='left' valign='top'>66.46</td><td align='left' valign='top'>383.45</td><td align='left' valign='top'>105.31</td><td align='left' valign='top'>72.65</td><td align='left' valign='top'>72.65</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 11:00:00 PM</td><td align='left' valign='top'>58.96</td><td align='left' valign='top'>58.22</td><td align='left' valign='top'>66.2</td><td align='left' valign='top'>383.21</td><td align='left' valign='top'>105.19</td><td align='left' valign='top'>72.34</td><td align='left' valign='top'>72.34</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 10:00:00 PM</td><td align='left' valign='top'>58.89</td><td align='left' valign='top'>57.66</td><td align='left' valign='top'>66.71</td><td align='left' valign='top'>383.65</td><td align='left' valign='top'>105.23</td><td align='left' valign='top'>72.05</td><td align='left' valign='top'>72.05</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 9:00:00 PM</td><td align='left' valign='top'>59.23</td><td align='left' valign='top'>58.44</td><td align='left' valign='top'>66.74</td><td align='left' valign='top'>383.71</td><td align='left' valign='top'>105.32</td><td align='left' valign='top'>71.78</td><td align='left' valign='top'>71.78</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 8:00:00 PM</td><td align='left' valign='top'>58.71</td><td align='left' valign='top'>57.53</td><td align='left' valign='top'>66.57</td><td align='left' valign='top'>383.82</td><td align='left' valign='top'>104.78</td><td align='left' valign='top'>71.45</td><td align='left' valign='top'>71.45</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 7:00:00 PM</td><td align='left' valign='top'>58.9</td><td align='left' valign='top'>57.62</td><td align='left' valign='top'>66.96</td><td align='left' valign='top'>383.93</td><td align='left' valign='top'>105.47</td><td align='left' valign='top'>71.17</td><td align='left' valign='top'>71.17</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 6:00:00 PM</td><td align='left' valign='top'>58.91</td><td align='left' valign='top'>58.03</td><td align='left' valign='top'>66.3</td><td align='left' valign='top'>384.66</td><td align='left' valign='top'>104.71</td><td align='left' valign='top'>70.88</td><td align='left' valign='top'>70.88</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 5:00:00 PM</td><td align='left' valign='top'>58.92</td><td align='left' valign='top'>57.47</td><td align='left' valign='top'>67.27</td><td align='left' valign='top'>384.29</td><td align='left' valign='top'>105.28</td><td align='left' valign='top'>70.58</td><td align='left' valign='top'>70.58</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 4:00:00 PM</td><td align='left' valign='top'>58.95</td><td align='left' valign='top'>54.95</td><td align='left' valign='top'>70.94</td><td align='left' valign='top'>383.93</td><td align='left' valign='top'>105.69</td><td align='left' valign='top'>70.3</td><td align='left' valign='top'>70.3</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 3:00:00 PM</td><td align='left' valign='top'>58.87</td><td align='left' valign='top'>57.16</td><td align='left' valign='top'>67.59</td><td align='left' valign='top'>384.68</td><td align='left' valign='top'>103.79</td><td align='left' valign='top'>69.98</td><td align='left' valign='top'>69.98</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 2:00:00 PM</td><td align='left' valign='top'>58.98</td><td align='left' valign='top'>58.63</td><td align='left' valign='top'>65.97</td><td align='left' valign='top'>384.62</td><td align='left' valign='top'>103.17</td><td align='left' valign='top'>69.66</td><td align='left' valign='top'>69.66</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 1:00:00 PM</td><td align='left' valign='top'>59.21</td><td align='left' valign='top'>58.56</td><td align='left' valign='top'>66.63</td><td align='left' valign='top'>383.9</td><td align='left' valign='top'>104.05</td><td align='left' valign='top'>69.37</td><td align='left' valign='top'>69.37</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 12:00:00 PM</td><td align='left' valign='top'>59.18</td><td align='left' valign='top'>59.09</td><td align='left' valign='top'>65.84</td><td align='left' valign='top'>384.95</td><td align='left' valign='top'>103.28</td><td align='left' valign='top'>69.11</td><td align='left' valign='top'>69.11</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 11:00:00 AM</td><td align='left' valign='top'>59.1</td><td align='left' valign='top'>58.01</td><td align='left' valign='top'>67.04</td><td align='left' valign='top'>385.94</td><td align='left' valign='top'>105.97</td><td align='left' valign='top'>68.79</td><td align='left' valign='top'>68.79</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 10:00:00 AM</td><td align='left' valign='top'>58.75</td><td align='left' valign='top'>58.69</td><td align='left' valign='top'>64.92</td><td align='left' valign='top'>384.93</td><td align='left' valign='top'>103.64</td><td align='left' valign='top'>68.5</td><td align='left' valign='top'>68.5</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 9:00:00 AM</td><td align='left' valign='top'>59.21</td><td align='left' valign='top'>57.85</td><td align='left' valign='top'>67.25</td><td align='left' valign='top'>386.44</td><td align='left' valign='top'>105.35</td><td align='left' valign='top'>68.18</td><td align='left' valign='top'>68.18</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 8:00:00 AM</td><td align='left' valign='top'>59.07</td><td align='left' valign='top'>57.81</td><td align='left' valign='top'>66.79</td><td align='left' valign='top'>386.26</td><td align='left' valign='top'>104.32</td><td align='left' valign='top'>67.9</td><td align='left' valign='top'>67.9</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 7:00:00 AM</td><td align='left' valign='top'>58.91</td><td align='left' valign='top'>57.76</td><td align='left' valign='top'>66.41</td><td align='left' valign='top'>385.68</td><td align='left' valign='top'>104.07</td><td align='left' valign='top'>67.61</td><td align='left' valign='top'>67.61</td></tr></table></string> 
  <string><font size=2 color="Gold"><I>Daily Data Run 1</I></font><table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;'><tr align='left' valign='top'><td align='left' valign='top'>Time</td><td align='left' valign='top'>Volume</td><td align='left' valign='top'>Diff</td><td align='left' valign='top'>Static</td><td align='left' valign='top'>Casing</td><td align='left' valign='top'>Tubing</td><td align='left' valign='top'>Tank1</td><td align='left' valign='top'>Tank2</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/7/2010 6:00:00 AM</td><td align='left' valign='top'>1414.91</td><td align='left' valign='top'>57.77</td><td align='left' valign='top'>66.79</td><td align='left' valign='top'>384.34</td><td align='left' valign='top'>104.73</td><td align='left' valign='top'>70.71</td><td align='left' valign='top'>70.71</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/6/2010 6:00:00 AM</td><td align='left' valign='top'>1416.83</td><td align='left' valign='top'>52.99</td><td align='left' valign='top'>74.7</td><td align='left' valign='top'>388.62</td><td align='left' valign='top'>111.35</td><td align='left' valign='top'>63.62</td><td align='left' valign='top'>63.62</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/5/2010 6:00:00 AM</td><td align='left' valign='top'>1421.61</td><td align='left' valign='top'>53.8</td><td align='left' valign='top'>73.81</td><td align='left' valign='top'>389.1</td><td align='left' valign='top'>110.42</td><td align='left' valign='top'>56.56</td><td align='left' valign='top'>56.56</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/4/2010 6:00:00 AM</td><td align='left' valign='top'>1425.13</td><td align='left' valign='top'>55.48</td><td align='left' valign='top'>71.43</td><td align='left' valign='top'>391.05</td><td align='left' valign='top'>108.77</td><td align='left' valign='top'>49.47</td><td align='left' valign='top'>49.47</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/3/2010 6:00:00 AM</td><td align='left' valign='top'>1427.18</td><td align='left' valign='top'>58.01</td><td align='left' valign='top'>67.38</td><td align='left' valign='top'>393.28</td><td align='left' valign='top'>106.73</td><td align='left' valign='top'>42.31</td><td align='left' valign='top'>42.31</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/2/2010 6:00:00 AM</td><td align='left' valign='top'>1431.55</td><td align='left' valign='top'>58.13</td><td align='left' valign='top'>67.78</td><td align='left' valign='top'>395.38</td><td align='left' valign='top'>107.03</td><td align='left' valign='top'>35.02</td><td align='left' valign='top'>35.02</td></tr><tr align='left' valign='top'><td align='left' valign='top'>1/1/2010 6:00:00 AM</td><td align='left' valign='top'>1438.53</td><td align='left' valign='top'>59.22</td><td align='left' valign='top'>67.39</td><td align='left' valign='top'>393.26</td><td align='left' valign='top'>105.39</td><td align='left' valign='top'>27.48</td><td align='left' valign='top'>27.48</td></tr></table></string> 
  </ArrayOfString>

[staktrace]

Try sending your content in a CDATA section, like this:

<string><![CDATA[<font size=3>blah blah blah</table>]]></string>

[jmace]

I've added the CDATA wrapper to each of the html elements in my returned array, but i am not getting the results I expected. I did the following alerts to check and below are the results...

alert(xmlHttp.responseXML.getElementsByTagName("string").length);
(returns 4, what I expect)

alert(xmlHttp.responseXML.getElementsByTagName("string")[0].childNodes.length);
(returns 1, expected)

alert(xmlHttp.responseXML.getElementsByTagName("string")[1].childNodes.length);
(returns 223, expected a 1 since it has a CDATA wrapper)

alert(xmlHttp.responseXML.getElementsByTagName("string")[2].childNodes.length);
(returns 1573, expected a 1 since it has a CDATA wrapper)

alert(xmlHttp.responseXML.getElementsByTagName("string")[3].childNodes.length);
(returns 519, expected a 1 since it has a CDATA wrapper)

alert(xmlHttp.responseXML.getElementsByTagName("string")[1].childNodes[0].nodeName);
(returns lt )

alert(xmlHttp.responseXML.getElementsByTagName("string")[1].childNodes[0].nodeValue);
(returns null )

alert(xmlHttp.responseXML.getElementsByTagName("string")[1].childNodes[1].nodeName);
(returns #text )

alert(xmlHttp.responseXML.getElementsByTagName("string")[1].childNodes[1].nodeValue);
(returns ![CDATA[ )

It seems as though it is still parsing the  < symbols and creating new nodes based on that despite being wrapped in a CDATA. Any ideas ? I've searched around, but found nothing.

[staktrace]

> I've added the CDATA wrapper to each of the html elements in my returned array,

You want to wrap the whole thing in a single CDATA, not a CDATA per html element.

[jmace]

I'm sorry, I think i was misunderstood.

I only wrapped each full HTML snippet inside of a CDATA.

<string>503</string> 
<string><![CDATA[<font size=3 color="Gold"><I>last updated: 1/8/2010 7:15:00 AM</I></font><table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;'><tr align='left' valign='top'><td align='left' valign='top'>Description</td><td align='left' valign='top'>Value</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Current Day Volume</td><td align='left' valign='top'>74</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Previous Day Volume</td><td align='left' valign='top'>1415</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Differential Pressure</td><td align='left' valign='top'>58.97</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Corrected Flow Rate</td><td align='left' valign='top'>1429.04</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Pressure</td><td align='left' valign='top'>65.72</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tubing Pressure</td><td align='left' valign='top'>101.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Casing Pressure</td><td align='left' valign='top'>385.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Separator Pressure</td><td align='left' valign='top'>68.86</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tank 1 Level</td><td align='left' valign='top'>74.66</td></tr></table>]]></string>
...

[jmace]

I have tried another work-around with poor results.

I have added a ~ to the front and back end of each <string> (example below). Then, on the widget side I've split the responseText and inserted those elements into the innerHTML of my div. The problem is that I get my HTML snippet as text in my div and not the actual table that is in the HTML.

XML example
<string>~503~</string> 
<string>~<font size=3 color="Gold"><I>last updated: 1/8/2010 7:15:00 AM</I></font><table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;'><tr align='left' valign='top'><td align='left' valign='top'>Description</td><td align='left' valign='top'>Value</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Current Day Volume</td><td align='left' valign='top'>74</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Previous Day Volume</td><td align='left' valign='top'>1415</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Differential Pressure</td><td align='left' valign='top'>58.97</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Corrected Flow Rate</td><td align='left' valign='top'>1429.04</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Pressure</td><td align='left' valign='top'>65.72</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tubing Pressure</td><td align='left' valign='top'>101.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Casing Pressure</td><td align='left' valign='top'>385.09</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Separator Pressure</td><td align='left' valign='top'>68.86</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tank 1 Level</td><td align='left' valign='top'>74.66</td></tr></table>~</string>  . . .

Widget side
...
var theAnswers = xmlHttp.responseText.split("~");
document.getElementByID('MidDiv').innerHTML = theAnswers[3]);  
//theAnswers[3] corresponds to the table above

[tneil]

Hi jmace,

I have been working with a widget internally that is doing exactly what you are trying to do.. go out and grab some HTML and replace the InnerHtml of a local div.  It is all working without any issue.

My guess is that it could either by a syntax error in your script or something else.  I will post up the code that I am using on Monday to see if you can copy it and get it to work in your scenario.

Cheers,

[jmace]

thanks Tim, hopefully your code will help me track down this issue. 

[tneil]

Here is my code.  I just retrieve the html content (which in this case is a <div> statement without all the <html><head><body> tags).

I then grab the <div> element I want to replace locally and set its innerHTML.  When I looked at your first post I noticed you were performing a "getElementsById" where you had "Elements" instead of "Element" which may have been your issue.

Not sure, but give the below code a try and see if it works for you.

var xmlhttp = new XMLHttpRequest();
var url = "http://mydomain/mypage.htm";    
xmlhttp.onreadystatechange = function(){
 if(xmlhttp.readyState==4)
 {	 
    var contentElement = document.getElementById("bodyContent");
    listElement.style.visibility = "hidden";
    // Load and Initialize our Add screen
    contentElement.innerHTML = xmlhttp.responseText;	
 }
}

xmlhttp.open("GET",url,false); 
xmlhttp.send(null);

[jmace]

I commented out my ajax code and replaced it with yours (copy and paste). After switching in my url, my results are still not what I expect.