How to return POST in the same div on which it runs AJAX

Question

How to return POST in the same div on which it runs AJAX

Navigation

#1 by (2 votes)

2

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

2º this same page that I carry has an accurate submit form that when I click send it do the service in the same DIV CONTENT that it has already been opened.

Below is part of the code

upload form generated by php

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

});

php jquery ajax

asked by anonymous 04.02.2016 / 23:35

1 answer

Shorten Google Analytics tracking URL (variables only) What is the best way to undo a merge with elements in staged and modfy with conflicts?

score 2 · Answer 1

Well I do not understand 100% of your question, I'll try to break it in part, come on ...

1 - You have 1 DIV that when clicking on a link any one loads a form within this DIV, however if you click on the link that loads this form it loads the form again

Well if that's what I understand I'll try to say what's wrong with your logic ...

1- The problem of clicking the link and it loads 2x is because it used the "append" method of JQyery, this method causes the content that you set it to be placed at the end of the element, in case it puts your Ajax call to the end of the DIV as many times as you click, so I recommend that you change to the "html ", where its normal behavior is to clear the content of the element and replace it.

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

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

<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 do not know if it was clear ...