Using a href onclick to update div without reloading page?

Question

I used this existing question to help me out: HTML - Change\Update page contents without refreshing\reloading the page

The template-comparison.php file fetches the code from the header.php code but the actual "fetch code" isn't shown. Otherwise, the template page would have no header. The templatecode.php file is the code used to fetch and display the database data.

My code:

template-comparison.php

    <a href="#" onClick="prescand('1')" >link text</a>
    <a href="#" onClick="prescand('2')" >link text 2</a>
    <div id='myStyle'>
    </div>

templatecode.php

    <?php
    $servername = "localhost";
    $username = "hidden for security purposes";
    $password = "hidden for security purposes";
    $dbname = "hidden for security purposes";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

      $ID = $_GET['ID'];
      $results = mysql_query("SELECT * FROM PresidentialCandidate WHERE  ID='$ID'");   
      if( mysql_num_rows($results) > 0 )
      {
       $row = mysql_fetch_array( $results );
       echo $row['ID'];
      }
    ?>

header.php

   <script type="text/javascript">
    function prescand(ID) {
      $('#myStyle').load('templatecode.php?id=' + ID);
    }
    </script>

What happens:

I click the link. Nothing happens. It just acts like an anchor that pushes me to the top of the page.

Any ideas? What I want is to have ALL of the data for the link clicked (eg: ID 1...link text) to be displayed in the div. If I click, ID 2 (link text 2), the data for that ID is shown.

Answer 1

I have a longer answer below but one thing you can do to prevent it from acting like an anchor tag is to just call event.preventDefault(); on the onclick() before your function:

template-comparison.php

<a href="#" onClick="event.preventDefault();prescand('1');" >link text</a>
<a href="#" onClick="event.preventDefault();prescand('2')" >link text 2</a>
<div id="myStyle">
</div>

---

Use AJAX like this:

template-comparison.php

<a href="#" class="query-link" data-id="1">link text</a>
<a href="#" class="query-link" data-id="2">link text 2</a>
<div id="myStyle">
</div>

header.php

jQuery(document).ready(function(){
    jQuery('a.query-link').on('click', function(e){    
        //Prevent the link from working as an anchor tag
        e.preventDefault();

        //Make AJAX call to the PHP file/database query
        jQuery.ajax({
            url:'{PATH TO FILE}/templatecode.php',
            type:'POST',
            data:{id:jQuery(this).data('id')},
            success:function(data){
                jQuery('#myStyle').append(data);
            }
        });
    });
});

templatecode.php

<?php
$servername = "localhost";
$username = "hidden for security purposes";
$password = "hidden for security purposes";
$dbname = "hidden for security purposes";

// Create connection
$mysqli = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
} 

  $ID = $_POST['ID'];
  $results = $mysqli->query("SELECT * FROM PresidentialCandidate WHERE  ID='$ID'");   
  if( $results->num_rows > 0 )
  {
   $row = mysqli_fetch_array($results,MYSQLI_ASSOC);

    //Instead of just echoing out the ID, you need to build the result/data that you want in the div right here. The success function of the AJAX call will append whatever you echo out here
    echo $row['ID'];
  }
?>

BTW, I updated your PHP code to use MySQLI properly instead mixing MySQL with MySQLi.

After seeing your site (WordPress), you're not going to want to load this in the header.php directly. One of the issues is that jQuery is being loaded AFTER this script so it doesn't have the jQuery variable to use yet when it loads. You can try by putting it in the footer.php file but the 'right' way to do it is to put it in an external script and then load it using wp_enqueue_script in your functions.php file.

Answer 2

$results = mysql_query("SELECT * FROM PresidentialCandidate WHERE  ID='$ID'");   
if( mysql_num_rows($results) > 0 )
{
   $row = mysql_fetch_array( $results );
   echo $row['ID'];
}

Replace with:

$sql = "SELECT * FROM PresidentialCandidate WHERE  ID='$ID'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  echo $row['ID'];
}

Please don't mix both mysql_* & mysqli_* functions.

Answer 3

just remove href from anchor link and it'll just call the function and will not redirect to #

<a onClick="prescand('1')" >link text</a>

Answer 4

If you are using jQuery you can avoid DOM onClick triggers and use the jQuery events instead. Also when you have a hashtag as href in your anchors it puts the hashtag in the URL when clicked because it assumes it is an element ID. You can change that as show below, or even ommit it:

<a href="javascript:;" class="foo" data-target="1" >link text</a>

Now you can bind the events using jQuery:

$(document).ready(function(){
    $('.foo').on('click', function(e){
        e.preventDefault();
        prescand($(this).data("target"));
    });
});

You might also use the $('a') jQuery selector, but usually you want to be a bit more specific and target only certain anchors by grouping them together with a certain class.

The loading function is OK as is.