link not loading data from database using ajax/jquery

Question

If I click on a link, it's supposed to load data from the database that corresponds to that link and display the data into a div, but when I click, nothing happens. Based on my original question which had so many comments, I decided to start fresh: Using a href onclick to update div without reloading page?

My code:

the page that displays the links and data:

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

javascript file:

    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:'POST',
        data:{id:jQuery(this).data('id')},
        success:function(data){
            jQuery('#myStyle').append(data);
        }
            });
        });
    });

templatecode.php (the file that calls the database):

    if(isset($_GET['id']))
    {
      $results = $mysqli->query("SELECT * FROM PresidentialCandidate WHERE ID=".$_GET['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'];
      }
    }

Your using `type:'POST'` in the ajax call, but trying to get the id from `$_GET`. This should be `$_POST` or change the type in your ajax to get so they match. — Tristan, Dec 16 '15 at 23:36

Fevly Pallar · Answer 1 · 2015-12-18T06:08:49.000

0

You said that you want to load data from database that corresponds to that link, but I don't see any selectors referring to the anchor tag as the response from the server. Add the following after your jQuery('#myStyle').append(data); :

 jQuery('.query-link').append(data);

and use $_POST in your templatecode . By the way since those anchors use the same class name, so both of them will be affected.

edited Dec 18 '15 at 06:08

answered Dec 17 '15 at 00:09

Fevly Pallar

3,059
2
15
19

I changed all occurrences of POST to GET because I had a different variation of this code working (fetching data from the database and updating it via an edit form) using GET. But my new problem is I get an error with this code `echo $row['id'];` Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/dirtypol/public_html/chart-submission/templatecode.php on line 28 – thomas Dec 17 '15 at 00:50
You didn't quote the query correctly there , it should be `("SELECT * FROM PresidentialCandidate WHERE ID=' ".trim($_GET['id']). " ' ")` , note that I add the `trim` there to eliminate extra space at the start & at the end of the id. Test it using the POST first before moving to GET so that you know what we're talking here. – Fevly Pallar Dec 17 '15 at 01:02
does the WHERE ID code affect the `echo $row['id']` code that has the error? – thomas Dec 17 '15 at 01:42
Update: As I posted above in another comment reply, I changed all instances of GET with POST and now the console isn't even showing an id. It just says templatecode.php. I also fixed the query string using POST but still doesn't work – thomas Dec 17 '15 at 04:14
Got it to work using GET, some mysqli code and bits of code that was from a previously working similar script. – thomas Dec 17 '15 at 12:14

score 0 · Answer 2 · answered Dec 17 '15 at 00:10

0

Try:

data:{id:jQuery(this).attr('data-id')},

You need to fetch the 'data-id' attribute of the element:

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

answered Dec 17 '15 at 00:10

Franco

2,309
1
11
18

doesn't work. check it out for yourself: http://dirtypoliticsph.com/presidential-candidate-comparison/ – thomas Dec 17 '15 at 00:18
Please note that the problem is not fetching the id, you must do it in this way. In my console the ajax has the correct id: http://dirtypoliticsph.com/chart-submission/templatecode.php?id=2. As @Fevly Pallar suggest you are not appending the data correctly. And once againg you need to use the $_POST and not the $_GET, and also in both places – Franco Dec 17 '15 at 00:26
I changed all instances of GET with POST and now the console isn't even showing an id. It just says templatecode.php. – thomas Dec 17 '15 at 04:13

link not loading data from database using ajax/jquery

2 Answers2