I'm creating an online exam application in PHP and am having trouble with the AJAX calls.

I want the questions to be fetched (and used to populate a div) using an AJAX call when one of the buttons on the right are clicked. These buttons are not static; they are generated on the server (using PHP).

I'm looking for an AJAX call to be something like this:

functionname=myfunction(some_id){
ajax code
success: 
html to question output div
}

and the button should call a function like this:

<button class="abc" onclick="myfunction(<?php echo $question->q_id ?>)">

Please suggest an AJAX call that would make this work

I'm creating an online exam application in PHP and am having trouble with the AJAX calls.

I want the questions to be fetched (and used to populate a div) using an AJAX call when one of the buttons on the right are clicked. These buttons are not static; they are generated on the server (using PHP).

I'm looking for an AJAX call to be something like this:

functionname=myfunction(some_id){
ajax code
success: 
html to question output div
}

and the button should call a function like this:

<button class="abc" onclick="myfunction(<?php echo $question->q_id ?>)">

Please suggest an AJAX call that would make this work

• javascript
• php
• jquery
• ajax

• i tried to find such code, i know how it should be done but, i don't know exact jquery – Dheeraj Thedijje Commented Jan 23, 2015 at 5:26

3 Answers 3

HTML

<button class="abc" questionId="<?php echo $question->q_id ?>">

Script

$('.abc').click(function () {
 var qID = $(this).attr('questionId');
 $.ajax({
     type: "POST",
     url: "questions.php", //Your required php page
     data: "id=" + qID, //pass your required data here
     success: function (response) { //You obtain the response that you echo from your controller
         $('#Listbox').html(response); //The response is being printed inside the Listbox div that should have in your html page. Here you will have the content of $questions variable available
     },
     error: function () {
         alert("Failed to get the members");
     }
 });

})

The type variable tells the browser the type of call you want to make to your PHP document. You can choose GET or POST here just as if you were working with a form.

data is the information that will get passed onto your form.

success is what jQuery will do if the call to the PHP file is successful.

More on ajax here

PHP

 $id = gethostbyname($_POST['id']);
 //$questions= query to get the data from the database based on id
return $questions;

You are doing it the wrong way. jQuery has in-built operators for stuff like this.

Firstly, when you generate the buttons, I'd suggest you create them like this:

<button id="abc" data-question-id="<?php echo $question->q_id; ?>">

Now create a listener/bind on the button:

jQuery(document).on('click', 'button#abc', function(e){
    e.preventDefault();
    var q_id = jQuery(this).data('question-id'); // the id

    // run the ajax here.
});

I would suggest you have something like this to generate the buttons:

<button class="question" data-qid="<?php echo $question->q_id ?>">

And your event listener would be something like the following:

$( "button.question" ).click(function(e) {
  var button = $(e.target);
  var questionID = button.data('qid');
  var url = "http://somewhere.";
  $.ajax({ method: "GET", url: url, success: function(data) {
    $("div#question-container").html(data);
  });
});