Fetch result from database when link clicked

Question

I'm using this HTML code;

if ($forum['type'] != 'c' && !$forum['linkto'] && $forum['posts'])
{
    $forum['collapsed_image'] = '
        <div class="expcolimage">
            <a id="forum_name" fid="'.$fid.'">
                <img src="images/collapse_collapsed.gif" id="ann_'.$forum['fid'].'_img" class="expander" alt="[-]" title="[-]" />
            </a>
        </div>';
}
else
{
    $forum['collapsed_image'] = '';
}

What I want to do is to make it so when this link is clicked then an sql query should be run on a PHP page which fetches a result from database show that result in a <div> on an HTML page (or to show that result just under that link on the same page)

Due to limited knowledge in javascript I'm unable to code a javascript function which do that process, can you please provide me an example? I'll be very thankful to you.

Thank you!

PLEASE NOTE: I only want to use javascript and not jQuery

Just a side question: why not jQuery? using jQuery this would be so easy. — briosheje, Aug 14 '14 at 15:51
It seems excessive to load jQuery if you only want to make a single AJAX request. http://www.w3schools.com/ajax/ajax_database.asp — Dave Salomon, Aug 14 '14 at 15:52
I would highly recommend you NOT write your own AJAX handler. It's not trivial and there's some potential gotchas. jQuery or Prototype JS would help you out a ton here. — Machavity, Aug 14 '14 at 15:52
possible duplicate of [How to make an ajax call without jquery?](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Machavity, Aug 14 '14 at 15:54
@ Machavity: Then please create a prototype code. Can you please give me an example? Thanks — user2854563, Aug 14 '14 at 15:56

score 1 · Accepted Answer · answered Aug 14 '14 at 15:58

This is how you can do this:

test.php - the entire script is to be placed on this single script.

<?php

// Handle GET Request
if (isset($_GET['loadData']) && isset($_GET['id']))
{
    // Dummy Response
    // you should query the database here
    exit("hello #". $_GET['id']);
}

?>

<script type="text/javascript">

function ajaxCall(url, callback) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               callback(xmlhttp.responseText);
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function loadData(id)
{
    ajaxCall('test.php?loadData&id='+ id, function(result) {
        document.getElementById('result').innerHTML = result;
    });
}

</script>

Click any of these links: <br>
Result: <div style="display: inline;" id="result"></div>

<br><br>

<?php

// this is your initial database query result with links
for ($i = 1; $i <= 3; $i++)
{
    echo "&bull; Hello, I am #$i. <a href='#' onclick='loadData($i);'>Click here<a> to load data.<br>";
}

?>

Demo:

enter image description here

score 0 · Answer 2 · answered Aug 14 '14 at 16:05

The problem here is the way you're creating your html object. By doing it in one line you can't attach a listener for the click event.

I suggest to create elements in the javascript style:

var container = document.createElement("div");
container.className = "expcolimage";
var link = document.createElement("a");
link.setAttribute("fid", $fid);
var img = document.createElement("img");
img.src = "images/collapse_collapsed.gif";
img.id = "ann_" + $forum['fid'] + "_img";
img.className = "expander";

link.appendChild(img);
container.appendChild(link);
$forum['collapsed_image'] = container;

link.click(function(event){
    event.preventDefault();
    //AJAX code
});

Then I suggest you to look at these examples for choosing the best for you: http://www.w3schools.com/ajax/ajax_examples.asp

Fetch result from database when link clicked

2 Answers2