Shinyshell Community Forums > Coding >
XML and JavaScript


[1]


March 06 02010, 02:55 GMT
Pikachu
Kelp is good!

Pikachu's avatar
Location: California
Post count: 50
us
Okay, I've discovered the sheer easiness of creating a Google Chrome extension, so now I'm trying to do just that. I'm developing a Prayer Times (a timetable thing for Muslims so that they know if it's time to pray when they're browsing the web) and I'm using XML instead of a MySQL database for the extension. This is an example of how the XML page looks:
<?xml version="1.0" encoding="UTF-8" ?> 
<praytimes>
<month name="January">
<day value="1">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:56</dhuhr>
<asr>14:36</asr>
<sunset>16:55</sunset>
<magrib>17:12</magrib>
<isha>18:09</isha>
</day>
<day value="2">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:57</dhuhr>
<asr>14:37</asr>
<sunset>16:55</sunset>
<magrib>17:12</magrib>
<isha>18:09</isha>
</day>
<day value="3">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:57</dhuhr>
<asr>14:38</asr>
<sunset>16:56</sunset>
<magrib>17:13</magrib>
<isha>18:10</isha>
</day>
</month>
</praytimes>
<?xml version="1.0" encoding="UTF-8" ?>
<praytimes>
<month name="January">
<day value="1">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:56</dhuhr>
<asr>14:36</asr>
<sunset>16:55</sunset>
<magrib>17:12</magrib>
<isha>18:09</isha>
</day>
<day value="2">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:57</dhuhr>
<asr>14:37</asr>
<sunset>16:55</sunset>
<magrib>17:12</magrib>
<isha>18:09</isha>
</day>
<day value="3">
<imsaak>05:29</imsaak>
<fajr>05:39</fajr>
<sunrise>06:58</sunrise>
<dhuhr>11:57</dhuhr>
<asr>14:38</asr>
<sunset>16:56</sunset>
<magrib>17:13</magrib>
<isha>18:10</isha>
</day>
</month>
</praytimes>
]]>


I'm having a problem being able to select the times of a specific date in Javascript. Say I want the time for "asr" on the "1" of "January". How would I do that in JavaScript? I want to be able to change months and days as well. This is what I have so far in JavaScript:
 <html>
 <head>
 <style type="text/css">
 body {
   min-width: 357px;
   overflow-x: hidden;
 }
 </style>
 </head>
 <body>
 
 <p><b>Imsaak:</b> <span id="imsaak"></span><br />
 <b>Fajr:</b> <span id="fajr"></span></p>
 
 <script type="text/javascript">
 xhttp = new XMLHttpRequest()
 
 xhttp.open("GET","praytimes.xml",false);
 xhttp.send("");
 xmlDoc = xhttp.responseXML;
 
 document.getElementById("imsaak").innerHTML = xmlDoc.getElementsByTagName("imsaak")[0].childNodes[0].nodeValue;
 document.getElementById("fajr").innerHTML = xmlDoc.getElementsByTagName("fajr")[0].childNodes[0].nodeValue;
 </script>
 </body>
 </html>
 
<html>
<head>
<style type="text/css">
body {
min-width: 357px;
overflow-x: hidden;
}
</style>
</head>
<body>

<p><b>Imsaak:</b> <span id="imsaak"></span><br />
<b>Fajr:</b> <span id="fajr"></span></p>

<script type="text/javascript">
xhttp = new XMLHttpRequest()

xhttp.open("GET","praytimes.xml",false);
xhttp.send("");
xmlDoc = xhttp.responseXML;

document.getElementById("imsaak").innerHTML = xmlDoc.getElementsByTagName("imsaak")[0].childNodes[0].nodeValue;
document.getElementById("fajr").innerHTML = xmlDoc.getElementsByTagName("fajr")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
]]>


Thanks, dudes.
______________________________

Linux | Chrome | Python | Chuck

March 07 02010, 22:36 GMT
SpaceMan
Member

SpaceMan's avatar
Location: Earth
Post count: 32
ca
Here is the example code of how it should be done.
 const monthNames = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
 var date = new Date();
 var monthName = monthNames[date.getMonth()], day = date.getDay();
 
 // A list of /praytimes/month nodes
 var months = xmlDoc.documentElement.childNodes, month;
 // loop through all /praytimes/month nodes
 for (var i in months) {
   // here is how to access attribute
   if (months[i].attributes.getNamedItem("name") == monthName) {
     // found it.
     month = months[i];
     break;
   }
 }
 
 var days = month.childNodes, day;
 // find the /praytimes/month/day
 for (var i in days) {
   if (days[i].attributes.getNamedItem("value") == day) {
     day = days[i];
     break;
   }
 }
 
 // lazy programming technique
 var list = ["imsaak", "fajr", "sunrise", "dhuhr", "asr", "sumset", "magrib", "isha"];
 for (var i in list) {
   var time = list[i];
   // /praytimes/month/day/<time>.text
   document.getElementById(time).innerHTML = day.getElementsByTagName(time)[0].firstChild.nodeValue;
 }
 
 // how do you handle unfilled data?
 
const monthNames = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var date = new Date();
var monthName = monthNames[date.getMonth()], day = date.getDay();

// A list of /praytimes/month nodes
var months = xmlDoc.documentElement.childNodes, month;
// loop through all /praytimes/month nodes
for (var i in months) {
// here is how to access attribute
if (months[i].attributes.getNamedItem("name") == monthName) {
// found it.
month = months[i];
break;
}
}

var days = month.childNodes, day;
// find the /praytimes/month/day
for (var i in days) {
if (days[i].attributes.getNamedItem("value") == day) {
day = days[i];
break;
}
}

// lazy programming technique
var list = ["imsaak", "fajr", "sunrise", "dhuhr", "asr", "sumset", "magrib", "isha"];
for (var i in list) {
var time = list[i];
// /praytimes/month/day/<time>.text
document.getElementById(time).innerHTML = day.getElementsByTagName(time)[0].firstChild.nodeValue;
}

// how do you handle unfilled data?
]]>

I don't know if it works, I can't test it.

For this type of data, you should consider alternatives such as JSON and plaintext, XML is too "fat".


[1]



Forum Information
  Currently Active Members [detailed] (0 members and ? guests)
-
Forum Statistics
Topics: 0, Posts: 0, Members: 108.
Welcome to our newest member, adamthephantump
Most members online was 5, on August 28 2009, at 21:49:28.
Legend
    Forums with unread topics in them are indicated by a strong yellow colouring around the forum icon.
    Forums with no unread topics have the standard pale yellow colouring around the forum icon.
    Forums with a blue arrow icon will redirect you to a non-forum page.
    Locked forums have a little padlock by their icon. You won't be able to post in these forums.
Shinyshell Home | Contact | Staff List | Archive | Top 

Conventional Login

Don't have an account? You may want to create one.

OpenID Login
OpenID login and registration is usable, but not finished.
What is OpenID?
Search

(advanced search)
Site Stats
  Total members: 108
  Latest member: adamthephantump
  Members currently online: 0
  Most online: 5 - Aug 28, 2009 (21:49)
  Front page hits: 87993
Developer info
  Site version: 3.5 Alpha
  16 queries - 9 templates
Under the Spotlight
Collide Site
Collide make fabulously dreamy electronic-industrial music, they're one of my favourite bands! Give them a chance to take control of your life - myspace | youtube - "Euphoria".

Collide Site - Hits: 4596

5/5 (2) | Rate this site?