Day 16 – Project Transit Notifier

To do: Work on javascript so I can have all the stops available and my interactive map!

My form that need JQuery, Ajax and XML to populate Available buses
My form that need JQuery, Ajax and XML to populate Available buses

What I did: I started working on writing my Ajax request- a method that from your website(client) can access information from the server without having to get a whole new page- to  to be able to use my XML. I have an XML that contains all the stops for San Fransisco’s Muni transit. My plan is for when my user selects the transit line from my form, it’ll send a ajax request to my server to get the XML for that transit line and to display all the inbound stop options on my Available Stop drop down menu. So the ajax is getting the XML, but I need to use JQuery (a method of Javascript that can modify and “read” the DOM – which is what is created when html, css and all that jazz comes together for your browser) as an event listener.

It pulls all the bus stop ids from the direction tag and then uses that number to go through all the stops and fins the id with the same number and pulls the title, lat and lon
It pulls all the bus stop ids from the direction tag and then uses that number to go through all the stops and fins the id with the same number and pulls the title, lat and lon

All this means is that when my user selects a transit line, my JQuery is “listening” for the value change or for the “click” and then send the information that was selected (because it can access the DOM) with an Ajax to get the XML for that particular line. As a default, it’ll select all the “Inbound” stops because my website is defaulted to that. So then my user can select a stop by its name.

Ajax request
Ajax request

This is awesome! So I was able to write a Ajax request that grabs from my XML all the stop ids that are Inbound stops and with that data to go back to the XML and grab the title (name) of the stop….

My results on the console
My results on the console

So…. now that I know this works, I need to work on the JQuery event listener and I think I need to make my ajax into two parts. One that works when the route changes and one that works when the bound changes. Once I get these then I can feed it into my html and hopeful *cross fingers* be able to put an interactive map and make it super awesome.

To do Tomorrow: Work on making my JQuery event listener to pull the value of the selected transit line


My Thoughts/Process: I felt good today. I was able to write my ajax request to get the id from inbound, but I got stuck on using data and go back in and get the title. It was a nice feeling to be successful on my first function for javascript. I did do something that is counter what I normally do and I just starting writing code without thinking about the events and transfer of data. I think it had to do with the fact that I haven’t written in javascript that I just jumped in. But now that I have something functional, I am going back and drawing out my game plan so I have a course of attack.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s