2

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?

3
  • 1
    Try using Backbone.js to help organize.
    – Jeremy
    Aug 12, 2011 at 17:18
  • Do you really need a separate PHP file for each JavaScript call? Can't you just have one (or few anyway) PHP script that responds to variables in the request?
    – jhocking
    Sep 14, 2011 at 18:37
  • I usually send one parameter called action and then do a case on the value which in turn calls an associated function to handle all the processing.
    – user35791
    Sep 20, 2011 at 0:49

2 Answers 2

3

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.

1
  • +1: Best way imo. Using this technique, you can also get the number of HTTP requests down. Sep 14, 2011 at 17:49
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
1
  • The answer I gave assumes that making separate JavaScript calls for each element is necessary. As this answer points out however, your use case may not require that. If you can accomplish what you want using a single function that takes in parameters from the HTML form then I would highly recommend that approach.
    – jhocking
    Sep 14, 2011 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.