(Resolvido) Atribuir class com Jquery

cmdmss · Abril 20, 2012

Prezados, boa tarde.

Estou tentando atribuir class="thickbox" por Jquery em uma Href, porém, não está dando certo.

Eis o codigo

$(document).ready(function(){
                $("a[id='incluiuni']").addClass("thickbox");
            }

    <a href="" id="incluiuni" title="Incluir unidade" >

Mas o negocio não quer funcionar por nada! Se eu coloco a propriedade class direto no a href... ai sim funciona!

alguém tem ideias?

Obrigado.

Editado Abril 20, 2012 por cmdmss

Raphael Machado · Abril 21, 2012

Tenta assim:

$(document).ready(function(){
                $("#incluiuni").addClass("thickbox");
}

cmdmss · Abril 23, 2012

Boa tentativa cara... mas não deu certo não... =/

alguém tem mais ideias?

fiote · Abril 23, 2012

Está dando erro? ou simplesmente não está fazendo nada?

cmdmss · Abril 23, 2012

Olhei no debug, não está dando erro e simplismente não está fazendo nada. Eu já testei com $("a[id=incluiuni]").attr('href','site.html'); e funcionou direitinho, so com o .addClass que não está rolando.

:huh:

fiote · Abril 23, 2012

O objeto em questão já tem uma classe definida?

cmdmss · Abril 23, 2012

Não... está do jeito que eu coloquei no meu exemplo no primeiro post!

cmdmss · Abril 23, 2012

Aí vai o codigo todo Vou colocar um !!! nas linhas mais importantes

<?php

/**
 * @author Caio Marcio
 * @copyright 2012
 */

include("../seguranca.php");
//include("../funcoes.php");
include("../func.php");
protegePagina();

$idUser = $_GET["idUser"];
$user = desc_user($idUser);
?>

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <head>        
        <title>Sistema de Gerenciamento Vitek</title>
        <script language="JavaScript" src="../js_cssFiles/dataehora.js"></script>        
        <link rel="stylesheet" href="../js_cssFiles/menu.css" />
        <link rel="stylesheet" href="../js_cssFiles/stylePrincipal.css" />
        <link rel="stylesheet" href="../plugins/thickbox/thickbox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="../js_cssFiles/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../plugins/thickbox/jquery.js"></script>
        <script type="text/javascript" src="../plugins/thickbox/thickbox.js"></script>
        
        <script type="text/javascript" src="../plugins/autocomplete/jquery.js"></script>
         <script type="text/javascript" src="../plugins/autocomplete/dimensions.js"></script>
         <script type="text/javascript" src="../plugins/autocomplete/autocomplete.js"></script>
         <link rel="stylesheet" href="../plugins/autocomplete/autocomplete.css" type="text/css" />
               
        
        

             <script type="text/javascript">
             //Campo select da Empresa
               function preenche(){            
                   $("select[name=Unidades]").html('<option value="0">Carregando...</option>');       
                    $.post("unidades.php",
                     {Empresas:$("input[name=empresa]").val()}, 
                     function(valor){
                        $("select[name=Contatos]").html("<option>Selecione a unidade...</option>");
                        $("select[name=Unidades]").html("<option>Selecione...</option>" + valor);
                        $("input[name='email']").val("");
                        $("input[name='tel']").val("");
                        $("input[name='cel']").val("");
                        $("input[name='fax']").val(""); 
                        $("input[name='dep']").val("");
                        $("input[name='cargo']").val("");
                        $("input[name='end']").val("");
                        $("input[name='num']").val("");
                        $("input[name='bairro']").val("");
                        $("input[name='cidade']").val("");
                        $("input[name='estado']").val(""); 
                        $("input[name='cep']").val("");
                        $("input[name='cnpj']").val("");
                        $("input[name='ie']").val("");                        
                     }
                     )          
                  }       
               
                   //Campo select das unidades
                  $(document).ready(function(){
                  $("select[name=Unidades]").change(function(){
                   $("select[name=Contatos]").html('<option value="0">Carregando...</option>');
                     $.post("contatos.php",
                     {Unidades:$(this).val()},
                     function(valor){
                        $("select[name=Contatos]").html("<option>Selecione...</option>" + valor);
                        $("input[name='email']").val("");
                        $("input[name='telcel']").val("");
                        $("input[name='fax']").val(""); 
                        $("input[name='dep']").val("");
                        $("input[name='cargo']").val("");                                    
                     }
                     )
                     })
               })
               //Campo dos inputs
                  $(document).ready(function(){
                  $("select[name=Unidades]").change(function(){
                     $.getJSON("unidadesinfo.php",
                     {Contatos:$(this).val()},
                     function(data){    
                        $.each(data, function(i, obj){
                        $("input[name='end']").val(obj.end);
                        $("input[name='num']").val(obj.num);                        
                        $("input[name='bairro']").val(obj.bairro);
                        $("input[name='cidade']").val(obj.cidade);
                        $("input[name='estado']").val(obj.estado); 
                        $("input[name='cep']").val(obj.cep);
                        $("input[name='cnpj']").val(obj.cnpj);
                        $("input[name='ie']").val(obj.ie);
                        $("input[name='dataModUni']").val(obj.dataMod);          
                        });                                                 
                     }
                     );
                     });
               })
               //Campo dos inputs
                  $(document).ready(function(){
                  $("select[name=Contatos]").change(function(){
                     $.getJSON("contatosinfo.php",
                     {Contatos:$(this).val()},
                     function(data){    
                        $.each(data, function(i, obj){
                        $("input[name='email']").val(obj.email);
                        $("input[name='tel']").val(obj.telcom);
                        $("input[name='cel']").val(obj.telcel);
                        $("input[name='fax']").val(obj.TelFax); 
                        $("input[name='dep']").val(obj.dep);
                        $("input[name='cargo']").val(obj.cargo);       
                        $("input[name='dataModCon']").val(obj.dataMod);                           
                        });                                                 
                     }
                     );
                     });
               })
               
               $(document).ready(function(){
              !!!!!!!!    $("#incluiuni").addClass("thickbox");
                //$("a[id='incluiuni']").attr('href','caduni.php?keepThis=true&TB_iframe=true&height=300&width=500');
                
                
               })
               
               //function olhaemp(){
//                    if($('#incluiuni').click()){
//                        if ($("input[name='empresa']").val() == ""){
//                            alert("Você precisa informar uma empresa já cadastrado no banco de dados para continuar.");
//                            return false;
//                        }    
//                                            
//                                                       
//                    }
//               }
         </script>        
         
         <script type="text/javascript">
            $(function(){
                setAutoComplete("empresa", "results", "autocomplete.php?part=");                
            });
         </script>                 
         
    </head>
    <body bgcolor="#E9E9E9" onload="startclock()">        
    
        <br /><br />
    <table border="0" width="1000px" class="tabelafloat">
            <tr><td></td><td align="left"><font size="2">Olá <?echo $user?>, em que posso lhe ser útil hoje?</font></td><td align="right"><form name="clock" onsubmit="0"><div><script>datahj();</script>&nbsp;-&nbsp;<input style="background-color: #E9E9E9;border:none;font-size: 12px;" type="button" value="" name="face" /></div></form></td></tr>
            
            <tr>
            <td valign="top">
                <div id="menu">
                <? echo menu($idUser);?>
                </div>
            </td>
                <td colspan="3">
                    <div id="apDiv1">
                        <table width="100%" border="0">                            
                            <tr bgcolor="#346DF3"><td><font color="#EDFA96"><b>Empresas</b></font></td><td align="center"><font color="#EDFA96"><b>Ações</b></font></td></tr>
                            <tr align="left"><td><p id="auto"><input type="text" onkeypress="java script:if (event.keyCode == 13) preenche();" name="empresa" id="empresa" size="50" /></p></td><td align="center"><a href="cademp.php?keepThis=true&TB_iframe=true&height=550&width=500" class="thickbox" title="Incluir Empresa" ><img src="../images/incluir.jpg" style="border: none;" width="18px"/></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Editar empresa"><img src="../images/editar.gif" style="border: none;" /></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Excluir empresa"><img src="../images/excluir.png" width="18px" style="border: none;"/></a></td></tr>
                            <tr bgcolor="#346DF3"><td><font color="#EDFA96"><b>Unidades</b></font></td><td align="center"><font color="#EDFA96"><b>Ações</b></font></td></tr>
                            <tr align="left"><td><select name="Unidades"><option>Selecione a empresa...</option></select></td><td align="center"> !!!!!!! <a href="" id="incluiuni" title="Incluir unidade" ><img src="../images/incluir.jpg" style="border: none;" width="18px"/></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Editar unidade"><img src="../images/editar.gif" style="border: none;" /></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Excluir unidade"><img src="../images/excluir.png" width="18px" style="border: none;"/></a></td></tr>
                            <tr bgcolor="#346DF3"><td><font color="#EDFA96"><b>Contatos</b></font></td><td align="center"><font color="#EDFA96"><b>Ações</b></font></td></tr>
                            <tr align="left"><td><select name="Contatos"><option>Selecione a empresa...</option></select></td><td align="center"><a href="#" title="Incluir contato" ><img src="../images/incluir.jpg" style="border: none;" width="18px"/></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Editar contato"><img src="../images/editar.gif" style="border: none;" /></a>&nbsp;&nbsp;&nbsp;<a href="#" title="Excluir contato"><img src="../images/excluir.png" width="18px" style="border: none;"/></a></td></tr>
                            <tr><td colspan="3"><hr /></td></tr>
                            <tr><td colspan="3" bgcolor="#FFFFC4" align="center">DADOS DA EMPRESA / UNIDADE</td></tr>
                            <tr><td>&nbsp;</td></tr>             
                            <tr><td>Endereço / Número:</td><td colspan="3"><input type="text" name="end" size="50" readonly="on" /> / <input type="text" name="num" size="3" readonly="on" /></td></tr>
                            <tr><td>Bairro:</td><td colspan="3"><input type="text" name="bairro" size="50" readonly="on" /></td></tr>
                            <tr><td>Cidade / Estado:</td><td colspan="3"><input type="text" name="cidade" size="23" readonly="on" /> / <input type="text" name="estado" size="19" readonly="on" /></td></tr>
                            <tr><td>CEP:</td><td colspan="3"><input type="text" name="cep" size="50" readonly="on" /></td></tr>
                            <tr><td>CNPJ:</td><td colspan="3"><input type="text" name="cnpj" size="50" readonly="on" /></td></tr>
                            <tr><td>IE:</td><td colspan="3"><input type="text" name="ie" size="50" readonly="on" /></tr>
                            <tr><td><br />&nbsp;</td><td align="right"><font size="2">Atualizado em:</font>&nbsp;<input readonly="on" style="border: none;font-size:11px;" name="dataModUni" type="text" size="10" /></td></tr>
                            <tr><td colspan="3"><hr /></td></tr>
                            <tr><td colspan="3" bgcolor="#FFFFC4" align="center">DADOS DO CONTATO</td></tr>
                            <tr><td>&nbsp;</td></tr>
                            <tr><td>E-mail:</td><td colspan="3"><input type="text" name="email" size="50" readonly="on" /></td></tr>
                            <tr><td>Telefone / Celular:</td><td colspan="3"><input type="text" name="tel" size="23" readonly="on" /> / <input type="text" name="cel" size="19" readonly="on" /></td></tr>
                            <tr><td>Fax:</td><td colspan="3"><input type="text" name="fax" size="50" readonly="on" /></td></tr>
                            <tr><td>Departamento:</td><td colspan="3"><input type="text" name="dep" size="50" readonly="on" /></td></tr>
                            <tr><td>Cargo:</td><td colspan="3"><input type="text" name="cargo" size="50" readonly="on" /></td></tr>
                            <tr><td><br />&nbsp;</td><td align="right"><font size="2">Atualizado em:</font>&nbsp;<input readonly="on" style="border: none; font-size:11px;" type="text" name="dataModCon" size="10" /></td></tr>
                            <tr><td colspan="3"><hr /></td></tr>                            
                        </table>
                    </div>
                </td>
            </tr>
            <tr><td></td><td><? echo "<font color=\"black\" size=\"2\">"; versao(); ?></font></td><td align="right" colspan="2"><font color="black" size="2">© <? echo date('Y') ?> - Vitek Consultoria Ltda. | Todos os direitos reservados.</font></td></tr>
     </table>   
    </body>
</html>

Editado Abril 23, 2012 por cmdmss

Lucas Kauz · Abril 23, 2012

Para efeito de teste tente utilizar addClass neste mesmo local para setar uma classe a outro elemento html, realmente não vejo o porque do erro, neste tipo de situação a eliminação de possibilidades é uma boa. Como alternativas desesperadas você pode utilizar temporariamente uma solução do tipo

$("#incluiuni").attr('class',$("#incluiuni").attr('class')+' thickbox');

Vou acompanhar, espero que encontre uma solução!

cmdmss · Abril 24, 2012

Cara, obrigado pela força... mas ainda sim não está rolando!!! aaafff... mas que misterio!

fiote · Abril 24, 2012

http://jsfiddle.net/X6ZTj/.

Fiz um exemplo sinmples com o que é importante e funcionou.

Esse monte de exclamação (!!!!!) que você colocou era só pra destacar a linha? ou realmente estão lá? lol.

Ps: coloque um alert(1); depois da linha do addClass para verificar essa parte está realmente sendo executada.

cmdmss · Abril 24, 2012

Fiz o alert e apareceu conforme o esperado!

É claro que não tem os !!!! ne meu caro.. rsrs... coloquei so pra destacar a linha...

Cara, o thickbox que eu estou utilizando é o plugin, você conhece ele? Acha que pode ter alguma coisa a ver?

Abraço.

Lucas Kauz · Abril 24, 2012

Fiz o alert e apareceu conforme o esperado!
É claro que não tem os !!!! ne meu caro.. rsrs... coloquei so pra destacar a linha...
Cara, o thickbox que eu estou utilizando é o plugin, você conhece ele? Acha que pode ter alguma coisa a ver?
Abraço.

Eu achei mais um meio de atribuir a classe, meu último rs

var objt = $("a[id='incluiuni']");
    objt[0].setAttribute('class', 'thickbox');

ver em execução: http://jsfiddle.net/rrFkK/1/

Vou dar uma olhada no plugin, as vezes ele também está manipulando a tag, ou algo do gênero.

---

Oops, lembre-se de adicionar a classe atual, algo como objt[0].setAttribute('class', objt.attr('class')+' thickbox') // substituindo o .attr pelo equivalente em js

Editado Abril 24, 2012 por Lucas Kauz

fiote · Abril 25, 2012

.class = 'thickbox' também teoricamente funciona.

@cmdmss, faz assim.

Ao invés de 'thickbox', cria uma classe nova no seu css e tenta com ela.

.classeTeste {
    color:red;
    font-family:Courier New;
    font-size:50px;
}

$("a[id='incluiuni']").addClass("classeTeste");

cmdmss · Abril 25, 2012

Funcionou!!!! aafff... so não funciona com o thickbox.... :blink:

cmdmss · Abril 25, 2012

Fiz outro teste... fiz um css e atribui ao a href que estou querendo colocar o thickbox... deu certo! To achando que é o thickbox que não pode ser atrelado por meio de jquery... :(

Lucas Kauz · Abril 25, 2012

Funcionou!!!! aafff... so não funciona com o thickbox.... :blink:

Então provavelmente o problema esta relacionado ao thickbox, conseguiu chegar ao resultado que precisava?

Estava vendo o site da thickbox e tem esta mensagem 'While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.'. Lá eles dão algumas alternativas, tenho uma pessoal também que é o Prettyphoto ( http://www.no-margin-for-errors.com/projec...ne/#prettyPhoto ), tem diversos recursos muito interessantes.

Boa sorte!

cmdmss · Abril 25, 2012

Hum... achei algo interessante aqui... vou testar!

http://drupal.org/node/148309

Será a luz no fim do tunel??? :blink:

cmdmss · Abril 25, 2012

Funcionoooooooooooooooooooouuuu..... B) :lol: :D :P :o

O que faltava???

o tal do tb_init('a.thickbox');

Agora meu codigo ficou assim:

$(document).ready(function(){
                                
                $("#incluiuni").addClass("thickbox");
                tb_init('a.thickbox');
                $("a[id='incluiuni']").attr('href','caduni.php?keepThis=true&TB_iframe=true&height=300&width=500');
                
                
               })

YEP YEP... UUUUUUHAAAAAA!!!!

Obrigado a todos pela atenção!

Entrar

(Resolvido) Atribuir class com Jquery

Pergunta

Link para o comentário

Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns