how to appendchild in a ajax get function(msg)?

i have this code function, im trying to get an html and appendchild a li into the html received in msg but not working

function handleFileSelect(evt)
{
    var files = evt.target.files;
    $('#visor_zone').fadeOut(600);
    $('#visor_zone').empty();
    $.ajax(
    {
        url: '/home/visor_publicacion',
    }).done(function(msg)
        {
            var html=msg;
            for (var i = 0, f; f = files[i]; i++)
            {
                if (!f.type.match('image.*')) 
                {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var li = document.createElement('li');
                        li.innerHTML = ['<li><a><img ref="', e.target.result,'" src="', e.target.result,'"/></a><span>esta es la foto agregada</span></li>'].join('');
                        //li.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
                        html.getElementById('pikame').appendChild(li);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
            $('#visor_zone').fadeIn(600,function()
                {
                    $('#visor_zone').html(html);
                    $("#pikame").PikaChoose({autoPlay:false});
                });

        });
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

it doesnt work but this next work why is that what is the diference between thoses

function handleFileSelect(evt)
{
    var files = evt.target.files;
    $('#visor_zone').fadeOut(600);
    $('#visor_zone').empty();
    $.ajax(
    {
        url: '/home/visor_publicacion',
    }).done(function(msg)
        {
            $('#visor_zone').html(msg);
            for (var i = 0, f; f = files[i]; i++)
            {
                if (!f.type.match('image.*')) 
                {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var li = document.createElement('li');
                        li.innerHTML = ['<li><a><img ref="', e.target.result,'" src="', e.target.result,'"/></a><span>esta es la foto agregada</span></li>'].join('');
                        //li.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
                        document.getElementById('pikame').appendChild(li);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
            $('#visor_zone').fadeIn(600,function()
                {
                    $("#pikame").PikaChoose({autoPlay:false});
                });

        });
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answers


var html=msg;

The reason of failure of first one is calling javascript on methods on string which requires to be executed on DOM

var html=msg; has html in string not dom so you can not execute javascript method on it which work on DOM

$('#visor_zone').html(msg);

The reason for the success of second one is the above statement, recevived msg string is assigned to dom as html of visor_zone element, which makes it possible for javascript methods to work on received messsage html (which became part of DOM)


Need Your Help

angularJS using service variable

javascript angularjs iframe

I need to call the service variable in controller.

PHPExcel - Using example read fiter

php filter spreadsheet phpexcel

I'm just getting started with PHPExcel. My very large spreadsheets cannot be loaded whole into memory (memory fail). To only load the parts of the worksheet I need, I'm trying to use the MyReadFilter

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.