Mas de una funcion/evento para el atributo onclick

WalkmanXZ · #1 (**permalink**) 30/04/2012, 23:54

Es posible hacer que el atributo onclick (usado en una tag HTML <a href>) tenga mas de una sola funcion? he buscado en internet pero sin ningun exito, lo poco que he buscado esta en ingles y a lo que se comenta es posible pero por mas que lo intento no tengo exito alguno

Los eventos que quiero incluir son

Código Javascript:

Ver originalreturn hideuntilthanks_reload();

y

Código Javascript:

Ver originalreturn thx({$post['pid']});

Actualmente ambos funcionan pero individualmente

Espero sus consejos, Saludos

zerokilled · #2 (**permalink**) 01/05/2012, 00:15

buenas.
puesto que ambos tienen que devolver el valor del handler ‒ la función, supongo que para controlar el evento ‒ tienes que invocar ambas funciones indicando entremedio el operador AND. es decir, return funcion() && funcion().

WalkmanXZ · #3 (**permalink**) 01/05/2012, 00:38

@zerokilled no me funciono, no se si deva a que son eventos distintos, es decir, que una funcion llama a un evento y otra a otro. Lo intente asi y solo se ejecutaba el evento 1

Código PHP:

              $post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return thx({$post['pid']}) && hideuntilthanks_reload()\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">

            <img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

chinanzio · #4 (**permalink**) 01/05/2012, 07:03

Hola WalkmanXZ, si que se puede hacer, pero no de la manera que creo que piensas, no se pueden poner 2 funciones al evento click, pero se puede poner una que llame a las dos, y si necesitas devolver un valor (generalmente un booleano) hazlo como bien dice zerokilled

Código Javascript:

Ver originalfunction union() {
    var uno = thx({$post['pid']});
    var dos = hideuntilthanks_reload();
    return uno && dos;
}

No siempre es conveniente hacer el && direcamente asi :thx({$post['pid']}) && hideuntilthanks_reload() por que si la función thx devuelve falso, null 0 o undefined la función hideuntilthanks_reload() no se ejecutará y a lo mejor no es lo que quieres

Código HTML:

$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return union();\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">
            <img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

WalkmanXZ · #5 (**permalink**) 01/05/2012, 11:02

Me sirvio tu respuesta chinanzio, el problema es que ahora me suelta un error

an Error had occured please contact administrator
TypeError: table is null

y si los pongo al revez es decir, cambio las funciones de lugar, solo se ejecucta el hide_reload() y si los pongo tal cual me lo marcas salta ese error

Edit: en otro foro me indican que si uso return una vez DETIENE la ejecucion de mas eventos con return

emprear · #6 (**permalink**) 01/05/2012, 12:01

Me concentro en tu pregunta original, pasar más de una función con onclick

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 funciones onclick</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var a1;
var b1;
 
function f1(a){
a1 = a;
}
 
function f2(b){
b1 = b;
}
 
function f3(){
alert(a1 + '-' + b1);
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="f1('uno');f2('dos');f3(); return false;">link</a>
</body>
</html>

Podés pasar 2 y más, hasta ahi no hay inconveniente
Saludos

WalkmanXZ · #7 (**permalink**) 01/05/2012, 12:25

Sin exito aun, no se si tenga que dar el dato adicional que los eventos son bajo AJAX

el primero usa este JS

Código Javascript:

Ver originalvar pid=-1;
var spinner=null;
function thx_common(response)
{
    try
    {
        xml=response.responseXML;
        remove=xml.getElementsByTagName('del').item(0).firstChild.data=="1";
        lin=document.getElementById('a'+pid);
        if (remove) {
            table = document.getElementById('thx' + pid);
            table.style.display = xml.getElementsByTagName('display').item(0).firstChild.data != 0 ?
                 '' : 'none';
            list = document.getElementById('thx_list' + pid);
            list.innerHTML = xml.getElementsByTagName('list').item(0).firstChild.data;
            
            img = document.getElementById('i' + pid);
            img.src = xml.getElementsByTagName('image').item(0).firstChild.data;
        }
        else 
        {
            lin.innerHTML="";
            lin.onclick=null;
            lin.href="";
            lin = null;
        }
    }
    catch(err)
    {
        alert("an Error had occured please contact administrator")
        alert(err);
    }
    finally
    {
        spinner.destroy();
        spinner=null;
        return lin;
    }
    
}
function thx_action(response)
{
    lin=thx_common(response)
    if(lin!=null)
    {
        lin.onclick= new Function("","return rthx("+pid+");");
        lin.href='showthread.php?action=remove_thank&pid='+pid;
    }
}
 
function rthx_action(response)
{
    lin=thx_common(response)
    if (lin!=null) 
    {
        lin.onclick = new Function("", "return thx(" + pid + ");");
        lin.href = 'showthread.php?action=thank&pid=' + pid;
    }
    
    
}
 
function thx(id)
{
    if(spinner)
        return false;
    spinner = new ActivityIndicator("body", {image: "images/spinner_big.gif"});
    pid=id;
    pb="pid="+pid;
    new Ajax.Request('xmlhttp.php?action=thankyou',{method: 'post',postBody:pb, onComplete:thx_action});
    return false;
}
 
function rthx(id)
{
    if(spinner)
        return false;
    spinner = new ActivityIndicator("body", {image: "images/spinner_big.gif"});
    pid=id;
    b="pid="+pid;
    new Ajax.Request('xmlhttp.php?action=remove_thankyou',{method: 'post',postBody:b,onComplete:rthx_action});
    return false;
}

el segundo

Código Javascript:

Ver original<script type="text/javascript">
        <!--
        
        var spinner=null;
        
        function hideuntilthanks_reload()
        {
            b1 = b;
            if(spinner){return false;}
            this.spinner = new ActivityIndicator("body", {image: "images/spinner_big.gif"});
            new Ajax.Request('{$mybb->settings['bburl']}/xmlhttp.php?action=hideuntilthanks_reload&my_post_key='+my_post_key, {method: 'post',postBody:"", onComplete:hideuntilthanks_done});
            return false;
        }
        
        function hideuntilthanks_done(request)
        {
            if(this.spinner)
            {
                this.spinner.destroy();
                this.spinner = '';
            }
            if(request.responseText.match(/<error>(.*)<\/error>/))
            {
                message = request.responseText.match(/<error>(.*)<\/error>/);
                alert(message[1]);
            }
            else if(request.responseText)
            {
                $("hide_table").innerHTML = request.responseText;
            }
        }
        -->
        </script>

Ambos funcionan con esta linea

Código PHP:

Ver original$post['thanks'] = "<a href=\"\" onclick=\"return hideuntilthanks_reload();\">Recargar Beta </a><a id=\"a{$post['pid']}\" onclick=\"return thx({$post['pid']}); return hideuntilthanks_reload();\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">
            <img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

Pero solo bajo onclick´s individuales, la idea es que un solo onclick (el que enlaza la imagen) realice ambos eventos

Saludos y disculpas porque de verdad no me manejo NADA en esto de AJAX y javascript

chinanzio · #8 (**permalink**) 01/05/2012, 12:25

Cita:

Iniciado por WalkmanXZ

Me sirvio tu respuesta chinanzio, el problema es que ahora me suelta un error

an Error had occured please contact administrator
TypeError: table is null

y si los pongo al revez es decir, cambio las funciones de lugar, solo se ejecucta el hide_reload() y si los pongo tal cual me lo marcas salta ese error

Edit: en otro foro me indican que si uso return una vez DETIENE la ejecucion de mas eventos con return

Entonces el error está dentro de la función thx, por lo que entiendo ...
Sabes usar el firebug ??
tenes el codigo de la funcion thx ??

Tiene toda la pinta de que table es una variable javascript que debería ser un elemento del documento.
Es muy tipico cometer el siguiente error:

Código Javascript:

Ver originalvar table = document.getElementById("un-id");

y que el id "un-id" no lo tenga ningun elemento de la pagina, pareciera que el id es $post['pid'], a lo mejor el valor de eso no es el que esperabas, si pusieras el codigo de la funcion a lo mejor te podemos ayuedar con mas presicion
Saludos

Me imagino que el error sale en la siguiente line:

Código Javascript:

Ver original// ...
table = document.getElementById('thx' + pid);
table.style.display = xml.getElementsByTagName('display').item(0).firstChild.data != 0 ?            // en esta linea sale el error ?
// ...

Tiene la pinta de que 'thx' + pid no lo tiene nadie como id
Podrias usar firebug para poner un breakpoint, y si no, pone un alert('thx' + pid); en esa linea aver que sale

NOTA: El codigo lo vi despues de escribir esto :P

WalkmanXZ · #9 (**permalink**) 01/05/2012, 12:59

Perdona pero no entendi, lo que quieres decir es que si esa funcion no esta en uso la retire?

chinanzio · #10 (**permalink**) 01/05/2012, 13:15

Cita:

Iniciado por WalkmanXZ

Perdona pero no entendi, lo que quieres decir es que si esa funcion no esta en uso la retire?

no, no
que sale al hacer ?

Código Javascript:

Ver originalalert('thx' + pid);

WalkmanXZ · #11 (**permalink**) 01/05/2012, 13:57

Bueno, puse el firebug y segui sin entender, la verdad me rompo mucha la cabeza con esto del JS ya que me manejo mas con PHP

mas atras me comentaste que te pasara la funcion thx, aqui te la dejo aunque mas arriba la especifique.

Código Javascript:

Ver originalfunction thx(id)
{
    if(spinner)
        return false;
    spinner = new ActivityIndicator("body", {image: "images/spinner_big.gif"});
    pid=id;
    pb="pid="+pid;
    new Ajax.Request('xmlhttp.php?action=thankyou',{method: 'post',postBody:pb, onComplete:thx_action});
    return false;
}

Otro dato es que las funciones de THX las llamo desde un archivo.js individual y que las de reload las llamo desde la misma plantilla al ser mas corta

chinanzio · #12 (**permalink**) 01/05/2012, 15:03

Código Javascript:

Ver original// ...
// que sale en el alert ???
alert('thx' + pid);
table = document.getElementById('thx' + pid);
// ...

WalkmanXZ · #13 (**permalink**) 01/05/2012, 17:12

haber, me tiro esto

thxundefined

TypeError: table is null

cuando uso el normal es decir sin la funcion para llamar a los 2 me suelta

thx1 y termina su funcion como tendria que ser

chinanzio · #14 (**permalink**) 01/05/2012, 17:31

Cita:

Iniciado por WalkmanXZ

haber, me tiro esto

thxundefined

TypeError: table is null

cuando uso el normal es decir sin la funcion para llamar a los 2 me suelta

thx1 y termina su funcion como tendria que ser

podrías poner el código que funciona y el que no ?

También es importante desde donde se llama la función.
He visto que usas otro lenguaje para pasarle a javascript el valr del id
{$post['pid']} si esta instrucción está en un archivo .js entonces no es procesado por el lenguaje que usas.

WalkmanXZ · #15 (**permalink**) 01/05/2012, 18:03

la variable {$post['pid']} la saca como tendria que ser, en cuanto a esto no hay problema ya que asi esta programado y es PHP

para meter mas cosas al sistema (MyBB, un sistema de foros) yo uso find_replace desde PHP pero por el momento (solo para estar testeando) agrego las funciones y lo que me indicas directamente al sistema de templates (cual si fuera wordpress (para que te des una idea mas general))

yo a la plantilla agrego esto

Código Javascript:

Ver originalfunction union() {
        var uno = thx({$post['pid']});
        var dos = hideuntilthanks_reload();
        return uno && dos;
    }

tal cual tu me lo indicaste, hasta ahi vamos bien,

al plugin/extension/hack en PHP yo agrego esto

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return union()\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">
            <img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

y en el archivo.js yo agrego lo que me indicaste (el alert) asi

Código Javascript:

Ver originalfunction thx(id)
{
    if(spinner)
        return false;
    spinner = new ActivityIndicator("body", {image: "images/spinner_big.gif"});
    pid=id;
    pb="pid="+pid;
    alert('thx' + pid);
    table = document.getElementById('thx' + pid);
    new Ajax.Request('xmlhttp.php?action=thankyou',{method: 'post',postBody:pb, onComplete:thx_action});
    return false;
}

Ahi me marca el error table is null y thxundefined (en 2 popups distintos) y no realiza la accion (almenos en AJAX, osea que marca el error y al darle Aceptar, recarga la pagina)

cuando yo uso

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return thx({$post['pid']})\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">
            <img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

y el alert agregado en la funcion, me regresa esto en un popup: thx1 (que se supone que es el ID que le corresponde y señal de que funciona como debe) y al final realiza su funcion tal cual deveria (sin el reload)

chinanzio · #16 (**permalink**) 01/05/2012, 18:13

Prueba a escribir la funcion union en el tag

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return function(){var uno = thx({$post['pid']});var dos = hideuntilthanks_reload(); return uno && dos;}\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\"> img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

WalkmanXZ · #17 (**permalink**) 01/05/2012, 18:21

Nada, me redirige (recarga la pagina aplicando todas las funciones pero el caso es que no redirija)

chinanzio · #18 (**permalink**) 01/05/2012, 18:38

Prueba este, la diferencia es que se niega dos veces el return de la funcion. Esto se hace para que el tipo sea booleano si o si.
Si este resultado no es booleano entonces redirigirá.
Espero que esta sea la buena avisa
Saludos

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"return function(){var uno = thx({$post['pid']});var dos = hideuntilthanks_reload(); return !!(uno && dos);}\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\"> img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

WalkmanXZ · #19 (**permalink**) 01/05/2012, 18:46

Sin exito aun, redirecciono aplicando ambas funciones

chinanzio · #20 (**permalink**) 01/05/2012, 20:13

Perdona mi anterior respuesta estaba mal
Prueba esta

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"var uno = thx({$post['pid']});var dos = hideuntilthanks_reload(); return uno && dos;\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\"> img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

WalkmanXZ · #21 (**permalink**) 01/05/2012, 20:20

funciona pero solo ejecuta el thx

chinanzio · #22 (**permalink**) 01/05/2012, 20:32

La siguiente linea tiene un alert añadido que dice hola ... se ejecuta el alert ???

Código PHP:

Ver original$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"var uno = thx({$post['pid']});var dos = hideuntilthanks_reload(); alert('hola'); return uno && dos;\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\"> img src=\"{$mybb->settings['bburl']}/{$theme['imgdir']}/postbit_thx.gif\" border=\"0\" alt=\"$lang->thx_main\" title=\"$lang->thx_main\" id=\"i{$post['pid']}\" /></a>";

WalkmanXZ · #23 (**permalink**) 01/05/2012, 20:41

Si, lo ejecuta y tambien realiza el evento thx

chinanzio · #24 (**permalink**) 01/05/2012, 20:53

Entonces el error está dentro la funcion hideuntilthanks_reload

puse unos comentarios en el codigo

Código Javascript:

Ver originalvar spinner = null;
 
function hideuntilthanks_reload() {
    b1 = b;
    
    // ACA SPINNER SIEMPRE ES NULL (SEGUN ESTE SOLO TROZO DE CODIGO)
    // POR LO TANTO LA FUNCION NO PASA DE ESTA LINEA
    if (spinner) {
        return false;
    }
    
    // POR QUE USAS this.spinner AQUÍ ??? POR CASUALIDAD NO QUERRAS USAR LA VARIABLE SPINNER DECLARADA EN LA PRIMERA LINEA ??
    this.spinner = new ActivityIndicator("body", {
        image : "images/spinner_big.gif"
    });
    new Ajax.Request('{$mybb->settings[bburl]}/xmlhttp.php?action=hideuntilthanks_reload&my_post_key=' + my_post_key, {
        method : 'post',
        postBody : "",
        onComplete : hideuntilthanks_done
    });
    return false;
}
 
function hideuntilthanks_done(request) {
    // ES QUE ACA TAMBIEN USAS this.spinner Y SEGUN ESTE TROZO DE CODIGO ESTO SIEMPRE VA A SER NULL
    if (this.spinner) {
        this.spinner.destroy();
        this.spinner = '';
    }
    if (request.responseText.match(/<error>(.*)<\/error>/)) {
        message = request.responseText.match(/<error>(.*)<\/error>/);
        alert(message[1]);
    } else if (request.responseText) {
        $("hide_table").innerHTML = request.responseText;
    }
}

WalkmanXZ · #25 (**permalink**) 01/05/2012, 21:02

Te amo jaja

Código Javascript:

Ver originalif (spinner) {
        return false;
    }

era el problema de todo... por fin he terminado mi super plugin, y mi primer plugin con AJAX, te dejare unos creditos por ahi y muchisimas gracias por todo.

Tema solucionado!

chinanzio · #26 (**permalink**) 01/05/2012, 21:06

Cita:

Iniciado por WalkmanXZ

Te amo jaja

Código Javascript:

Ver originalif (spinner) {
        return false;
    }

era el problema de todo... por fin he terminado mi super plugin, y mi primer plugin con AJAX, te dejare unos creditos por ahi y muchisimas gracias por todo.

Tema solucionado!

Me alegro, suerte con el plugin :P