problemas con script Jquery en Opera

WinderJerter · #1 (**permalink**) 12/01/2010, 21:39

hola que tal, les cuento, lo que pasa es que ando haciendo un script con jquery, el cual su función es que al darle click al input submit este se oculte y el div divLoading (el cual tiene un display:none; en un archivo CSS ) aparezca mostrando una imagen "GIF" y un texto "Subiendo imagen. Por favor espere…", pero el problema es que en el navegar Opera no funciona el script y en los otros navegadores si: FF, IE, Safari y Chrome.

Aqui les pongo el código del script para ver si me pueden echar la mano en corregir el error o si se puede mejorarle se los agradecería mucho

Código Javascript:

Ver originalfunction hideButton()
    {
            $("#sendButton").fadeTo("fast", 0.00);
            $("#divLoading").show("fast");
            $("#divLoading").fadeTo("fast", 1.00);
    }

Código HTML:

<input type="submit" id="sendButton" value="Upload!" onClick="hideButton()" />

<div id="divLoading"><span>Subiendo imagen. Por favor espere…</span>
<br><img src="images/loading.gif" /><br></div>

Saludos y gracias de antemano

WinderJerter · #2 (**permalink**) 14/01/2010, 15:00

Perdón por reflotar el tema, es que todavía no puedo solucionar esto,,, alguien que me pueda ayudar?

Saludos y nuevamente gracias de antemano

mayid · #3 (**permalink**) 14/01/2010, 17:11

No te respondi antes porque el codigo se ve bien. Pero me gustaria saber que es puntualmente lo que falla, siendo que tenes toda una cadena de eventos.

Es el primer evento el que no funciona?

Cita:

$("#sendButton").fadeTo("fast", 0.00);

Probaste hacer un alert dentro de la funcion para ver si en Opera se hace el llamado a la funcion?

WinderJerter · #4 (**permalink**) 14/01/2010, 17:30

Cita:

Iniciado por mayid

No te respondi antes porque el codigo se ve bien. Pero me gustaria saber que es puntualmente lo que falla, siendo que tenes toda una cadena de eventos.

Es el primer evento el que no funciona?

Cita:

$("#sendButton").fadeTo("fast", 0.00);

Probaste hacer un alert dentro de la funcion para ver si en Opera se hace el llamado a la funcion?

hola que tal mayid, si, esa y las otras funciones no me sirven en Opera y no, no he probado con el alert es que no se como, estoy verde para el Jquery

EDIT: Otra cosa que he visto que pasa en Opera, es que si la imagen se esta subiendo no funciona el script pero si detengo la pagina hace ambas funciones del script, oculta el input submit y muestra el div oculto.

saludos y gracias por responder

mayid · #5 (**permalink**) 15/01/2010, 07:32

La verdad, a mi no me convencen los numeritos 0.0 y 1.0

Para el caso, en jQuery yo usaria:

Cita:

function hideButton()
{
$("#sendButton").fadeOut("fast");
$("#divLoading").show("fast");
$("#divLoading").fadeIn("fast");
}

Uso Opera hace alos y no tengo problemas con hide show, etc.

Una cosa mas: que cabecera html usas? html4 ? Xhtml? Estricto, de transición? Publicala por favor.

WinderJerter · #6 (**permalink**) 15/01/2010, 13:05

Hola que tal, te cuento, ya le provee así como tu mencionas:

Cita:

function hideButton()
{
$("#sendButton").fadeOut("fast");
$("#divLoading").show("fast");
$("#divLoading").fadeIn("fast");
}

y deja de funcionar el script; por cierto utilizo XHTML 1.0 Strict.

Saludos y gracias de antemano

mayid · #7 (**permalink**) 15/01/2010, 13:14

Entonces hay que arreglar tu xhtml. En la muestra que distes hay un par de cosas mal escritas. Pero claro, esto es secundario.

Cita:

<input type="submit" id="sendButton" onclick="hideButton()">Value!</input>

<div id="divLoading"><span>Subiendo imagen. Por favor espere…</span>
<br /><img src="images/loading.gif" alt="" /><br /></div>

Marque cosas en azul. Acordate de cerrar todas las etiquetas, y de que todo va en minusculas (es onclick y no onClick)

Por que no lo validas en http://validator.w3.org/ ? Creo que es buena idea.

Pero no se por que Opera no te reconoce las funciones. Deberian funcionar. Y no creo que Opera sea tan malo como para invalidar una pagina si no esta bien escrita. Que serà?

WinderJerter · #8 (**permalink**) 15/01/2010, 14:03

Cita:

Iniciado por mayid

Entonces hay que arreglar tu xhtml. En la muestra que distes hay un par de cosas mal escritas. Pero claro, esto es secundario.

Marque cosas en azul. Acordate de cerrar todas las etiquetas, y de que todo va en minusculas (es onclick y no onClick)

Por que no lo validas en http://validator.w3.org/ ? Creo que es buena idea.

Pero no se por que Opera no te reconoce las funciones. Deberian funcionar. Y no creo que Opera sea tan malo como para invalidar una pagina si no esta bien escrita. Que serà?

Buenas mayid, lo de validación anda todo bien; otra cosa que he visto que pasa en Opera, es que si la imagen se esta subiendo no funciona el script pero si detengo la pagina hace ambas funciones del script, oculta el input submit y muestra el div oculto, por lo que pienso que opera primero sube la iamgen y después hace las funciones, en ese caso que tendria que hacer para solucionarlo ya que por mis propios conocimientos en Jquery no lograría nada

Saludos

mayid · #9 (**permalink**) 15/01/2010, 16:29

Falta codigo. No pusistes todo el html. Donde esta la etiqueta form?

Tampoco publicaste la funcion entera, porque si estas enviando una foto (haciendo un upload) es claro que tiene que haber un mecanismo ajax detras de todo esto. Si no, como te mantenes en la misma pagina?

Publica mas.

Y pensemos en otros eventos. En vez de onclick... onsubmit. Pero esto recien luego de ver tu funcion de uploads.

WinderJerter · #10 (**permalink**) 15/01/2010, 17:55

Cita:

Iniciado por mayid

Falta codigo. No pusistes todo el html. Donde esta la etiqueta form?

Tampoco publicaste la funcion entera, porque si estas enviando una foto (haciendo un upload) es claro que tiene que haber un mecanismo ajax detras de todo esto. Si no, como te mantenes en la misma pagina?

Publica mas.

Y pensemos en otros eventos. En vez de onclick... onsubmit. Pero esto recien luego de ver tu funcion de uploads.

hola que tal mayid, esta es la etiqueta del formulario:

Código HTML:

<form action="upload.php" method="post" enctype="multipart/form-data"> 
    Archivo: <input type="file" name="file" id="input-file" /><br>
    
    <br>
    <input type="checkbox" name="checktitle" id="checkalt" onclick="if(this.checked==false)this.form.addtitle.disabled=true;else this.form.addtitle.disabled=false" />Agregar titulo:
    <input type="text" name="addtitle" id="addtitle" disabled="disabled" /><br>
    
    <br>

    <input type="checkbox" name="checklink" id="checklink" onclick="if(this.checked==false)this.form.addlink.disabled=true;else this.form.addlink.disabled=false" />Agregar vínculo: http://
    <input type="text" name="addlink" id="addlink" disabled="disabled" /><br>
    
    <br>
    Por seguridad, escriba el texto que se muestra en la imagen:<br>
    <div id="panelCaptcha"><input type="text" name="tmptxt" />
    <img src="captcha.php" id="captcha" /> 
    <input type="button" id="reload-captcha" title="Recargar captcha" onclick="reloadCaptcha()" /></div>
    <span id="span-captcha">Sensible entre mayúsculas y minúsculas.</span><br>

    
    <br>
    <input type="submit" id="sendButton" value="Upload!" onClick="hideButton()" />
    <div id="divLoading"><span>Subiendo imagen. Por favor espere…</span>
    <br><img src="images/loading.gif" /><br></div>

</form>

y el script para subir las imágenes es este (creado por Pato12

)

Te cuando que he cambiado el onclick() por el onsubmit() y no funciona

Saludos y gracias de antemano

mayid · #11 (**permalink**) 16/01/2010, 07:59

Hola. onsubmit() va en la etiquta form si mal no recuerdo.

A ver si interpreto bien. El codigo original de Pato12 no contempla que te quedes en la misma pagina mientras se hace el upload. Pero vos agregaste un evento onclick para que no haya cambio de pagina, cierto?

Donde esta el script ajax? Como se estan enviando los datos del formulario si no hay cambio de pagina? Lo que publicastes primeramente fueron solo funciones hide y show... pero nada de ajax.

Pregunto porque seguramente se dispara la subida y recien luego los efectos. Como lo haces?

WinderJerter · #12 (**permalink**) 16/01/2010, 13:34

Hola que tal mayid,

Cita:

A ver si interpreto bien. El código original de Pato12 no contempla que te quedes en la misma pagina mientras se hace el upload. Pero vos agregaste un evento onclick para que no haya cambio de pagina, cierto?

R: No, tando el en script de Pato12 como en el mio ya con las modificaciones, cuando subes la imagen (mediante php) que queda en la misma pagina de donde esta el formulario mientras se carga la imagen.

El evento onclick esta en el input subtmit para que cuando se envié el formulario y mientras carga la imagen que se va a subir; se oculte el input submit y se muestre un div oculto que contiene una imagen GIF y un texto simulando una barra de progreso.

Cita:

Donde esta el script ajax? Como se estan enviando los datos del formulario si no hay cambio de pagina? Lo que publicastes primeramente fueron solo funciones hide y show... pero nada de ajax.

R: Creo que con la respuesta anterior te resuelvo esta, pero si no si quieres te la explico

Saludos

mayid · #13 (**permalink**) 16/01/2010, 18:49

Entonces la verdad no entiendo el script. Siempre que hagas click te vas a ir de la pagina. Y no hay que esperar que nada mas se ejecute. Como es que te funciona en otros navegadores? No se.

mayid · #14 (**permalink**) 16/01/2010, 19:17

Creo que la unica manera de tener una barra de progresion real (no falseada) es combinando jquery y flash. COsa que ya se hizo varias veces. Podes bajarte por ejemplo uploadify, pero hay muchos mas.

Estos combos flash + jquery + ajax estan pensados mas que nada para uploads multiples... que necesitan progress bar. Pero si vas a cargar una sola imagen que pese mas de 500kb tambien es buena idea usarlos.

http://www.uploadify.com/demo/

http://pixeline.be/experiments/jqUploader/test.php

http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

http://valums.com/wp-content/uploads...emo-jquery.htm

De todas maneras, para upload de una sola imagen igual conviene usar un script prefabricado. Un ajax form. Los scripts prefabricados por lo general permiten hacer cosas en pantalla antes de enviar algo, mientras se esta enviando algo, y cuando se recibe respuesta de ok o error.

mayid · #15 (**permalink**) 16/01/2010, 19:18

Aca hay un ejemplo de envio de formulario por ajax. Creo que se hace con metodos nativos de jquery, sin necesidad de plugins...

Cita:

$("#btnProcesar").click(function (){
$.ajax({
type: "POST",
url: "process.php",
data: "Nombre=" + $(nombre).val() + "&Apellido=" + $(apellido).val(),
dataType: "script",
beforeSend: function(objeto){
$("#invitaciones").html("Mensaje: Cargando...");
},
success: function(msg){
$("#invitaciones").animate({width:400, height:400}, "slow");
$("#invitaciones").html(msg);
},
error: function(objeto, quepaso, otroobj){
alert("ERROR! : "+quepaso);
}

});

WinderJerter · #16 (**permalink**) 16/01/2010, 19:22

hohoho muchas gracias mayid, entonces en la barra de progreso falseado como la que yo tengo no se puede hacer compatible con Opera ??? o seria crear otro scrip???

Saludos y gracias por los enlaces

mayid · #17 (**permalink**) 17/01/2010, 09:00

Mh.... yo que vos uso esto:

Cita:

$("#sendbutton").click(function (){

$.ajax({
type: "POST",

url: "upload.php",

data: "variable1=tanto",

dataType: "script",

beforeSend: function(objeto){
$("#invitaciones").html("Mensaje: Cargando...");
},

success: function(msg){

$("#sendButton").fadeOut("fast");
$("#divLoading").show("fast");
$("#divLoading").fadeIn("fast");

},
error: function(objeto, quepaso, otroobj){
alert("ERROR! : "+quepaso);
}

return false;

});

Busca un poco mas sobre la funcion $.ajax de jquery para saber como hacer tu animacion en tiempo real.

Ah! Sobre el final del evento onclick deberia ir return false, creo, para evitar que te vayas de la pagina. Mh... investiga please y conta como es.

WinderJerter · #18 (**permalink**) 17/01/2010, 11:28

Hola que tal mayid, muchas gracias por toda tu ayuda; mira esta podría se la solución para FF, IE8, Safari y Opera, pero en IE en modo Vista de compatibilidad no muestra la animación de la GIF (¿hay solución para esto?)

Mira este el código Jquery:

Código Javascript:

Ver originalfunction hideButton()
    {
            $("#sendButton").fadeTo("fast", 0.00);
            $("#divLoading").show("fast");
            $("#divLoading").fadeTo("fast", 1.00, function(){document.submitform.submit();});
    }

Y en el código HTML también hay modificaciones:

Se le agrega nombre a la etiqueta form: name="submitform".
El input submit fue sustituido por un input button.

Código HTML:

Ver original<form action="upload.php" name="submitform" method="post" enctype="multipart/form-data"> 
<input type="button" id="sendButton" value="Upload!" onclick="hideButton()" />

Saludos y nuevamente muchas gracias

mayid · #19 (**permalink**) 18/01/2010, 13:32

Che, buenisimo lo que hiciste. Lo voy a tener muy en cuenta para para hacer "loadings" sin uso de ajax.

WinderJerter · #20 (**permalink**) 18/01/2010, 16:59

Cita:

Iniciado por mayid

Che, buenisimo lo que hiciste. Lo voy a tener muy en cuenta para para hacer "loadings" sin uso de ajax.

Claro adelante Mayid

, pero el único problema es que no muestra el movimiento de la imagen GIF en IE, crees que haya solución a esto o a conformarse con los resultados???

Saludos

mayid · #21 (**permalink**) 19/01/2010, 08:15

:( leete esto.
http://www.forosdelweb.com/f13/gif-a...eto-ie-758074/

Quizas valga cargar la imagen en vez de mostrarla.... no se:

Cita:

// $("#divLoading").show("fast");

$("#divLoading").html("<img src='loading.gif' alt='' />");

CWeeD · #22 (**permalink**) 27/09/2011, 11:35

Creo que el problema no es tu script, Opera 9 tiene problemas con jquery.... hecha un vistazo en google...