Due target per un tag <a> e visualizzare due risultati in due div diversi

Oct 10 2020

Student.php -qui ottengo l'elenco degli studenti di un'istituzione specifica in un 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 - Sto ottenendo i dettagli degli studenti in base a $ _GET ['StudentID'] (valore del tag 'a')

        <?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, ricevo i documenti relativi allo studente specifico selezionato nel tag "a"

        $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>';
        }

Al clic dell'ID studente sto cercando di ottenere il risultato da index.php a div () e il risultato da Documents.php a div () (cioè) due target per un clic nel tag

Il mio codice mi porta solo al risultato del file index.php in una nuova finestra Per favore aiutami a risolvere questo problema (scusa se la mia domanda sembra sciocca, sono nuovo in php)

Aggiornare:

        $(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);
                }
              });
            
          });

Risposte

Swati Oct 10 2020 at 21:27

Puoi modificare il <a>tag come di seguito:

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

Quindi, nel tuo codice jquery fai le seguenti modifiche:

$(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
    }
  });

}

E poi nella tua pagina di backend usa $_POST['StudentID']per ottenere il valore dell'ID studente invece di$_GET['StudentID'];

1 nvkrj Oct 10 2020 at 19:16

Dalla tua domanda, sembra che tu voglia caricare i due risultati, uno da index.php e uno da Documents.php in due div separati sulla stessa pagina quando si fa clic sul collegamento.

Ma stai utilizzando un evento di modifica sul collegamento, non un evento di clic . L'evento di modifica non viene attivato quando si fa clic sul collegamento, quindi JavaScript non viene eseguito e la pagina viene caricata nell'URL specificato nell'attributo href del collegamento. Quindi prima devi passare $(document).on('change')a $(document).on('click').

Inoltre, poiché vuoi caricare due risultati, uno da index.php e uno da Documents.php, dovrai creare due richieste ajax , una per index.php e l'altra per Documents.php. Nella funzione di successo di ciascuna delle richieste ajax, puoi ottenere la risposta e inserirla nei div corrispondenti.

Oltre a questo, dovrai anche impedire che la pagina si carichi sulla nuova pagina specificata nell'attributo href quando si fa clic sul collegamento, altrimenti le richieste ajax attivate facendo clic sul collegamento andranno perse nel caricamento della pagina. Pertanto, è necessario aggiungere un e.preventDefault();al gestore di eventi onclick in questo modo:

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

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

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

Aggiornamento: non è necessario aggiungere due gestori di clic per ogni richiesta ajax. All'interno del gestore di un clic, puoi inserire entrambe le richieste ajax.

Inoltre, i gestori di eventi non si registreranno se li aggiungi prima di jQuery o se li aggiungi prima che il DOM sia stato caricato. Quindi sposta il codice in fondo alla pagina HTML, subito prima del </body>tag di chiusura .