modificar propiedades style en elementos generdos por AJAX

protoameeba · #1 (**permalink**) 12/10/2013, 01:57

Hola,

me he econtrado con un problema bastante curioso... resulta que por ajax subo multiples imagenes en un uploader input file (multiple) y despues muestro en una lista los nombres de las imagenes que se quieren subir...

bien, hasta ahi todo claro. El problema aparece cuando al darle a subir, las procesa...
antes de copiarlas, quiero mostrar un preloader para cada una, al que le doy una id (unica obviamente) y despues cuando se ha copiado vacio con innerHTML el div del nombre y el preloader...

pues el "jodio" me hace bien lo del innerHTML pero no lo de cambiar el style????

alguien sabe por qué?

estas son las lineas de codigo que uso...

Código PHP:

Ver originalecho"<script type='text/javascript' language='javascript'>document.getElementById('preloader$doneCounter').style.display='none';</script>";
                    copy($_FILES['files']['tmp_name'][$key], './upload/'.$name);
                    echo'<script type="text/javascript" language="javascript">document.getElementById("tempImg'.$doneCounter.'").innerHTML="";</script>';

y ya he probado con className pero tampoco tira...

caricatos · #2 (**permalink**) 12/10/2013, 02:18

Hola:

Las líneas php en este foro no cuentan... deberías copiar lo que aparece en "ver código fuente" de tu navegador...

Saludos

protoameeba · #3 (**permalink**) 12/10/2013, 07:36

Hola Caricatos, pues el codigo html es este:

Código HTML:

Ver original<html>
    <head>
        <title>Ajax image upload</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/uploader.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function ()
            { 
            $('body').on('click','.upload', function()
            {
            var form = new FormData($('#myform')[0]);
            $.ajax(
            {
            url:'action.php',
            type:'POST',
            xhr: function()
            {
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload)
            {}
            return myXhr;
            },
 
            success: function (res)
            {
            $('#content_here_please').html(res);
            },
            data:form,                      
            cache: false,
            contentType:false,
            processData:false
            });
            });
            });
        </script>
        
    <script type="text/javascript" language="javascript">
        $(document).ready(function ()
        {
        if (window.File && window.FileReader && window.FileList && window.Blob)
        {
        function handleFileSelect(evt)
        {
            var files=evt.target.files;
            var output=[];
            
            var idNumbers=1;
            for (var i=0, f; f=files[i]; i++)
            {
                output.push('<div id=tempImg'+idNumbers+' style="width:500px;"><div style="float:left; width:484px;">', f.name, ' - ', f.size, ' bytes</div><div id="preloader'+idNumbers+'" style="display:block; float:left;"><img src="images/ajax-loader.gif"/></div></div>');
                idNumbers++;
            }
            
            document.getElementById('list').innerHTML=output.join('');
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
        }
        });
    </script>
    </head>
    <body>
        <form enctype="multipart/form-data" id="myform">
            <input id="files" type="file" accept="image/*" multiple name="files[]"/>
            <br>
            <input type="button" value="Upload images" class="upload"/>
        </form>
        <hr>
        <div id="content_here_please"></div>
          <div id="list">
            <div id="tempImg1" style="width:500px;">
                <div style="float:left; width:484px;">
                    hackeado.jpg - 23 bytes
                </div>
                <div id="preloader1" style="display:block; float:left;">
                    <img src="images/ajax-loader.gif">
                </div>
            </div>
            
            <div id="tempImg2" style="width:500px;">
                <div style="float:left; width:484px;">
                    img_profil_big.jpg - 28749 bytes
                </div>
                <div id="preloader2" style="display:block; float:left;">
                    <img src="images/ajax-loader.gif">
                </div>
            </div>
            
            <div id="tempImg3" style="width:500px;">
                <div style="float:left; width:484px;">
                    logo.jpg - 23760 bytes
                </div>
                <div id="preloader3" style="display:block; float:left;">
                    <img src="images/ajax-loader.gif">
                </div>
            </div>
        </div>
    </body>
</html>

No se porque me deja hacer esto en javascript:

Código Javascript:

Ver original<script type="text/javascript" language="javascript">document.getElementById("tempImg1").innerHTML="";</script>

pero esto no

Código Javascript:

Ver original<script type='text/javascript' language='javascript'>document.getElementById('preloader1').style.display='none';</script>