XHTML compliant with ampersands in the URL

I was having a few problems creating a page with ampersands in the URL. This is a quick fix if it’s part of the HTML by using & but if it’s part of a javascript, it will take the code literally. For example, let’s say you have a javascript function that sends you to a URL when you click a button.

<script type=”text/javascript”>

function clickMe() {
window.location = ‘http://www.google.com/search?q=javascript+ampersand+xhtml&client=firefox-a’;
}

</script>

If you are concerned about being XHTML compliant, you will get an “unknown entity section” error. You can get some more info of the error here http://htmlhelp.com/tools/validator/problems.html. You cannot use “&” in the URL of that javascript function. You can use &amp; (HTML) or &#38; (ASCII). It will solve your error but depending on the browser/version, it will send the code to the URL and will result in an error – especially if your code is dependent on the querystring. To fix this you can use CDATA.

/*<![CDATA[*/

window.location = 'http://www.google.com/search?q=javascript+ampersand+xhtml&client=firefox-a';

/*]]*/

The /**/ ignores the lines of code but because your document is XML formatted, CDATA parse the line in between properly (http://www.w3schools.com/xml/xml_cdata.asp). I got answer from http://www.liferay.com/community/forums/-/message_boards/message/2657431#_19_message_2873280.

jQuery Form Variables

I have been messing around with jQuery for a couple of days now and I think I’m getting the hang of it. Before using jQuery, I was using Mootools for processing forms to divs. It worked as intended but what I couldn’t do was create new javascript within the loaded pages. As interfaces get more complicated, the code started to grow and was getting more difficult to follow. On top of that, I wanted to do more with Mootools than just load pages in divs. I tried to read documents and articles from their website but was hard to follow. I bought a book but to me it was still a bit confusing. I even posted a couple on the forums but didn’t get much help. So I started to look for another framework and found jQuery.

jQuery has many examples and demos on their website and has a large community of developers creating plugins. One of the things I needed to figure out was how to pass form variables using jQuery. I found a sample code on their website but I just couldn’t get it to work – http://docs.jquery.com/Ajax/jQuery.post. I couldn’t pass the form variable over. Their sample code was

$.post(“page.php”, {var1: “var1″, var2: “var2″}, function(data) { alert(data);});

So I started to play around with it more and was able to get it to work. Here’s the new code now based on the example.

$.post(“page.php”, {‘var1′: $(‘#var1′).val(), ‘var2′: $(‘#var2′).val()},function(data){alert(data);});

After reading a few comments about this function, a couple suggested to use serialize() but I have yet to figure that out. At least my variables are passing as they should. The same syntax for the variables can be applied to $.get.

If you are going to copy to code above, make sure you are using apostrophes. For some reason, it’s displaying the “tick” symbol which is the one sharing the key with the tilde ~ on your keyboard. It looks like an apostrophe but more slanted. So be aware of that.