AJAX inside AJAX

Asked

Viewed 18 times

0

I did something like the user type in what I ask, then click on the find, and then do a ajax to find the search data and send it to a div. What the ajax get inside that div is basically this:

<h5> Os dados que se apresentam a seguir poderão ser editados / eliminados. </h5>
                <br>
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"><i class="fa fa-credit-card fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['contribuinte'].'" id="pesq2contr" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Contribuinte</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"> <i class="fa fa-key fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['password'].'" id="pesq2pw" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Password</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"> <i class="fa fa-user fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['nome'].'" id="pesq2nome" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Nome</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"><i class="fa fa-home fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['morada'].'" id="pesq2morada" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Morada</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['cod_postal'].'" id="pesq2codpost" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Código Postal</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"><i class="fa fa-mobile fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['tlm'].'" id="pesq2tlm" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Telemóvel</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"> <i class="fa fa-phone fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['tlf'].'" id="pesq2tlf" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Telefone</p>
                    </div>
                </form>


                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="width:50px;"> <i class="fa fa-envelope fa-lg" aria-hidden="true"></i></div>
                            <input type="text" class="form-control" value="'.$data['email'].'" id="pesq2email" style="width:400px;">
                        </div>
                        <p class="italic" style="color:white;">Categoria</p>
                    </div>
                </form>
                <br>
                <button id="encontraedit">
                    GUARDAR
                </button>

                <button id="eliminaedit">
                    ELIMINAR
                </button>

So far so good. At the end as you can see have those two drop and save buttons and I used another AJAX inside this one so it could do the same. The problem is that the first time running the AJAX It works, not the second time. So I wanted to ask if there is something I am doing wrong, or not to do so, or on the page that calls the first ajax how do I get the values of inputs within AJAX?

script button:

    $("#eliminaedit").click(function(){ 
    var contr = $("#pesq2contr").val();

    swal({   
        title:"Tem a certeza?",   
        text: "Os dados do cliente não poderão ser recuperados!",   
        type: "warning",   
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Eliminar",   
        closeOnConfirm: false 
    }, function(){   
        $.post('eliminar_conta.php',{ 
            contr:contr 
        },
        function(data)
        { 
            if(data == "<br>funfou")
            {
                sweetAlert("Sucesso", "O Cliente foi eliminado com sucesso.", "success");
                $("#pesq_nome").slideUp();
                $("#ut_en2").val("");
            }else
            {
                sweetAlert("Erro", "Ocorreu um erro.", "error");
            }

        });
    });


});

    $("#encontraedit").click(function(){ 

        var pesqreal = $("#pesq2contr").val();
        var pesq2contr = $("#pesq2contr").val();
        var pesq2pw = $("#pesq2pw").val();
        var pesq2nome = $("#pesq2nome").val();
        var pesq2morada = $("#pesq2morada").val();
        var pesq2codpost = $("#pesq2codpost").val();
        var pesq2tlm = $("#pesq2tlm").val();
        var pesq2tlf = $("#pesq2tlf").val();
        var pesq2email = $("#pesq2email").val();
        var pesqreal = $("#pesq2contr").val();

        swal({   
        title:"Tem a certeza?",   
        text: "Os dados do cliente serão substituídos!",   
        type: "warning",   
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Substituir",   
        closeOnConfirm: false 
    }, function(){   
        $.post('editar_cliente.php',{ 
            real:pesqreal,
            contribuinte:pesq2contr,
            pw:pesq2pw,
            nome:pesq2nome,
            morada:pesq2morada,
            cod_postal:pesq2codpost,
            tlm:pesq2tlm,
            tlf:pesq2tlf,
            email:pesq2email 
        },
        function(data)
        { 
            if(data == "<br>funfous")
            {
                sweetAlert("Sucesso", "O Cliente foi editado com sucesso.", "success");
                $("#pesq_nome").slideUp();
                $("#ut_en2").val("");
            }else
            {
                sweetAlert("Erro", "Ocorreu um erro.", "error");
            }

        });
    });

    });
  • 1

    You need to delegate these events. Try to change $("#encontraedit").click(function(){ for $(document).on('click', "#encontraedit", function(){ in both places and says here whether it worked.

  • It worked. Thank you Sergio! But what’s the difference between these two?

  • Take a look at the question on the link above. You have the answer there :)

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.