0

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.


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).

4

1 回答 1

1

在您的成功回调中:

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/>';
    });
},

看起来您正在构建 HTML 字符串newRow,但实际上并没有将它插入到 DOM 的任何地方。您需要执行类似的操作$(document.body).append($(newRow))(如果您想将其添加到 HTML 正文的末尾,这只是一个示例)。

于 2013-08-17T08:36:50.087 回答