jQuery ajax not working in iOS

Question

One of our engineers just brought his iPad over to me and showed a feature not working on our site. This works in Chrome and Firefox, but it doesn't work on the iPhone or iPad. It's 3 select boxes that when you click the value in the first one, it runs ajax and populates the 2nd select box.

This is the functionality that doesn't work in iOS.

We're a bit stumped on where to begin testing this. Can anyone provide some advice on where to begin debugging this or can you see anything we did wrong?

    $().ready(function () {
        $('.vehicle-search .make').bind('click', function (e) {
            var makeId = $(e.target).val();
            var container = $(e.target).parent('.vehicle-search');
            if (parseInt(makeId) > 0) {
                $.ajax({
                    url:  site.internal.url + '/lib/ajax/vehicle/make/getModelList.php',
                    type: 'post',
                    dataType: 'json',
                    success: function (r) {
                        if (r.length > 0) {
                            $('.vehicle-search > .model').html('');
                            $('.vehicle-search > .year').html('');

                            var html = '';
                            for (var i = 0; i < r.length; i++) {
                                html += "<option value='"+r[i].id+"'>"+r[i].name+"</option>";
                            }

                            $('.vehicle-search > .model').html(html);
                        } else {
                            alert('We did not find any models for this make');
                        }
                    },
                    error: function () {
                        alert('Unable to process your request, ajax file not found');
                        return false;
                    },
                    data: {
                        makeId: makeId
                        }
                });
            } else {
                $('.vehicle-search > .model').html('');
                $('.vehicle-search > .year').html('');
            }
        });
........

Answer 1

Bind to the change event of the <select> instead of the click event.

Also, you should enable the Developer Console for the iPad so that you can see any JS errors that may or may not be occurring.

In the future, put in console.log statements in event handlers as a sanity check to see if they are getting called at all, and if they are to determine at what point they are failing.

Answer 2

I have no idea what's wrong, but generally speaking, here is what you can do with Mobile Safari and IE that comes with no handly debug console.

1. Add some alert() to your code to at least find out when did the script stop.
2. you event handlers doesn't receive any variable except r in success(r). Look into the doc, you will find variables that you could probe or alert() that could help you what's really going on. Especially the error() handler.
3. compete() handler will execute whenever the ajax had succeed of failed. Try to catch the variables too.