Fetching variables through Ajax

Question

I am having problem fetching table through ajax. Here is my ajax function:

function search() {
    var JobFunction_Id=document.getElementById("JobFunction_Id").value;
    var JobFamily_Id=document.getElementById("JobFamily_Id").value;
    var flag=0;
    var newreq=createRequest();
    if(JobFunction_Id!='' && JobFamily_Id!='') { flag=1; }    

    if(flag==1) {    
        var url=("Talent_S_New.php?JobFunction_Id="+JobFunction_Id+"&      JobFamily_Id="+JobFamily_Id);

        newreq.onreadystatechange=function() {
              alert('hi');
              if(newreq.readyState==4 && newreq.status==200) {

                   if(newreq.responseText!='') {
                       document.getElementById("display_result").innerHTML  =newreq.responseText; }
                    //else {    
                    // document.getElementById("display_result").innerHTML  =newreq.responseText;                     
                    //}
              }
        }
        newreq.open("GET",url,true);
        newreq.send();
    }
}

I am trying to fetch output variables with table info from this page.

echo('<table style="border:1px solid red" >');
echo('<th>');
echo('First Name');
echo('</th>');
echo('<th>');
echo('Last Name');
echo('</th>');
echo('<tr>');
echo('<td style="border:1px solid red">');

foreach($Allemp as $key=>$value) {
   if (array_key_exists('Error', $Allemp))
   {    echo($value);   }
   else
   {    echo($value["Emp_FirstName"]);  }

   //echo('</td>');
   //echo('<td style="border:1px solid red">');

   if (array_key_exists('Error', $Allemp))
   {    echo($value);   }
   else
   {    echo($value["Emp_LastName"]);   }
}
echo('</td>');
echo('</tr>');
echo('</table>');

Without ajax above code works fine. You can observalert('hi'). If I put that alert it goes into if(newreq.readyState==4 && newreq.status==200) loop and result will be shown for a second and disappers again. I think it's going into foreach loop bcos it shows alert 5 times and displays result for a second and disappears. Any idea to fix this?

What do you see in your Javascript console when you log newreq.readyState and newreq.status instead of alerting 'hi'? — Jasper de Vries
– Jasper de Vries, Commented Aug 31, 2012 at 12:49
Your Javascript will not receive anything until the PHP code has finished executing, so it has nothing to do with it going into the foreach loop. What do you get if you just load the PHP script directly in the browser (go to the URL of the PHP script)? Do you see the alert('hi') if you put it inside the if-statement? Instead of the document.getElementById('display_result')... part, try console.log('response text = '+ newreq.responseText) and see what shows up in your browser console (usually hit F12 to see it). — Travesty3
– Travesty3, Commented Aug 31, 2012 at 12:50
hello jasper if i dont use "alert" i dont see anything it does not load outpage at all..well Travesty3 iam going to try your steps and let you know — user1178070
– user1178070, Commented Sep 4, 2012 at 4:53

Aesthete · Accepted Answer · 2012-08-31 12:51:15Z

1

Since you marked this as jQuery, I'm pretty sure most of this can be changed to something close to:

var url=("Talent_S_New.php?Function_Id="+JobFunction_Id+"&JobFamily_Id="+JobFamily_Id);
$.ajax(url, {
  type: "GET",
  success: function(data, status) {
    alert("success!");
    $("#display_result").html(data); // Incoming data placed in 'display_result'
  },
  error: function(jqXHR, textStatus){
    alert("error..");
  }
});

Whether this fixes your issue, I have no idea. But you marked it as jQuery and I don't see one jQuery call in your code.

answered Aug 31, 2012 at 12:51

Aesthete

18.9k6 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1178070 Over a year ago

thanks for your reply dear.. sorry i think its my mistake.. but i need to do it through javascript ajax not jquery

greg · Accepted Answer · 2012-08-31 12:53:10Z

0

Why not using jQuery AJAX ?

here's an example :

$.ajax({
  type: "GET",
  url:'Talent_S_New.php',
  data:$('form').serialize,
  complete: function() { alert('hi'); }
  success: function(data) {
      $('#display_result').html(data.responseText);
  } 
});

answered Aug 31, 2012 at 12:53

greg

813 bronze badges

Collectives™ on Stack Overflow

Fetching variables through Ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related