Problema refresh pagina con Ajax...

pollat · 19 Apr 2014

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:

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 (quella 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:

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

pollat · 19 Apr 2014

in pratica 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:

HTML:

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

e in particolare l'ultima riga ossia:

HTML:

     status.html(xhr.responseText);

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

qualcuno può aiutarmi???

flameseeker · 19 Apr 2014

Ajax non è un linguaggio a se, è sempre javascript e deduci bene: la riga che hai isolato è quella che fa aggiornare il responso della richiesta nel div status.

Se vuoi ricaricare la pagina commenta l'istruzione

status.html(xhr.responseText);

e aggiungi subito sotto (per far operare il refresh):

self.location.href = self.location.href;

pollat · 19 Apr 2014

flameseeker ha scritto:
Ajax non è un linguaggio a se, è sempre javascript e deduci bene: la riga che hai isolato è quella che fa aggiornare il responso della richiesta nel div status.

Se vuoi ricaricare la pagina commenta l'istruzione

e aggiungi subito sotto (per far operare il refresh):

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

flameseeker · 19 Apr 2014

Invece di printare l'output dovresti memorizzarlo in una sessione di PHP e successivamente istruisci un controllo atto a printartene il contenuto quando presente.

Andando in ordine dovresti:

1. Mantenere la modifica che ti ho suggerito prima

2. Inserire il session_start() ad inizio script:

PHP:

<?php
session_start(); 

// 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
# ... resto dello script

3. Modificare i tuoi output affinché vengano invece scritti nella sessione (è un esempio, devi farlo su tutti i messaggi)

PHP:

$_SESSION['status'] = "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è troppo grande, caricare file di max 100 MB!.<span><br>";

4. Realizzare un controllo così che se è presente un messaggio nel valore di sessione 'status' lo printi in output (cosa che avviene col refresh della pagina)

PHP:

if (!empty($_SESSION['status'])) {
    echo $_SESSION['status'];
    unset($_SESSION['status']);
}

pollat · 19 Apr 2014

ma non è possibile più semplicemente dirottare la risposta finale di ajax su tutta la pagina invece che sul solo div "status" ???

come dicevo sostituire:

satus.html (xhr.responseText);

con:

"tutta la pagina" (xhr.responseText);

flameseeker · 19 Apr 2014

Se vuoi sovrascrivere l'intero body della pagina con ciò che ti ritorna ajax puoi farlo tranquillamente:

Codice:

$('body').html(xhr.responseText);

Di soluzioni ce ne sono di vario tipo, dipende da cosa vuoi ottenere.

pollat · 19 Apr 2014

flameseeker ha scritto:
Se vuoi sovrascrivere l'intero body della pagina con ciò che ti ritorna ajax puoi farlo tranquillamente:

Codice:

$('body').html(xhr.responseText);

Di soluzioni ce ne sono di vario tipo, dipende da cosa vuoi ottenere.

Siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii.... questo volevo... ora è ok!!!

Tanks a lot

pollat · 19 Apr 2014

flameseeker ha scritto:
Di soluzioni ce ne sono di vario tipo, dipende da cosa vuoi ottenere.

quali altre soluzioni ci sono per ottenere los tesso risultato ?????

un difettoi di questa è che dalla nuova pagina che appare non funzioan più il modulo per effettuare l'upload...

MMDesign · 19 Apr 2014

Quel difetto accade perchè :

PHP:

$('body').html(xhr.responseText);

va ad aggiornare solo i tag body e il tuo script php si trova all'esterno dei tag html/body se non erro e quello l'errore mi capitò una volta...

pollat · 19 Apr 2014

MMDesign ha scritto:
Quel difetto accade perchè :

PHP:

$('body').html(xhr.responseText);

va ad aggiornare solo i tag body e il tuo script php si trova all'esterno dei tag html/body se non erro e quello l'errore mi capitò una volta...

mmmmmmmmm... e come lo risolvo questo problema ora??????

MMDesign · 19 Apr 2014

spostando lo script php sopra nei tag <body></body

pollat · 19 Apr 2014

MMDesign ha scritto:
spostando lo script php sopra nei tag <body></body

Ho risolto spostando le funzioni ajax fuori-sopra il tag body... che faticaaaaa peròòòòòòòò!!!!!

pollat · 22 Apr 2014

Sembrava troppo bello...
mi da lo stesso problema... ossia nella pagina di risposta non funziona più il modulo per effettuare l'upload dei file nel senso che cliccando il tasto per l'upload non succede nulla come se non prendesse il POST

flameseeker · 22 Apr 2014

Il problema è che sovrascrivendo il body i listener di javascript saltano e il tuo modulo di conseguenza non funziona più.
Penso che tu possa risolvere racchiudendo in una funzione l'assegnazione della chiamata asincrona per l'upload, chiamandola poi dopo la scrittura del responso.

Codice:

function UploadListener() { 

$('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%"); 
$('body').html(xhr.responseText);
UploadListener();
} 
}); 

}

Chiaramente, subito dopo la dichiarazione va eseguita la funzione altrimenti al primo caricamenti della pagina non ti funziona il modulo:

Codice:

UploadListener();

Fammi sapere come va

pollat · 23 Apr 2014

male.. non ho ben capito come fare e cmq. su explorer non funziona la barra...

Cerca

Cerca

Problema refresh pagina con Ajax...

pollat

Utente Attivo

pollat

Utente Attivo

flameseeker

Utente Attivo

pollat

Utente Attivo

flameseeker

Utente Attivo

pollat

Utente Attivo

flameseeker

Utente Attivo

pollat

Utente Attivo

pollat

Utente Attivo

MMDesign

Utente Attivo

pollat

Utente Attivo

MMDesign

Utente Attivo

pollat

Utente Attivo

pollat

Utente Attivo

flameseeker

Utente Attivo

pollat

Utente Attivo

Discussioni simili