2

Bom pessoal estou com uma dúvida que não consigo resolver através da WEB.
Na minha página eu tenho um menu que chama alguns conteúdos para uma DIV de id conteudo, isso com ajax, e está funcionando, os conteudos são atualizados e carregados conforme eu os chamo.
O meu problema é o seguinte:

O conteudo carregado é um form, e nesse form possui um botão de imput type="submit", e os dados são passados por post. Nesse form eu não coloquei action pois eu quero que seja passado pelo ajax e não direto pelo PHP para não gerar o refresh. Porém quando eu clico no botão ele não funciona, acredito que seja pelo meu código do ajax feito para o submit. Pois eu carrego ele quando a página é aberta e o form é inserido depois disso através da solicitação do menu. Segue o meu código ajax:

    $(document).ready(function(){
form_ajax();

    });

    function form_ajax(){
$('#form-ajax').submit(function(){
    var content = $('#conteudo');
    alert('carregou');
        $.ajax({
            type: "POST",
            url: "processa.php",
            success: function( response )
            {
                var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
                window.setTimeout( function(){
                        content.fadeOut('fast', function(){
                            content.html( data ).fadeIn('fast');
                        });
                    }, 50 );
            }
        });

        return false;
    });
    }


Nesse código eu coloquei um alert para ver se chegava até ali, mas não chegou. Por isso acho que é por causa do load da função.
Gostaria de saber se alguém tem uma opção melhor, ou algo para me indicar de como fazer. Pesquisei bastante coisa mas não cheguei no contexto que gostaria.

Espero que tenham entendido a pergunta rsrs sou meio confuso mesmo.
Desde já obrigado a todos!
Segue HTML solicitado:

<!DOCTYPE html>
    <html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/estilo.css" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <title>index</title>
    </head>
    <body>
<div class="global">
    <div class="topo">

    </div>
    <!--End TOPO-->
    <div class="central">
        <div class="menu-lateral" id="menu">
            <li class="active">
                <img src="icon2.png" alt="">
                <a href="site_oficial/login.php"> Home </a>
            </li>
            <li>
                <img src="icon1.png" alt="">
                <a href="form-ajax.php"> DashBoard </a>
            </li>
            <li class="parent">
            <img src="icon3.png" alt="">
            <a href="#">Teste 1</a>
                <ul class="sub-menu">
                    <li><a href="#">testado 1</a></li>
                    <li><a href="#">testado 2</a></li>
                </ul>
            </li>
            <li class="parent">
            <img src="icon4.png" alt="">
            <a href="#">Teste 2</a>
                <ul class="sub-menu">
                    <li><a href="#">testado 3</a></li>
                    <li><a href="#">testado 4</a></li>
                </ul>
            </li>
            <li class="parent">
            <img src="icon5.png" alt="">
            <a href="#">Teste 3</a>
                <ul class="sub-menu">
                    <li><a href="#">testado 3</a></li>
                    <li><a href="#">testado 4</a></li>
                </ul>
            </li>

        </div>
        <!--End MENU-->
        <div id="conteudo">

        </div>
        <!--End CONTEUDO-->
    </div>
    <!--End CONTAINER-->
</div>
<!--End GLOBAL-->
<script src="js/menu-lateral.js"></script>
<script src="js/form-ajax.js"></script>
<script src="js/ajax-load.js"></script>

3
  • Mostre o HTML para que o povo possa ver.
    – user6406
    Commented 5/08/2015 às 23:38
  • @AndréHenriques coloquei o HTML do index é esse que você queria? Commented 5/08/2015 às 23:45
  • Se eu usar no button do from que foi carregado a propriedade onclick="metodo()" ele até executa, de outra maneira não. :( Commented 6/08/2015 às 2:15

1 Resposta 1

1

Parece-me que o teu problema é de delegação. Ou seja quando corres form_ajax() a <form> ainda não está na página, e $('#form-ajax') vai dar vazio e daí não corre sequer o resto do código.

Tens duas opções, ou juntas essa chamada à função form_ajax() dentro AJAX que adiciona o HTML do formulário (depois da linha que insere o formulário); ou então mudas esse oscultador de eventos para $(document).on('submit', '#form-ajax', function(){. Dessa maneira só no momento que o submit acontecer o jQuery vai verificar de onde veio, e nessa altura a <form> já está na página.

1
  • 1
    Obrigado Sergio, sua resposta foi muito útil e resolveu meu problema, até parece que tu leu pensamento :D valeu mesmo!!! Commented 6/08/2015 às 18:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .