How to organize Javascript and AJAX with PHP?

Question

My javascript is getting out of hand for my PHP application. I have 20 tags that link to various javascript files in a javascript folder. Each javascript file basically controls one element on the DOM. And, if the javascript file uses AJAX, then it will have a corresponding PHP file that the AJAX will call.

For example, a js file might control a button on the page:

$(document).ready(function () {
  $("#button").live('click', function() {
    $.ajax({
      type: "POST",
      data: ...
      url: "button_click.php",
    });
  });
});

As you can see, this gets out of hand. What is the best way to organize all of the javascript?

Answer 1

One trick I picked up from a JavaScript library I've been using is to write all my code in separate files but then use a separate "build" script (they used PHP, I use Python, whatever) to "compile" your separate files into a single file and run a minimizer on it.

At first this felt pretty hack-ish, but after just a little while it became quite comfortable. While developing I point the page to the single non-minimized script so that I'll see line numbers while debugging, and then I deploy the minimized script.

Answer 2

Can the data that you are posting be included in the markup? I.e.

<form action="button_click.php" method="post">
    <input type="hidden" name="data1" value="foo" />
    <input type="hidden" name="data2" value="bar" />

    <button name="button1" class="ajax-button" value="foobar">Click Me!</button>
</form>

If this is possible, you could then combine your click events into one dynamic event, like this:

$('.ajax-button').on('click', function() {
    var form = $(this).parent('form');

    $.ajax({
        type: "POST",
        data: form.serialize(),
        url: form.attr('action'),
    });

    return false;
});

This example would POST the following data to button_click.php:

data1: foo,
data2: bar,
button1: foobar