How do i send parameter in ajax function call in jquery

Question

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).

Here is interface of front end

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 tried to find such code, i know how it should be done but, i don't know exact jquery — Dheeraj Thedijje
– Dheeraj Thedijje, Commented Jan 23, 2015 at 5:26

Nibin · Accepted Answer · 2015-01-23 05:40:14Z

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;

Darren · Accepted Answer · 2015-01-23 05:26:24Z

1

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

answered Jan 23, 2015 at 5:26

Darren

13.1k4 gold badges44 silver badges81 bronze badges

2 Comments

Cory Danielson Over a year ago

the almighty $ > jQuery

Darren Over a year ago

@CoryDanielson Would go with that, just habit at the moment! Stuck using jQuery instead of $ :(

Ashwin Balamohan · Accepted Answer · 2015-01-23 05:26:38Z

1

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.com";
  $.ajax({ method: "GET", url: url, success: function(data) {
    $("div#question-container").html(data);
  });
});

answered Jan 23, 2015 at 5:26

Ashwin Balamohan

3,3322 gold badges27 silver badges48 bronze badges

Collectives™ on Stack Overflow

How do i send parameter in ajax function call in jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related