Problema refresh pagina con Ajax...

pollat

Utente Attivo
10 Ott 2013
63
0
6
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
 
Ultima modifica:

pollat

Utente Attivo
10 Ott 2013
63
0
6
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

Utente Attivo
27 Nov 2013
699
0
0
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

Utente Attivo
10 Ott 2013
63
0
6
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

Utente Attivo
27 Nov 2013
699
0
0
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

Utente Attivo
10 Ott 2013
63
0
6
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

Utente Attivo
27 Nov 2013
699
0
0
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

Utente Attivo
10 Ott 2013
63
0
6
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
 

MMDesign

Utente Attivo
15 Apr 2014
76
0
0
Google Inc.
www.mmwebservice.it
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

Utente Attivo
10 Ott 2013
63
0
6
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??????
 

pollat

Utente Attivo
10 Ott 2013
63
0
6
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

Utente Attivo
27 Nov 2013
699
0
0
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

Utente Attivo
10 Ott 2013
63
0
6
male.. non ho ben capito come fare e cmq. su explorer non funziona la barra...
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Problema refresh della pagina dopo il submit? HTML e CSS 4
P problema refresh pagina PHP 1
M Problema caricamento immagini - refresh pagina PHP 7
E Problema refresh PHP PHP 3
A problema con refresh frame laterale Javascript 2
O Problema con refresh/form PHP 0
M Problema refresh e didascalie HTML e CSS 2
V problema refresh di un div Javascript 4
D Problema refresh automatico HTML e CSS 1
A Problema refresh immagine PHP 0
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0

Discussioni simili