Sending a text string with %20 to your Proxy Pass-Through

I thought I had everything working after my last post about “Building your Proxy Pass-Through URL”. As it turns out everything works fine till you have, in my case, a space between City spellings. I remembered seeing a post about that problem so I logged in and found Jassin's post about Parsing Errors. That gave me a clue about what I needed to do to make my stuff work but I really didn’t want to change my PHP and it looked like a lot of work to replace spaces with %20 in PHP. This is what I did instead:

I used a switch statement because I needed to map our Trail Map City to the Active.com City and define an event_City variable depending on which city is selected.

switch(event_City)
{
case 'tallahassee':
var event_City = "Tallahassee" + "%20" + "-" + "%20" + "Thomasville";
no_event_City = "Tallahassee - Thomasville";
break;
}

You can see that I took Jassin's advice and used it to build my City strings with %20 instead of spaces. However after doing that I still couldn’t get it to work and, it seemed to give me the same results as passing my city string in with spaces.

After playing with that for a while I decided to try something Josh used with the Yahoo Weather API. This function, encodeURIComponent(), encodes special characters as well as these characters: , / ? : @ & = + $ #.

I really wasn’t sure if this would work because it seemed that I would need to decode my string on the server end. Well, you can believe that I was not only surprised but extremely happy when I used encodeURIComponent(event_City) and it worked!!! I didn’t have to change anything with my PHP proxy pass-through.

This is my original url: var url = 'active.php?path=' + event_City;

And, this is my new url: var url = 'active.php?path=' + encodeURIComponent(event_City);

So all I really needed to do to get this to work was to build the string with %20 instead of spaces and send it to my PHP with encodeURIComponent(event_City).

JavaScript Switch Statement and Hiding elements

I have been planning to hide some images in my personal project and cycle through them when a button is clicked but never managed to get to that. However, after placing a Utube video on the Home page of our group project and then having one of our group members add Weather information, via an API, we discussed having one present on our Home page and the other present on a different page.

So I decided to experiment with hiding / un-hiding the Utube video and Weather forecast on our website. Initially, I started by using some IF statements but that got a little messy so I decided to use a JavaScript switch statement instead. This is what I came up with:



Basically, the switch statement takes the variable ‘title’ and depending, on what its value is, executes some statements. This is so much cleaner than using a bunch of IF / ELSE statements.

If ‘title’ equals ‘Trails’ or ‘Events’ then specific things are preformed according to the code defined in the relevant section, otherwise, the default section is executed.

The only other thing I had to do to hide / un-hide the Utube video or Weather forecast was to define a CSS class of ‘hidden’ or ‘unhidden’ and place the action (hide / un-hide) in the proper section of the switch statement.



The only thing you need to decide is whether to use visibility: hidden or display: none. Visibility hidden hides the element but it still takes up space and display: none removes the element completely from the document. When un-hiding an element you can either use display: block or display: inline. Display block only allows one element of its kind to be displayed (starts a new paragraph). Display inline allows multiple elements to be displayed on one line. There are a few more display properties but I am not currently concerned with them.