CODEWITHSUNDEEP
javascriptphpjqueryajax
Ariel
Ariel

Reputation: 51

Second AJAX function fails when other AJAX function has already been executed

I have a file that shows a bunch of orders, each of which has a button with an ajax function that sends an email. Aside from that, every 30 seconds another ajax function runs and searches for new orders and loads them on top. When I first load the page, the send mail function works just fine. But once the function that searches for new orders has been executed for the first time, when I click the button that fires the mail ajax function, it doesn't send it and reloads the page

I have checked for repeated variable and function names that might conflict but there's none. The functions work just fine on their own, only when the order-searching one has been executed the other one starts to fail

this is the simplified html code for each form (there are many orders on the page with different ids)

<form role="form" id="contactForm4081">
    <div class="form-group fg4081">
        <label for="message" class="h4 ">Tiempo de entrega</label>
        <!--  <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea> -->
        <input type="hidden" value="Santiago" name="name4081" id="name4081" />
        <input type="hidden" value="[email protected]" name="email4081" id="email4081" />
        <select name="message4081" id="message4081" required>
            <option value="15">15 min</option>
            <option value="30">30 min</option>
            <option value="45">45 min</option>
            <option value="60">60 min</option>
        </select>
        <button type="submit" id="form-submit" class="btn btn-default btn-md pull-right ">Enviar mail</button>
    </div>

    <div id="msgSubmit4081" class="h4 text-center hidden">Tiempo de entrega enviado.</div>
</form>

this is the mail function

$("#contactForm4081").submit(function(event){
    // cancels the form submission
    event.preventDefault();
    submitForm4081();
});
  function submitForm4081(){
    // Initiate Variables With Form Content
    var name4081 = $("#name4081").val();
    var email4081 = $("#email4081").val();
    var message4081 = $("#message4081").val();
 
    $.ajax({
        type: "POST",
        url: "php/process.php",
        data: "name=" + name4081 + "&email=" + email4081 + "&message=" + message4081,
        success : function(text){
            if (text == "success"){
                formSuccess4081();
            }
        }
    });
}
function formSuccess4081(){
    $( "#msgSubmit4081" ).removeClass( "hidden" );
    $( ".fg4081" ).addClass( "hidden" );
}

and this is the function that looks for new orders

var ultimoid = 4081;
var xultimoid = "";

  function nuevospedidos() {
     var xhttp = new XMLHttpRequest();
xhttp.open("POST", "cosito3.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var response = JSON.parse(this.responseText);
     console.log(response);
    var element = document.querySelector('#contenidogral');
    var content = element.innerHTML;
    ultimoid = response.ultimoid;
    element.innerHTML = response.contenido + content;
    }
  };
  xhttp.send("ultimoid="+encodeURIComponent(ultimoid));

  }
setInterval( nuevospedidos, 30000);

Upvotes: 2

Views: 80

Answers (1)

Brajesh Singh
Brajesh Singh

Reputation: 653

Instead of -

$("#contactForm4081").submit(function(event){ // cancels the form submission event.preventDefault(); submitForm4081(); });

Try with this - 

 $(document).on("submit","#contactForm4081",function(event){
    event.preventDefault();
    submitForm4081();
});

Upvotes: 3

Related Questions