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>