Member Avatar for abhi10kumar

I want to run two ajax functions on click event of checkbox.
When I do implement second second ajax functions, first one does not runs.

Here is the code
Check Box

<input type="checkbox" value="<?php if(isset($_POST['inactive_check'])) echo $_POST['inactive_check']; ?>" [B]onclick="disablebatch(); selectinactivecourse(this.checked); allbatches(this.value); "[/B] id="inactive_check" name="inactive_check" <?php if(isset($_POST['inactive_check'])) echo "checked";?>></div><div style=" float:left; padding-top:2px; padding-left:5px;">

In the bold, its ok to call more two AJAX functions ??

  • 3 Contributors
  • 2 Replies
  • 553 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for hielo

well, I see three function calls bolded, but what you need to do is call just ONE function and from that function you do your first ajax call. On that first ajax call, you should have a callback function - the function that executes upon completion of the ajax request. WITHIN THAT callback function call your other ajax function - ex:

<script>
function clickHandler(cb){
  disablebatch(); 
  //assuming that the following two are making the ajax calls
  //then calling these sequentially will still give you problems
  //  selectinactivecourse(cb.checked); 
  //  allbatches(cb.value);
  //
  //instead call the first one, passing the checkbox reference
  //(intead of just true/false):
  selectinactivecourse(cb); 
}

function selectinactivecourse(checkBox)
{
  //here you checkBox.checked will evaluate to true or false
  //depending on the state of the checkbox. So by passing the reference
  //to the checkbox you still can get the needed info you had previously
  var isChecked=checkBox.checked;

   //doyour ajax stuff
   xhr=...;
 
  //here you have your anonymous callback function
  xhr.onreadystatechange=function(){
     if( xhr.readyState==4)
     {
        allbatches(checkBox.value);
     }
   };

  xhr.send(...);
}
</script>
<input type="checkbox" value="<?php if(isset($_POST['inactive_check'])) echo $_POST['inactive_check']; ?>" onclick="clickHandler(this)" id="inactive_check" name="inactive_check" <?php if(isset($_POST['inactive_check'])) echo "checked";?>></div><div style=" float:left; padding-top:2px; padding-left:5px;">
Member Avatar for diafol

You can use jQuery to ease the pain of ajax calls. Also, writing inline js is to be discouraged. Much better to put a listener into the head or an external file.

Also there seems to be a lot of 'inline php', easier to process all the $_POST stuff above the DTD and apply simply later on. Just tidies up your html, it doesn't change the functionality:

<?php
$ic_chk="";
$ic = "...";//default value for checkbox
if(isset($_POST['inactive_check'])){
  $ic = $_POST['inactive_check'];
  //this should be validated and cleaned for use in the form - you can't trust this
  $ic_chk = ' checked = "checked"';
}
?>
DTD...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/myajax.js"></script> <!-- your ajax file with all your functions -->
<script type="text/javascript">
   $('#inactive_check').click({function(){
      alert('do what you want here'); 
      /* call functions */
   });
</script>
</head>
<body>
...
<input type="checkbox" value="<?php echo $ic;?>" id="inactive_check" name="inactive_check"<?php echo $ic_chk";?> />
...
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.