Using AJAX on click (jQuery, PHP, MySQL)

Question

Getting into the swing of AJAX for my next project and I'm a little overwhelmed! I have an order form page, and on the page there are approx 50 users and each of them have a tremendous amount of data. It'd be silly to display all the info straight off the bat because load times etc. So instead, just display a summary of the person and when clicked, use AJAX to pull out their order.

My example so far:

<div class="row bottom-buffer">
                    <div class="col-sm-2">
                            $date
                    </div>
                    <div class="col-sm-3">
                        <a href="#" class="person" name="order_no">$name</a>
                    </div>
                    <div class="col-sm-2">
                        $order_status
                    </div>
                    <div class="col-sm-3">
                        $order_date
                    </div>
                    <div class="col-sm-2 text-center">
                        <A href="#" class="person" name="order_no">$order</A>
                    </div>
                </div>
<div class="contactInfo ">
    <form action="#" method="post">
        //Big a$$ order I want pulled from the DB such as name, order number, order status, notes, payment etc
    </form>
</div>

when the link is clicked (class="person") a dropdown will appear displaying the form for that user. The following code I have is:

j$('.person').click(function(e) {
    j$(this).closest('.row').next().slideToggle();
});

I have the SQL ready to go, I just don't know how to AJAX to call my PHP file. Do I do the AJAX call in the .click function? Any help would be greatly appreciated!

"Do I call AJAX..." - Yes. Use : $.post('phpfile.php', {params:params}, function(response){//code...}); — Patrick Geyer
– Patrick Geyer, Commented Feb 4, 2014 at 23:26

James · Accepted Answer · 2014-02-05 02:45:46Z

1

We've all struggled with this when we first started. Here is a good way to handle it.

Ajax function that you can reuse.

function ajaxGet(url, callBack){
    $.ajax({
        'url':url,
        'dataType': 'json'
    }).done(function(response){
        //ajax has finished and you've receive the response
        //now just pass the response to the callBack
        window[callBack](response);
    }).fail(function(x, h, r){
        console.log("fail: " + r);
    });
}

Then you can call it like this

ajaxGet("/some/url?with=params", "nameOfSomeCallBackFunction");

you will need to create the callback function

function nameOfSomeCallBackFunction(response){
    //Do whatever you want with the JSON response
}

On the PHP side you will grab the params like this

<?php
     $param = $_GET['with'];  //will be value of 'params'

     //Do some stuff like connect to Database or computation

     //when you finish you can easily send a json response

     echo json_encode($results);  //This will be the ajax response
?>

Hope this helps. Good Luck.

answered Feb 5, 2014 at 2:45

James

1,5722 gold badges17 silver badges23 bronze badges

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

1 Comment

Akira Dawson Over a year ago

Thanks mate. This is the kickstart I need. Straight to the point! Greatly appreciated!

André Catita · Accepted Answer · 2014-02-04 23:32:05Z

1

You haven't really searched here. But since you made the effort to build a elaborate question, I will give you an answer.

Yes, you do everything inside the click function you are calling.

You can then use one of the following jQuery methods: ajax, get, post, getJSON.

ajax - is the most complete one, and the method that all the others actually use, but without so much detail.

get and post - are pretty obvious, they already have the type defined.

and there is a getJSON - since JSON is a very famous way to exchange information nowadays.

You should pick the method which fits you best, for example, if you are building HTML on your PHP to return to the page, and you don't want JavaScript do that, then let's use post as an example.

This code inside the click, this is a simple example, check the documentations for the methods above.

$.get( "example.php", function(data) {
 $('#yourHtmlElement').html(data);
});

answered Feb 4, 2014 at 23:32

André Catita

1,32316 silver badges19 bronze badges

1 Comment

Akira Dawson Over a year ago

I haven't searched thoroughly. But enough to confuse myself that's for sure lol. It's good to get verification that I'm on the right track at least. Thank you very much for your input!

Collectives™ on Stack Overflow

Using AJAX on click (jQuery, PHP, MySQL)

2 Answers 2

1 Comment

You can then use one of the following jQuery methods: ajax, get, post, getJSON.

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

You can then use one of the following jQuery methods: ajax, get, post, getJSON.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related