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('');
            }
        });
........

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('');
            }
        });
........

• javascript
• jquery

• Have you tried Safari/Windows? – Pointy Commented Jan 31, 2011 at 16:42
• 2 Also, what exactly is it that goes wrong? – Pointy Commented Jan 31, 2011 at 16:42
• Just not to duplicate post. Probably this could help: stackoverflow./a/18514269/1872856 – Alex Commented Aug 29, 2013 at 15:10

3 Answers 3

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.

I have no idea what's wrong, but generally speaking, here is what you can do with Mobile Safari and IE that es 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. pete() handler will execute whenever the ajax had succeed of failed. Try to catch the variables too.

The problem is the cache. Add this line of code and the problem should be solved.

$.ajaxSetup({ cache: false });