Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
1  
Try using Backbone.js to help organize. –  Jeremy Heiler Aug 12 '11 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 '11 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. –  JustinY Sep 20 '11 at 0:49
add comment

2 Answers

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.

share|improve this answer
    
+1: Best way imo. Using this technique, you can also get the number of HTTP requests down. –  Demian Brecht Sep 14 '11 at 17:49
add comment

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').live('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
share|improve this answer
    
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 '11 at 18:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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