<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Programming Life &#187; JavaScript</title>
	<atom:link href="http://blog.coding.ro/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.coding.ro</link>
	<description>Coding Through Life</description>
	<lastBuildDate>Fri, 13 Jan 2012 09:03:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Loading and parsing XML from JavaScript using AJAX calls</title>
		<link>http://blog.coding.ro/loading-and-parsing-xml-from-javascript-using-ajax-calls/</link>
		<comments>http://blog.coding.ro/loading-and-parsing-xml-from-javascript-using-ajax-calls/#comments</comments>
		<pubDate>Fri, 11 Sep 2009 21:10:12 +0000</pubDate>
		<dc:creator>sonix</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[loading XML]]></category>
		<category><![CDATA[parsing XML]]></category>
		<category><![CDATA[XML]]></category>
		<category><![CDATA[XMLHttpRequest]]></category>

		<guid isPermaLink="false">http://blog.coding.ro/?p=83</guid>
		<description><![CDATA[Loading and parsing XML from JavaScript using AJAX calls made easy.]]></description>
			<content:encoded><![CDATA[<p>Just the other day I was building a small in-place application/page and I needed to load some XML data using AJAX.</p>
<p>I&#8217;ll just post here the code as I believe a good example is better than a week of training.</p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p83code1'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p831"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
</pre></td><td class="code" id="p83code1"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//---- this function is a wrapper for XMLHttpRequest and is not mine (although I use it for years)</span>
<span style="color: #003366; font-weight: bold;">function</span> XHConn<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> xmlhttp<span style="color: #339933;">,</span> bComplete <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlhttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Msxml2.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlhttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlhttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> xmlhttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>xmlhttp<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">connect</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>sURL<span style="color: #339933;">,</span> sMethod<span style="color: #339933;">,</span> sVars<span style="color: #339933;">,</span> fnDone<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
	  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>xmlhttp<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	  bComplete <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	  sMethod <span style="color: #339933;">=</span> sMethod.<span style="color: #660066;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	  <span style="color: #000066; font-weight: bold;">try</span>
	  <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>sMethod <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
		  xmlhttp.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>sMethod<span style="color: #339933;">,</span> sURL<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;?&quot;</span><span style="color: #339933;">+</span>sVars<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  sVars <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span>
		<span style="color: #009900;">&#123;</span>
		  xmlhttp.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>sMethod<span style="color: #339933;">,</span> sURL<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  xmlhttp.<span style="color: #660066;">setRequestHeader</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Method&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;POST &quot;</span><span style="color: #339933;">+</span>sURL<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; HTTP/1.1&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  xmlhttp.<span style="color: #660066;">setRequestHeader</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Content-Type&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;application/x-www-form-urlencoded&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		xmlhttp.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
		  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>xmlhttp.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>bComplete<span style="color: #009900;">&#41;</span>
		  <span style="color: #009900;">&#123;</span>
			bComplete <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			fnDone<span style="color: #009900;">&#40;</span>xmlhttp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  <span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		xmlhttp.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span>sVars<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	  <span style="color: #009900;">&#125;</span>
	  <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>z<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//---- we make a call to load categories.xml file found in the same folder as the current page</span>
<span style="color: #006600; font-style: italic;">//---- and we forward the response to be processed by a callback function called &quot;procGetCategories&quot;</span>
<span style="color: #003366; font-weight: bold;">function</span> getCategories<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> ajaxConn  <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XHConn<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   
	sParams 	  <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	ajaxConn.<span style="color: #660066;">connect</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;http://&quot;</span><span style="color: #339933;">+</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">hostname</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;/categories.xml&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span> sParams<span style="color: #339933;">,</span> procGetCategories<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> procGetCategories<span style="color: #009900;">&#40;</span>objReturn<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    xmlDoc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #006600; font-style: italic;">//Internet Explorer</span>
	<span style="color: #009900;">&#123;</span>
		xmlDoc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLDOM&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		xmlDoc.<span style="color: #660066;">async</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #339933;">;</span>
		xmlDoc.<span style="color: #660066;">loadXML</span><span style="color: #009900;">&#40;</span>objReturn.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// all the others (Opera I'm not sure though .... never tested this on Opera)</span>
	<span style="color: #009900;">&#123;</span>
		parser <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> DOMParser<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		xmlDoc<span style="color: #339933;">=</span>parser.<span style="color: #660066;">parseFromString</span><span style="color: #009900;">&#40;</span>objReturn.<span style="color: #660066;">responseText</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;text/xml&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> root <span style="color: #339933;">=</span> xmlDoc.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> catName<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> catId<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> x<span style="color: #339933;">=</span>root.<span style="color: #660066;">childNodes</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//---- categories node in my case</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>x.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>x<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">nodeType</span><span style="color: #339933;">==</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			catId   <span style="color: #339933;">=</span> x<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">nodeValue</span><span style="color: #339933;">;</span>
			catName <span style="color: #339933;">=</span> x<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">nodeValue</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">//---- here you can do whatever you want with the received data. I chosed to create some buttons using &quot;createCategButton&quot; function</span>
			createCategButton<span style="color: #009900;">&#40;</span>catId<span style="color: #339933;">,</span> catName<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>   	
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>The code is quite simple and clear.<br />
Beware though, there is a size limit when it comes to the receiving data length (around 4000 characters) so either split the data in multiple files or manage the data on the JavaScript side.</p>
<p>Happy coding to all of you.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.coding.ro/loading-and-parsing-xml-from-javascript-using-ajax-calls/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript Confirmation Box</title>
		<link>http://blog.coding.ro/javascript-confirmation-box/</link>
		<comments>http://blog.coding.ro/javascript-confirmation-box/#comments</comments>
		<pubDate>Tue, 13 May 2008 14:54:03 +0000</pubDate>
		<dc:creator>sonix</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[confirm]]></category>
		<category><![CDATA[confirmation box]]></category>
		<category><![CDATA[confirmation dialog]]></category>

		<guid isPermaLink="false">http://blog.coding.ro/?p=15</guid>
		<description><![CDATA[JavaScript can display a nice confirmation box that will allow your script to test user&#8217;s choice when necessary. The JavaScript &#8220;confirm&#8221; result is of type boolean. The following example should clear things for you: ?View Code JAVASCRIPT1 2 3 4 5 6 7 8 9 10 var yesorno = confirm&#40;&#34;Do you like PHP?&#34;&#41;; &#160; if&#40; [...]]]></description>
			<content:encoded><![CDATA[<p>JavaScript can display a nice confirmation box that will allow your script to test user&#8217;s choice when necessary.</p>
<p>The JavaScript &#8220;confirm&#8221; result is of type boolean. The following example should clear things for you:</p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p15code3'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p153"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p15code3"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> yesorno <span style="color: #339933;">=</span> <span style="color: #000066;">confirm</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Do you like PHP?&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> yesorno <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;You like PHP, great...&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">else</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Don't like it? Nobody cares anyway.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.coding.ro%2Fjavascript-confirmation-box%2F&amp;title=JavaScript%20Confirmation%20Box" id="wpa2a_2"><img src="http://blog.coding.ro/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.coding.ro/javascript-confirmation-box/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

