Problema refresh pagina con Ajax...

**pollat** · 19-04-2014, 11:12

Ho un problema alla fine dell'esecuzione di uno script:
in pratica alla fine di uno script php per upload ho aggiunto una progress bar in ajax che funziona benone ma al raggiungimento del 100% invece di aggiuìornare l'intera pagina (come avveniva prima) fa apparire la pagina aggiornata sotto il modulo di upload come in una sorta di frame...

Come posso evitare questo e far aggiornare l'intera pagina come avveniva prima ??
lo script è il seguente:

codice HTML:

<?php
// scrip multiupload 
$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp", "tif", "psd", "pdf", "doc", "docx", "txt", "xls", "xlsx", "mid", "mp3", "wav", "ogg", "dwg", "dxf", "svg", "zip", "rar", ); 
$max_file_size = 10024*10000; //100000 kb
$path = "cartellaupload/"; // Cartella di upload
$count = 0;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    // Loop $_FILES to execute all files
    foreach ($_FILES['files']['name'] as $f => $name) {     
        if ($_FILES['files']['error'][$f] == 4) {
            continue; // Skip file if any error found
        }           
            //controllo il peso del file (in base a quello impostato sopra)
            // per far visualizzare i messaggi all'interno del box verde sostituire "echo" con "$message[] ="
        if ($_FILES['files']['error'][$f] == 0) {               
            if ($_FILES['files']['size'][$f] > $max_file_size) {
                echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è troppo grande, caricare file di max 100 MB!.<span><br>";
                continue; // Skip large files
            }
        //controllo il formato del file (in base a quelli impostati sopra)
            elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
                echo "<br><span id='colore_errore_upload';>ATTENZIONE: il file ' $name ' ha un formato non valido.</span><br><span id='colore_suggerimento__errore_upload';> I formati supportati sono: jpg, jpeg, gif, png, tif, psd, pdf, doc, docx, txt, xls, xlsx, mid, mp3, wav, ogg, dwg, dxf, svg, zip, rar. <span><br>";
                continue; // Skip invalid file formats
            }
        //controllo l'esistenza del file per evitare sovrascrizioni
                else{ 

                if(!file_exists($path.$name))
                {
                  move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name);
                  $count++; // Number of successfully uploaded file                 
} 
                
                else{
                    echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è già esistente nell'elenco.</span><br><span id='colore_suggerimento__errore_upload';>  Cambiare nome al file e caricarlo nuovamente.</span><br>";
                                }
  }
  }
  }
}
?>


<body>
<div class="wrap">
        <?php
        # error messages
        if (isset($message)) {
            foreach ($message as $msg) {
                printf("<p id=colore_successo_upload; class='statusupload'>%s</p></ br>\n", $msg);
            }
        }
        # success message
        if($count !=0){
            printf("<p id=colore_successo_upload; class=statusupload>%d file aggiunto/i correttamente !</p>\n", $count);
        }
        ?>
        <br />
                <!-- Multiple file upload html form-->
                  <form action="" method="post" enctype="multipart/form-data" onSubmit="showSpindle()" method="POST"/>
                    Carica uno o più file:
                    <input type="file" name="files[]" multiple="multiple" style="width: 300px"/>
                    <input type="submit" class="tastoupload" value="Carica"/>

        <!-- Progress bar-->
       <div class="progress" id="spindle" style="display:none">  
             <div class="bar"></div >  
             <div class="percent">0%</div >  
       </div>  
       <div id="status"></div>  
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  
       <script src="http://malsup.github.com/jquery.form.js"></script>  
       <script>  
 (function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })();      
 </script>          

<script type="text/javascript">
    function showElem(elem_id,elem_type) 
    {
        var elem = document.getElementById(elem_id);
        if (elem) 
        {
            if (elem_type) 
            elem.style.display = elem_type;
        else 
        {
            if (elem.nodeName == "DIV"
            || elem.nodeName == "TABLE"
            || elem.nodeName == "UL"
            || elem.nodeName == "OL"
            || elem.nodeName == "H1"
            || elem.nodeName == "H2"
            || elem.nodeName == "H3"
            || elem.nodeName == "H4"
            || elem.nodeName == "P") 
                            
                elem.style.display = 'block';
                            
            else if (elem.nodeName == "TR") elem.style.display = 'table-row';
            else if (elem.nodeName == "TD") elem.style.display = 'table-cell';
            else if (elem.nodeName == "LI") elem.style.display = 'list-item';
            else elem.style.display = 'inline';
        }
    }
} 
            
function showSpindle() 
{
    showElem('li_inserted_pics');
    showElem('spindle');
} 
        
</script>
</div> 
                </form>
</body>

se tolgo la funzione finale della progress bar funziona tutto correttamente e al raggiungimento del 100% mi aggiorna correttamente tutta la pagina per cui la parte incriminata è l'ultima ossia questa:

codice HTML:

<div class="progress" id="spindle" style="display:none">  
             <div class="bar"></div >  
             <div class="percent">0%</div >  
       </div>  
       <div id="status"></div>  
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  
       <script src="http://malsup.github.com/jquery.form.js"></script>  
       <script>  
 (function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })();      
 </script>          

<script type="text/javascript">
    function showElem(elem_id,elem_type) 
    {
        var elem = document.getElementById(elem_id);
        if (elem) 
        {
            if (elem_type) 
            elem.style.display = elem_type;
        else 
        {
            if (elem.nodeName == "DIV"
            || elem.nodeName == "TABLE"
            || elem.nodeName == "UL"
            || elem.nodeName == "OL"
            || elem.nodeName == "H1"
            || elem.nodeName == "H2"
            || elem.nodeName == "H3"
            || elem.nodeName == "H4"
            || elem.nodeName == "P") 
                            
                elem.style.display = 'block';
                            
            else if (elem.nodeName == "TR") elem.style.display = 'table-row';
            else if (elem.nodeName == "TD") elem.style.display = 'table-cell';
            else if (elem.nodeName == "LI") elem.style.display = 'list-item';
            else elem.style.display = 'inline';
        }
    }
} 
            
function showSpindle() 
{
    showElem('li_inserted_pics');
    showElem('spindle');
} 
        
</script>

potete aiutarmi...??? Thanks

Discussione: Problema refresh pagina con Ajax...

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Problema refresh pagina con Ajax...

Permessi di invio