Adding search with jQuery and Check Boxes
Finally, the Trip Finder is ready for action! First of all, this tutorial will not deal with much of the PHP needed to generate the interface and make it work. That has already been done in the PHP Doctrine series.
If you just stumbled right into this series and have no idea what MODx is you might want to start with the introduction.
In this tutorial we will focus on what is happening in the world of Javascript, HTML and CSS, starting with the JS:
$(document).ready(function(){
loadFlash("[*images_url*]");
$.post("[(base_url)]trip_selector/Destination/searchForm", {}, function(res){
$("#tripselector").html(res);
$("#search_button").click(function(){
var checked = new Array();
$("input:checked").each(function(i){
checked.push(parseInt(this.value));
});
var json = $.toJSON(checked);
$.post("[(base_url)]trip_selector/Destination/search", {asp: json}, function(res){
$("#col3_content").html(res);
});
});
});
});Everything is new here except the loadFlash function. First we begin by making an Ajax call to a PHP script at [(base_url)]/trip_selector/Destination/searchForm. That script will return the HTML for our check boxes and insert it in the div with id tripselector:
<div id="tripselector">
<br>
<h5>I want:</h5>
<label><input name="Asp[]" value="1" id="Asp" type="checkbox">Whale Sharks</label><br>
<label><input name="Asp[]" value="8" id="Asp" type="checkbox">Manta Rays</label><br>
<label><input name="Asp[]" value="9" id="Asp" type="checkbox">Remote</label><br>
<label><input name="Asp[]" value="10" id="Asp" type="checkbox">Developed</label><br>
<label><input name="Asp[]" value="11" id="Asp" type="checkbox">Night Life</label><br>
<label><input name="Asp[]" value="12" id="Asp" type="checkbox">Wrecks</label><br>
<label><input name="Asp[]" value="13" id="Asp" type="checkbox">Macro</label><br>
<br>
<input id="search_button" value="Submit" type="button">
</div>Once we have our new HTML we can start working with it. When the button with id search_button is clicked we will get all checked inputs (input:checked). We will put each value (id of the feature, aspect or attribute, call it what you want) in the checked array. Observe the use of parseInt(this.value).
At first I was simply storing each value as is, not a good idea since Smarty is doing value=”x”. jQuery JSON will store these values as strings in the JSON representation of the array.
When trying json_decode in the PHP on this array I got nothing, nada. I don’t know whose “fault” this is, if it even is someones fault. However, you would think that for instance jQuery JSON would be clever enough to realize that an array of “1” and “2” should be encoded as [1, 2], not [“1”, “2”]. On the other hand, such cleverness might not be a part of the JSON spec. Anyway, I had some frustrating moments there that I could have lived without before I realized I had to explicitly convert each value with parseInt.
The check boxes were too close to the text in the labels, that had to be taken care of with the following CSS:
#tripselector input{
margin: 2px 4px 2px 4px;
}Finally we display the result we get back from trip_selector/Destination/search in the div with id col3_content.
Some final notes, the way of generating the GUI through an Ajax call on each page view is not really effective as we get several roundtrips to the server on each view. More efficient would have been to somehow try to integrate this in the MODx code but I’m lazy and wanted quick results.