onerror attribute in <object> tag

Question

I am currently trying to play a list of .wav file using the VLC plugin and the html object tag in the following manner :

$.each(rdata['results'],function(key,data)
{
    newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
    newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
    newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
}

EDIT : The entire function definition :

function fnFormatDetails ( apiUrl, baseUrl  )
{
    var newRow = "";
    var audioUrl;

    $.ajax({
    type: "GET",
    url: apiUrl,
    async: false,
    contentType : "text/json",

    beforeSend:function()
    {
        image.src = "img/ajax-loader.gif";
    },

    success: function(data) 
    {
        console.log("success from " + apiUrl);
        var rdata = $.parseJSON(data);

        $.each(rdata['results'],function(key,data){
            audioUrl = baseUrl + data['recordingId'];
            newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
            newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
            newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
        });
    },

    error: function(xmlhttprequest,textstatus,message){

        if(textstatus === "timeout")
            alert("Read timeout. Try again after some time");
        else if(xmlhttprequest.status == 500)
            alert("Sorry! connection reset by third party server");
    },

    complete:function(){
        image.src = saveSrc;
    }   
}); 
newRow = newRow.substring(0,newRow.length - 5);
return newRow;
    //------------------------------------------------------------  
};

I also have the error function defined as follows :

function error()
{
    alert("Resource load error");
}

However, even when the audioUrl throws up an internal server error, onerror does not get fired. Could someone please tell me why this is happening ?

Thanks.

Answer 1

In your success callback here:

success: function(data) 
{
    console.log("success from " + apiUrl);
    var rdata = $.parseJSON(data);

    $.each(rdata['results'],function(key,data){
        audioUrl = baseUrl + data['recordingId'];
        newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
        newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
        newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
    });
},

It looks like you are constructing the HTML string in newRow, but you are not actually inserting it into the DOM anywhere. You need to do something like $(document.body).append($(newRow)) (just an example if you wanted to add it to the end of the HTML body).