Patrick Traile Patrick Traile - 2 months ago 22
Ajax Question

one event triggers multiple AJAX request

<script>
$(document).ready(function(){
var finishedCount = 0; //Count the amount of completed Ajax requests
var data; //Keep track of the first request's data
var data1; //Keep track of the second request's data
function finished(){
finishedCount++;
if (finishedCount >= 2){ //2 is the amount of requests
//Do what you need done using data and data1
$(document).on('mouseenter','.grid-item',function(){
var container = $(this);
container.find('.title-wrap').html('<p class="job-name">'+ data +'</p>');
container.find('.title-wrap').html('<p class="client-name">'+ data1 +'</p>');
console.log(data);
});

};
};

$(document).on('mouseenter','.grid-item',function(){
var container = $(this);
var jobId = container.children().find('.title-wrap-hidden').text();

$.ajax({
url: 'db_job_name_lookup.php',
type: 'POST',
data: {jobId: jobId},
success: function(data) {
// success
data = data;
finished();
// console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
// error
alert(errorThrown);
}
});


$.ajax({
url: 'db_client_name_lookup.php',
type: 'POST',
data: {jobId: jobId},
success: function(data1) {
// success
data1 = data1;
finished();
// console.log(data1);
},
error: function(jqXHR, textStatus, errorThrown){
// error
alert(errorThrown);
}
});
});



$(document).on('mouseleave', '.grid-item', function(){

var container = $(this);
container.find('.title-wrap').html('<p class="job-name"></p>');
container.find('.title-wrap').html('<p class="client-name"></p>');

});
});




</script>


Hi everyone, I want to use one event to make multiple AJAX request and I want to have both response result available to use at the same time. I tried using the above code, but it only gives back one response at a time and it even looks confused as to which result it should give, I tried using $.when and $.then but I pretty sure I'm not using it right. How would I accomplish this task?

PAGE 1

<?php
require_once("../includes/site_init.php");


if(isset($_POST['jobId']) && $_POST['jobId'] !==NULL && $_POST['jobId'] !==0){
$job_id = $_POST['jobId'];

$portfolio_item_client = JobClient::find_by_sql('SELECT client_id FROM '.'job_client'." WHERE job_id = '" . $job_id . "' ");
$client_name = Client::find_by_sql('SELECT name FROM '.'client'." WHERE id = '" .$portfolio_item_client[0]->client_id."'");
echo $client_name[0]->name;
}else {
echo 'result failed';
}
?>


PAGE 2

<?php
require_once("../includes/site_init.php");


if(isset($_POST['jobId']) && $_POST['jobId'] !==NULL && $_POST['jobId'] !==0){
$job_id = $_POST['jobId'];

$portfolio_item_name = Job::find_by_sql('SELECT name FROM '.'job'." WHERE id = '" . $job_id . "' LIMIT 1");
echo $portfolio_item_name[0]->name;
}else {
echo 'result failed';
}
?>

Answer

Try using $.when to resolve the promises

 $(document).on('mouseenter', '.grid-item', function() {
 var container = $(this);
 var jobId = container.children().find('.title-wrap-hidden').text();

 var ajax = $.ajax({
   url: 'db_job_name_lookup.php',
   type: 'POST',
   data: {
     jobId: jobId
   },
   success: function(data) {
     // success
     data = data;
   },
   error: function(jqXHR, textStatus, errorThrown) {
     // error
     alert(errorThrown);
   }
 });


 var ajax1 = $.ajax({
   url: 'db_client_name_lookup.php',
   type: 'POST',
   data: {
     jobId: jobId
   },
   success: function(data1) {
     // success
     data1 = data1;
   },
   error: function(jqXHR, textStatus, errorThrown) {
     // error
     alert(errorThrown);
   }
 });

 var container = $(this);
 $.when(ajax, ajax1).done(function(data, data1) {
   container.find('.title-wrap').html('<p class="job-name">'+ data +'</p>');
   container.find('.title-wrap').html('<p class="client-name">'+ data1 +'</p>');
 });


 });
 });

if you want to do a single ajax call you do the following: single_page.php

    <?php
require_once("../includes/site_init.php");

header('Content-Type: application/json');
if(isset($_POST['jobId']) && $_POST['jobId'] !==NULL && $_POST['jobId'] !==0){
  $job_id = $_POST['jobId'];

  $portfolio_item_client = JobClient::find_by_sql('SELECT client_id FROM '.'job_client'." WHERE job_id = '" . $job_id . "' ");
  $client_name = Client::find_by_sql('SELECT name FROM '.'client'." WHERE id = '" .$portfolio_item_client[0]->client_id."'");
  $data['client_name']=$client_name[0]->name;

  $portfolio_item_name = Job::find_by_sql('SELECT name FROM '.'job'." WHERE id = '" . $job_id . "' LIMIT 1");
  $data['portfolio_item_name']=$portfolio_item_name[0]->name;
echo json_encode(array('result'=>$data))
}else {
echo json_encode(array('result'=>'result failed'))
}
?>

js:

 $(document).on('mouseenter', '.grid-item', function() {
     var container = $(this);
$.ajax({
       url: 'single_page.php',
       type: 'POST',
       data: {
         jobId: jobId
       },
       success: function(data) {
         container.find('.title-wrap').html('<p class="job-name">'+ data.result.portfolio_item_name  +'</p>');
       container.find('.title-wrap').html('<p class="client-name">'+ data.result.client_name  +'</p>');
       },
       error: function(jqXHR, textStatus, errorThrown) {
         // error
         alert(errorThrown);
       }
     });
 });