How to return POST in the same div in which it is executed AJAX

Question

Actually there are 2 problems: 1º I have a DIV CONTENT where I open via AJAX the content in it, the same is happening like, if I click 2 time on the same link he instead of reloading the page he is simply adding the content again getting 2 content equal in sequence

2º this same page that I load has a form of Ubmit I need that when I click to send it do the service in the same DIV CONTENT that it has already been opened.

Below is the part of the code

php generated upload form

 echo "<form action=\"$_SERVER[PHP_SELF]\" method=\"post\"enctype=\"multipart/form-data\">\n
Arquivo JPG:<br>
<input type=\"file\" name=\"vImage\" />\n
<input type=\"submit\" class=\"btn_enviar\" name=\"submit\" value=\"Enviar\" />";

script

$(document).ready(function(){
$(".btn_receber").click(function(event) {
        event.preventDefault();
    $.ajax({
                   //pegando a url apartir do href do link
        url: $(this).attr("href"),
        type: 'GET',
        context: jQuery('#conteudo'),
        success: function(data){
            this.append(data);
        }
    });     
});

$(".btn_enviar").click(function(event) {
        event.preventDefault();
    $.ajax({
                   //pegando a url apartir da action do form
        url: $(this).parent("form").attr("action"),
        data: 'busca=' +$("#busca").val(),
        type: 'POST',
        context: jQuery('#conteudo'),
        success: function(data){
            this.append(data);
        }
       });     
    });

});

Answer 1

Well I didn’t understand 100% of your question, I’ll try to break in part, come on ...

1- Vc has 1 DIV that when clicking on a link any one loads a form within that DIV, but if you click on the link that loads this form it loads the form again;

2- You want after opened the form within that DIV when the person sends it loads within that DIV itself;

Well if that’s what I understand I’ll try to say what’s wrong in your logic ...

1- The problem of clicking on the link and it loading 2x is because it used the method "append" from Jqyery, this method causes the content you defined to be placed at the end of the element, in case it puts your Ajax call at the end of the DIV how many times click, so I recommend that you switch to the method "html", where his normal behavior is to clear the contents of the element and relocate.

this.append(data); <=> Trocar <=> this.html(data);

2- Already the second problem is that you will have to create a new call Ajax complete for this form filtering the data and tals within this flame, because the way it is sending today to the URL of the "action" that has priority over other events and also the "enctype" is losing in this process and as effect your image UPLOAD will not work ... u draft of what should be done would:

<form id="form">
<!-- Seu formulário -->
<input type="button" class="btn_enviar" name="submit" value="Enviar" />
</form>

$(".btn_enviar").click(function(event) {
 //Execura as ações de leitura do formulário aqui, isoladamente
}

I don’t know if it’s clear ...