Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Pedrok

Problemas com shadowbox depois de abrir uma pagina interna com ajax

Por , em Javascript

Recommended Posts

Pedrok    0

Pedrok
Postado

Bom dia Galera..

 

Estou com um probleminha...

 

Estou trabalhondo em um projeto, que utilizo javaweb/jsp..

No entanto, esta otimo! porem, qndo tento abrir um formulario com shadowbox depois de soliciar a pagina com ajax, nao da! ... se eu puxar esse mesmo formulario sem usar o ajax, funciona tranquilo.

 

explicando...

 

na pagina "listarDados.jsp" existe uma tabela de resultado do banco de dados.. para chamar esse arquivo listarDados.jsp, uso ajax, que ira coloca-lo dentro de uma div. A requisiçao desse arquivo, é feita por um formulario de busca, que ao clicar no button, irá chamar uma funçao javascrip.. como no codigo abaixo..

 

<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>JSP Page</title>
       <link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="js/jq.js"></script>
       <script src="js/ajax.js" type="text/javascript"></script>
       <script type="text/javascript" src="shadowbox/shadowbox.js"></script>

       <script type="text/javascript">
           Shadowbox.init({
               language: 'pt',
               player: ['img', 'html', 'swf']
           });
       </script>


       <!-- Fim do efeito ShadowBox -->


       <script type="text/javascript">
           function enviarRequisicao(){
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {
                   document.getElementById("resultado").innerHTML = data;
               });
           }


       </script>
   </head>
   <body>


       <form name="ajaxSV" id="ajaxSV" action="">

           <div style="border-style:solid; border-color:  gainsboro; width: 700px; padding: 10px; background-color:lavender">
               <input type="hidden" name="nomeCategorias" id="nomeCategorias" value="Home"/>
               <input type="hidden" name="business" id="business" value="CategoriasAction"/>
               <input type="hidden" name="action" id="action" value="pesquisar"/>
               <input style="padding-left: 27px; padding-top: 10px; padding-bottom: 10px; padding-right: 27px" type="button" name="btn" value="Pesquisar" onclick="enviarRequisicao();" />
           </div>


       </form>

       <div id="resultado">
       </div>

   </body>
</html>

 

Depois que o listaDados.jsp é inserido na div "<div id="resultado">", preciso chamar um formulario pelo shadowbox, qndo alguem clicar em uma linha de dados, Mas o shadowbox nao Funciona!!!

Porem, para testar, coloquei um link para abrir shadowbox na pagina principal, e funciona!.

Obs: todas os links estao no mesmo diretorio!, nao consigo entender o problema.

 

 

ps: como podem ver, a requisiçao é feita pelo servlet que irá buscar os dados no action e retornará :

 request.getRequestDispatcher("listaDados.jsp").forward(request, response);

 

Por favor, alguem sabe como posso solucionar esse problema com shadowbox?...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Que navegador você utiliza?

Se for o Chrome, utilize o atalho CTRL+SHIFT+J para abrir o console de erros.

 

No Firefox você precisará do complemento Firebug.

Uma vez instalado, aperte F12 para debugar.

 

Ambos possuem uma janela específica para requisições Ajax. Verifique se aparece algum erro...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedrok    0

Pedrok
Postado

Então, não da nenhum erro.. mas gostaria de saber se tem alguma particularidade entre shadowbox e ajax ... tb se alguem ja executa o shadowbox dentro de uma pagina chamada pelo ajax, como eu descrevi nesse topico.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, existe.

 

leia:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedrok    0

Pedrok
Postado

Entao Bruno, lightbox é diferente do shadowbox para o que estou usando. Como quero abrir um html com shadowbox, o lighbox nao irá fazer. Queria essa mesma soluçao para usar com Ajax e servelet, como foi descrito.

 

Se souber mais sobre, por favor, me ajude. Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

independente do plugin, aplique a ideia que dei no post.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedrok    0

Pedrok
Postado

Bruno, me desculpe a ignorancia, mas Revendo...

 

Quando eu chamo a Pagina pelo ajax eu clico no Evendo

 

< ... onclick="enviarRequisicao();" />

que esta nessa Funçao

 

 function enviarRequisicao(){
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   document.getElementById("resultado").innerHTML = data;
               });
           }

Logo, irá chama a pagina solicitada... ai dentro dessa pagina, tem o Link que quero abrir no Shadowbox

 

<a href="servletmain?business=EstagiarioAction&action=editar&codigo=${item.id}" rel="shadowbox">Editar</a>

 

Esse Form que será chamdo, era pra abrir no Shadowbox atraves desse Script

 

 <script type="text/javascript">
           Shadowbox.init({
               language: 'pt',
               player: ['img', 'html', 'swf']
           });
       </script>

 

No entando, você sugiriu que eu colocasse o Evento do Shadowbox junto com a Funcao que chama o Ajax? resultando em ?

 

 

 function enviarRequisicao(){
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {
                   document.getElementById("resultado").innerHTML = data;
               }, Shadowbox.init({
                   language: 'pt',
                   player: ['img', 'html', 'swf']
               })
           );
           }

 

Seria isso ? Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mais ou menos isso ai sim

 

 

$.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

   $("#resultado").html( data );
   Shadowbox.init({
       language: 'pt',
       player: ['img', 'html', 'swf']
   });
});

e além disso, coloque todos os arquivos .js e .css do shadowbox, na página que já está carregada.

 

ou seja, no ajax, só vai vir html, sem nada de script, e nem css.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedrok    0

Pedrok
Postado

Bruno, estou meio confuso mas vou mostrar com esta o Codigo ok?...

a pagina principal esta assim :

 

 

<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>JSP Page</title>
       <link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
       <script src="js/ajax.js" type="text/javascript"></script>
       <script type="text/javascript" src="shadowbox/shadowbox.js"></script>



       <!-- Fim do efeito ShadowBox -->


       <script type="text/javascript">

               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   $("#resultado").html( data );
                   Shadowbox.init({
                       language: 'pt',
                       player: ['img', 'html', 'swf']
                   });
               });


            function enviarRequisicao(){ // funcao que ao clicar chamara a pagina solicitada
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   document.getElementById("resultado").innerHTML = data; //Div que o ajax irá "colocar" a pagina chamada.
               });
           } 

       ....

 

ao clicar no link que da pagina que o ajax vai trazer,

 

<a href="servletmain?business=EstagiarioAction&action=editar&codigo=${item.id}" rel="shadowbox">Editar</a>

 

ele ira chamar o shadowbox?

 

$.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   $("#resultado").html( data );
                   Shadowbox.init({
                       language: 'pt',
                       player: ['img', 'html', 'swf']
                   });
               });

 

Coloquei todos os links, .js, .css, na pagina principal, como você pode ver.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

troque:

        <script type="text/javascript">

               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   $("#resultado").html( data );
                   Shadowbox.init({
                       language: 'pt',
                       player: ['img', 'html', 'swf']
                   });
               });


            function enviarRequisicao(){ // funcao que ao clicar chamara a pagina solicitada
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   document.getElementById("resultado").innerHTML = data; //Div que o ajax irá "colocar" a pagina chamada.
               });
           }

por:

 

        <script type="text/javascript">
            function enviarRequisicao(){ // funcao que ao clicar chamara a pagina solicitada
               $.post("ControllerServlet", $("#ajaxSV").serialize(), function(data) {

                   $("#resultado").html( data );
                   Shadowbox.init({
                       language: 'pt',
                       player: ['img', 'html', 'swf']
                   });
               });
           }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedrok    0

Pedrok
Postado

Olá novamente Bruno. Então, ontem mesmo eu havia feito isso que você postou anteriormente. AInda nao deu certo, to achando que deve ser a chamada dos plugins no success do AJAX. Como passaria esses plugin ao chamar o ajax?...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é exatamente isso que eu fiz.

 

aperte Ctrl+Shift+J no Firefox, e veja se aparecem erros.

será necessário agora debugar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito