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

**cavicchiandrea** · 19-04-2014, 11:38

Quel jquery.form.js cosa fa? E togli il php che confonde, un link alla pagina pubblica sarebbe l'ideale

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

Originariamente inviata da cavicchiandrea

Quel jquery.form.js cosa fa? E togli il php che confonde, un link alla pagina pubblica sarebbe l'ideale

cosa fa jquery.form.js non lo so... so solo che invece di aggiornarmi tutta la pagina mi fa apparire la pagina di risposta in una sorta di frame sotto il modulo di upload ( credo nel div "status")... e credo la parte incriminata sia questa:

codice HTML:

complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);

e in particolare l'ultima riga ossia:

codice HTML:

     status.html(xhr.responseText);

ma non conosco ajax e non so come cambiarla facedogli fare il refresh dell'intera pagina...

**cavicchiandrea** · 19-04-2014, 14:28

Sperando che la tua diagnosi (da profano) sia corretta togli la riga incriminata e la sostituisci con location.reload(), anche la logica di usare ajax che serve per non ricaricare la pagina e a processo ultimato ricaricare la pagina lo trovo contraddittorio comunque se piace a te.
Se non dovesse andare non penso ci siano altre soluzioni spicciole da darti e opterei sul documentarsi sia sullo script e un pochino su js, oppure la preghiera sperando in un miracolo

**pollat** · 19-04-2014, 14:33

Originariamente inviata da cavicchiandrea

Sperando che la tua diagnosi (da profano) sia corretta togli la riga incriminata e la sostituisci con location.reload(), anche la logica di usare ajax che serve per non ricaricare la pagina e a processo ultimato ricaricare la pagina lo trovo contraddittorio comunque se piace a te.
Se non dovesse andare non penso ci siano altre soluzioni spicciole da darti e opterei sul documentarsi sia sullo script e un pochino su js, oppure la preghiera sperando in un miracolo

Comincio a capirci qualcosa ma la soluzione sopra non va bene del tutto... io devo far apparire la risposta di ajax non nel div status (richiamato con "status.html") ma nell'intera pagina che non so come si richiama in ajax...

ossia devo sostituire:

satus.html (xhr.responseText);

con:

"tutta la pagina" (xhr.responseText);

**cavicchiandrea** · 19-04-2014, 15:51

Ma forse ti sfugge la prerogativa di ajax che (come già detto) è non ricaricare la pagina, non credo sia possibile quello che vorresti fare

**pollat** · 19-04-2014, 15:55

Originariamente inviata da cavicchiandrea

Ma forse ti sfugge la prerogativa di ajax che (come già detto) è non ricaricare la pagina, non credo sia possibile quello che vorresti fare

si lo so...ma ajax fa partire ed eseguire la progress bar e funziona bene il problema è che alla fine dell'esecuzione di ajax la risposta deve andare a tutta la pagina e non ad un solo div...

**cavicchiandrea** · 19-04-2014, 16:05

Originariamente inviata da pollat

si lo so...ma ajax fa partire ed eseguire la progress bar e funziona bene il problema è che alla fine dell'esecuzione di ajax la risposta deve andare a tutta la pagina e non ad un solo div...

Ho capito cosa vorresti fare, ma per me non è possibile

**pollat** · 19-04-2014, 16:29

ma scusa, possibile che con ajax non si possa richiamare l'intera pagina ma solo un div ?????
se con status.html si richiama il div "status" esisterà un modo per richiamare l'intera pagina????

**cavicchiandrea** · 19-04-2014, 16:43

Prova a sostituire
status.html(xhr.responseText);
con
$('body').html(xhr.responseText);

Discussione: Problema refresh pagina con Ajax...

Strumenti discussione

Ricerca discussione

Visualizza

Problema refresh pagina con Ajax...

Permessi di invio