CODEWITHSUNDEEP
jqueryajax
thomas
thomas

Reputation: 163

How to change data on link click (using ajax)?

My code works but if I click on link 1, link 1's data should show in the div. If I click on link 2, link 1's data will disappear and link 2's data will be displayed. But the way the code is working, link 1's data shows up and then link 2's data will show up underneath it and neither will disappear.

The SQL:

    if(isset($_GET['id']))
    {
$sql_query="SELECT * FROM PresidentialCandidate WHERE ID=".$_GET['id'];
     $result_set=mysqli_query($mysqli,$sql_query);
     $row=mysqli_fetch_array($result_set,MYSQLI_ASSOC);
    }

The Ajax:

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

    //Declare 'this' outside of AJAX because of asynchronous nature of call
    that = jQuery(this);

    //Make AJAX call to the PHP file/database query
    jQuery.ajax({
        url:'http://dirtypoliticsph.com/chart-submission/templatecode.php',
         type:'GET',
        data:{id:jQuery(this).attr('data-id')},
        success:function(data){
            jQuery('#myStyle').append(data);
        }
    });
});
  });

Upvotes: 0

Views: 768

Answers (1)

BenG
BenG

Reputation: 15154

replace:-

jQuery('#myStyle').append(data);

with 

jQuery('#myStyle').html(data);

append adds data to the bottom of #myStyle where html will replace the content in #myStyle.

Upvotes: 2

Related Questions