Problema refresh pagina con Ajax...

di
pollat
il
2 risposte
P
pollat
Pochi posts
Iscritto da
mar, 2014
Messaggi:
21

Problema refresh pagina con Ajax...

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:

<?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:

<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

2 Risposte

  • P
    pollat
    Pochi posts
    Iscritto da
    mar, 2014
    Messaggi:
    21

    Re: Problema refresh pagina con Ajax...

    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:
    complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);

    e in particolare l'ultima riga ossia: 
    
     status.html(xhr.responseText);

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

    qualcuno può aiutarmi???
  • P
    pollat
    Pochi posts
    Iscritto da
    mar, 2014
    Messaggi:
    21

    Re: Problema refresh pagina con Ajax...

    Comincio a capirci qualcosa... 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);
Devi accedere o registrarti per scrivere nel forum
2 risposte