jquery ajax error only IE and mobile browsers

Question

I have been trying to fix this for a while now.

I have an ajax call to a php script which simply echos html back with data results. Chrome, firefox work find but IE and using any mobile browsers do not work. Since I can't get errors from the mobile browser I focused on the IE error which doesn't mean much to me and I cannot find any google or stack answers.

What am I doing wrong?

My ajax call:

$('#search').keyup(function(){
    var details = $(this).val();

    $.ajax({
        url: '/assets/php/users/profile/ajax_searchjob.php',
        type: 'POST',
        data: 'title='+details,
        success: function(data){

            $('#target_field').html(data);
            //alert(data);

            //hide form snippet after ajax has loaded
            $('.form-tag').hide();

        },
        error: function(){
            alert('There was an error connecting to server.  Please contact your administrator');
        }

    });//END OF AJAX
});

IE highlights $('#target_field').html(data); in the debugger, halts and produces this error:

//creating functionality for time entry removal 
                                            $('#modal-action-btn').click(function(){

                                                $.ajax({
                                                    type: 'post',
                                                    url: '/assets/php/users/profile/ajax_timesheet_remove_entry.php',
                                                    data: 'id='+ID+'&job='+job+'&user='+user,
                                                    success: function(){
                                                        cache.parent().parent().remove();
                                                    },
                                                    error(){
                                                        alert('There was a problem making the hour removal request.  Please contact your administrator');
                                                    }

                                                }); //END OF AJAX

                                            }); //END OF TIME ENTRY REMOVAL FUNCTION

possible solution here: http://stackoverflow.com/questions/782532/ie-not-triggering-jquery-ajax-success — GrafiCode, Oct 02 '15 at 18:16
`console.log(data)` include in your question. My best guess is it isn't valid html. — Kevin B, Oct 02 '15 at 18:33
@GrafiCodeStudio Thanks I've tried the solutions in that link and it didn't work. dataTypes and cache: false. I sitll have the problem — gstlouis, Oct 02 '15 at 18:34
@KevinB I added console.log, coincidentally I found html coding violations so I corrected them hoping for the answer and it still didn't work. — gstlouis, Oct 02 '15 at 18:56
can you try a non-minified version of jQuery so we can go to the source? — Kevin B, Oct 02 '15 at 18:58
@KevinB I have added the result error with the un-compressed. I still don't get it. it seems to think I'm trying to do tertiary or failing on a tertiary in the library? — gstlouis, Oct 02 '15 at 19:09
Cool, now we might be getting somewhere. Does your ajax result include a — Kevin B, Oct 02 '15 at 19:09
Does ie let you put breakpoints? If so, put one on that eval and see what `data` contains. — Kevin B, Oct 02 '15 at 19:11
@KevinB yes the ajax result bring back a pretty big payload. should I include it in my edits above? IE doesn't let me modify anything — gstlouis, Oct 02 '15 at 19:15
I wouldn't include the whole thing, just the inline scripts. One of them is using something that doesn't execute in Ie. — Kevin B, Oct 02 '15 at 19:17
ya, I just got it working man. So the ajax results I get back, there is yet another ajax in there as well. I removed that specific function snippet and at least the result is working. I will add the function ajax snippet that seems to be the culprit — gstlouis, Oct 02 '15 at 19:21
`error(){` isn't supported in IE yet. :) that's an es6 feature. — Kevin B, Oct 02 '15 at 19:22
@KevinB you've got to be F* kidding me. ya man it all works, IE, blackberry and ipad. I can be safe to assume the rest. Thanks for pointing that out for me. let me know how I vote for you. — gstlouis, Oct 02 '15 at 19:29

score 1 · Accepted Answer · answered Oct 02 '15 at 19:26

To debug this, start by including the non-minified version of jQuery, this will give you an error message you can debug.

In this case, it pointed to the part of .html that goes through inline script tags and evals them, meaning, one of your inline scripts are throwing an error. The script in question is:

//creating functionality for time entry removal 
$('#modal-action-btn').click(function () {
    $.ajax({
        type: 'post',
        url: '/assets/php/users/profile/ajax_timesheet_remove_entry.php',
        data: 'id=' + ID + '&job=' + job + '&user=' + user,
        success: function () {
            cache.parent().parent().remove();
        },
        error() {
            alert('There was a problem making the hour removal request.  Please contact your administrator');
        }
    }); //END OF AJAX
}); //END OF TIME ENTRY REMOVAL FUNCTION

You have a typo (well, i'm assuming it's a typo, but either way) in the above code here:

error() {
    alert('There was a problem making the hour removal request.  Please contact your administrator');
}

This works in modern browsers that are starting to support ES6, but not in IE yet, so you'll have to rewrite it to:

error: function () {
    alert('There was a problem making the hour removal request.  Please contact your administrator');
}

jquery ajax error only IE and mobile browsers

1 Answers1