Two target for one <a> tag and display two results in two different div

Question

Student.php -here i am getting list of students from a specific Institution in a tag

    <?php
        if(isset($_POST['c_id'])) {  //input field value which contain Institution name
        $val=$_POST['c_id'];
        $sql="select RegistrationId from `students` where `Institution`='$val' ";
        $result = mysql_query($sql) or die(mysql_error()); 
        while ($row = mysql_fetch_array($result)){
                   $number=$row['RegistrationId'];

        ?>
        <a href='<?php echo "index.php?StudentID=$number"; ?>' target="index" id="link">
        //getting student id in the dynamic link
        <?php    echo  "$number";
         echo "<br/>";
            }}
         ?>
         <div id="index" name="index"> </div>
         <div id="Documents"> </div>
         <script>
            $(document).on('change', 'a#link', function()
            {
               $.ajax({
                 url: 'Documents.php',
                 type: 'get',
                 success: function(html) 
                    {
                       $('div#Documents').append(html);
                    }
                     });
            });
         </script>

In index.php - I am Getting students details based on $_GET['StudentID'] ('a' tag value)

        <?php
        $link=$_GET['StudentID'];
        $sql = "select StudentName,Course,Age,Address from `students` where `RegistrationId`="."'".$link."'";
        $result = mysql_query($sql) or die(mysql_error()); 
        while ($row = mysql_fetch_array($result))
        {
        echo  $row['StudentName']."<br/>";
        echo $row['Course']."<br/>";
        echo $row['Age']."<br/>";
        echo $row['Address']."<br/>";
        }
        ?>

In Documents.php -I am getting documents related to the speific student selected in 'a' tag

        $link=$_GET['StudentID'];
        $qry =  "select Image,Marksheet from `documents` where `RegistrationId`='$link'";
        $result = mysql_query($qry) or die(mysql_error());   
        while ($row = mysql_fetch_array($result))
        {
        $image = $row["Image"]; 
        $image1 = $row["Marksheet"];
        echo    '<embed src='. $image.'>';
        echo    ' <object data='. $image1.'width="750" height="600">';
        echo    '  </object>';
        }
         

On click of student id i am trying to get result from index.php to div() and result from Documents.php to div() (ie)two target for one click in tag

My code only take me to the index.php file result in a new Window Please Help me to solve this problem (sorry if my question seems silly i am new to php)

Update:

        $(document).on('click', 'a#link', function(e) {
         e.preventDefault();
          $.ajax({
                url:"details.php",
               
                type:'POST',
                success:function(response) {
                  var resp = $.trim(response);
                  $("#index").html(resp);
                 alert(resp);
                }
              });
            
          });
          $(document).on('click', 'a#link', function(e) {
           e.preventDefault();
          $.ajax({
                url:"index.php",
                type:'POST',
                success:function(response) {
                  var resp = $.trim(response);
                  $("#Documents").html(resp);
                 alert(resp);
                }
              });
            
          });

Answer 1

From your question, it seems that you want to load the two results, one from index.php and one from Documents.php in two separate divs on the same page when the link is clicked.

But you're using a change event on the link, not a click event. The change event is not fired when the link is clicked, so JavaScript does not get executed and the page loads to the URL specified in the href attribute of the link. So first you need to change $(document).on('change') to $(document).on('click') .

Furthermore, since you want two results to load - one from index.php and one from Documents.php, you'll need to create two ajax requests , one to index.php and the other for Documents.php. In the success function of each of the ajax requests, you can get the response and put it in the corresponding divs.

In addition to this, you'll also need to prevent the page from loading to the new page specified in href attribute when the link is clicked, otherwise the ajax requests fired on clicking the link will get lost in the page load. Thus, you need to add a e.preventDefault(); to your onclick event handler like this:

$(document).on('click', 'a#link', function(e) {

    // Stop new page from loading
    e.preventDefault();

    // Two ajax requests for index.php and Documents.php
});

Update: You don't need to add two click handlers for each ajax request. Inside one click handler, you can put both the ajax requests.

Also your event handlers won't register if you're adding them before jQuery, or if you're adding them before the DOM has loaded. So move your code to bottom of the HTML page, just before the closing </body> tag.

 $(document).on('click', 'a#link', function(e) { e.preventDefault(); $.ajax({ url:"details.php", type:'POST', success:function(response) { var resp = $.trim(response); $("#index").html(resp); alert(resp); } }); $.ajax({ url:"index.php", type:'POST', success:function(response) { var resp = $.trim(response); $("#Documents").html(resp); alert(resp); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="index.php?StudentID=1" id="link">Link</a>

Answer 2

You can change your <a> tag like below :

 <a href="#" data-id='<?php echo $number; ?>' class="link"> .. </a>

Then , in your jquery code do below changes :

$(document).on('click', 'a.link', function(e) {
  var StudentID = $(this).attr("data-id") //get id
  console.log(StudentID)
  e.preventDefault();
  $.ajax({
    url: "details.php",
    data: {
      StudentID: StudentID
    }, //pass same to ajax
    type: 'POST',
    success: function(response) {
      //do something
      call_next_page(StudentID);//next ajax call
    }
  });

});

function call_next_page(StudentID) {
  $.ajax({
    url: "index.php",
    data: {
      StudentID: StudentID
    }, //pass same to ajax
    type: 'POST',
    success: function(response) {
      //do something
    }
  });

} 

And then at your backend page use $_POST['StudentID'] to get value of student id instead of $_GET['StudentID'];