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

Question

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

replace append with html. append adds where html will replace. — BenG
– BenG, Commented Dec 17, 2015 at 13:24
simple solution ... use html(data) instead of append(data) — charlietfl
– charlietfl, Commented Dec 17, 2015 at 13:24
@David - I have no idea, hence why this question was posted. To the other 2 replies, thanks :) — thomas
– thomas, Commented Dec 17, 2015 at 13:30

BenG · Accepted Answer · 2015-12-17 13:28:05Z

2

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.

answered Dec 17, 2015 at 13:28

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related