AJAX Navigation-No refresh with PHP

Question

AJAX Navigation-No refresh with PHP

Navigation

#1 by (1 votes)

2

Good people I have a question that I can not solve through the WEB. Home In my page I have a menu that calls some content to a DIV of id content, this with ajax, and it is working, the contents are updated and loaded as I call them. Home My problem is the following:

The loaded content is a form, and in this form it has an imput button type="submit", and the data is passed by post. In this form I did not put action because I want it to be passed through ajax and not direct by PHP to not generate the refresh. But when I click the button it does not work, I believe it is by my ajax code made for the submit. Because I load it when the page is opened and the form is inserted after that through the menu request. Here is my ajax code:

    $(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;
    });
    }

In this code I put an alert to see if it got there, but it did not arrive. So I think it's because of the load of the function.
I wonder if someone has a better option, or something to tell me how to do it. I researched a lot but did not get into the context I wanted. Home I hope you understood the question rsrs I'm kind of confused really. Thank you in advance! Home Here is the requested HTML:

<!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><divclass="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>

php ajax

asked by anonymous 06.08.2015 / 01:34

1 answer

Doubt about the operation of BaseAdapter and ListView How to send only one form once every 5 minutes

score 1 · Accepted Answer

It seems to me that your problem is delegation. That is, when you run form_ajax() to <form> is not yet on the page, and $('#form-ajax') will be empty and therefore the rest of the code does not even run.

You have two options, or put this call to the form_ajax() function inside AJAX that adds the form's HTML (after the line inserting the form); or you change this event sink to $(document).on('submit', '#form-ajax', function(){ . This way, only when the submit happens jQuery will check where it came from, and then <form> is already on the page.