Debugging Javascript in IE 8

Question

I'm trying to debug an issue that I'm only having in IE8. It works fine in IE 9+, and chrome. I'm using Aspera to select a file, and am calling a custom function on a callback. the function is as follows;

function uploadPathsRecieved(pathsArray) {
   var file_path_selector = '#file_path';
   ...
   $(file_path_selector).text(''); // (*)
   ...
}

On the (*) line, I get an error that file_path_selector is undefined. This didn't make much sense to me, so after some playing around to get a feel for the problem, I wound up with the following code:

function uploadPathsRecieved(pathsArray) {
  var x = 3;
  var y = 4;
  var z = x + y;
  z += 2;
  $('#file_path').text(''); // (*)
  ...
}

When I run the program with this code, I still get the error "file_path_selector is undefined" at the (*) line. I'm out of ideas on what the next steps I should take to try and hunt down this problem are.

My gut feeling tells me that there's something being cached, but if I move the (*) line around, the error follows it, and the script window reflects the changes that I make to it.

Here's the Aspera code that's calling my function:

function wrapCallbacks(callbacks) {
    return wrapCallback(function() {
      var args, i;
      try {
        args = Array.prototype.slice.call(arguments);
        for ( i = 0; i < args.length; i++) {
          if (isObjectAndNotNull(args[i]) && isDefined(args[i].error)) {
            // error found
            if (isDefined(callbacks.error)) {
              callbacks.error.apply(null, args);
            }
            return;
          }
        }

        // success
        if (isDefined(callbacks.success)) {
          callbacks.success.apply(null, args);
        }
      } catch (e) {
        AW.utils.console.error(e.name + ": " + e.message);
        AW.utils.console.trace();
      }
    });
  }

And here's the entirety of my function, as it exists right now:

var uploadPathsRecieved = function uploadPathsRecieved(pathsArray) {
    //var file_path_selector = '#file_path';
    var x = 3;
    var y = 4;
    var z = x + y;
    z += 2;
    $('#file_path').text('');

    var button_selector = '#select_aspera_file';
    var textbox_selector = '.aspera_textbox';
    /*if (uploadPathsRecieved.fileSelecting == 'cc_file') {
        file_path_selector = '#cc_file_path';
        button_selector = '#select_cc_file';
        textbox_selector = '.cc_aspera_textbox';
    } else if (uploadPathsRecieved.fileSelecting == 'preview_file') {
        file_path_selector = '#preview_file_path';
        button_selector = '#select_preview_file';
        textbox_selector = '.preview_aspera_textbox';
    }*/

    App.AsperaUploadPaths = [];
    if (pathsArray.length == 1) {
        $(button_selector).text("Clear File");
        App.AsperaUploadPaths = pathsArray;
        var error_message = pathsArray[0];
        $(button_selector).parent().children(textbox_selector).text(error_message).removeClass('error');
        //$(file_path_selector).attr('value', pathsArray[0]);
    }
    else 
    {
        var error_message = 'Please select a single file';
        $(button_selector).parent().children(textbox_selector).text(error_message).addClass('error');
    }
}

Answer 1

Solved it. file_path was an <input> , and IE 8 and below doesn't allow you to add text or html to inputs. I fixed it by changing $(file_path_selector).text(''); to $(file_path_selector).attr('value', '');