Got a request to make a quick hack; but this quick hack will be immensely helpful and able to cut like 3 hours of work / employee everyday. Naturally, seeing such huge cost / benefit ratio, I agreed to make it my priority.

The hack is to make pricing become automatic for a client. At the moment, they have to look up a pricing table manually for each order that they received. Even though they’re pretty big, built their own IT system from scratch, they’re still doing this particular topic manually. I can’t believe that their previous developer missed this stuff.

Until I realized the full scope of the job…. suffice to say, it’s complicated enough to scare most programmers. Their pricing scheme almost got no pattern at all, almost fully customized for every client. Yet we can’t afford to just enter the whole thing as it is to the database – it’d be too cumbersome.
The previous developers spent 3 years developing the system, and still managed to avoid this particular bit.

More time would be required to develop the algorithm and proper database schema, than the actual coding itself. Anyway, more to that probably later; one particular thing that I’d like to avoid in this job is the XMLHTTP-request stuff.
Why ? Because I’m too lazy 🙂 too lazy to implement it myself from scratch, and I don’t have the time to use the available implementations (and deal with their quirks/bugs).

I like things as simple and as fast as possible. I think I’m kinda a control freak, yes that explains it.

Anyway, here’s the requirement:

1. Once the staff entered an order into the system, he’ll clink into a link on the form.
This link will fill the textbox next to it with the right price for that order

That’s it. What’s going on behind the curtain is of course much more than that. Here you go :

1. The link actually invokes a JavaScript function called do_ajax()
2. The function will then append a JS element – which actually a PHP script. Thus executing the “AJAX” call
3. The JavaScript function can communicate with the server-side PHP script by way of GET method.
4. The PHP script produced its output as JavaScript code.

As simple as that.

Here are the details:

The HTML form
</p> <pre> <script type="text/javascript" src="cn-ajax.js"></script> ... <a href="#" onClick="do_ajax('cn-ajax.php'); return false;"><strong>Hitung Harga </script> </pre> <p>

cn-ajax.js
</p> <pre> <!-- Begin // Get base url url = document.location.href; xend = url.lastIndexOf("/") + 1; var base_url = url.substring(0, xend); function do_ajax (url) { // credit: // http://www.phpit.net/article/ajax-php-without-xmlhttprequest/ // Does URL begin with http? if (url.substring(0, 4) != 'http') { url = base_url + url; } // Create new JS element var jsel = document.createElement('SCRIPT'); jsel.type = 'text/javascript'; // store all the parameters to be passed to the PHP script item_style = document.getElementById('item_style').value item_color = document.getElementById('item_color').value item_code = document.getElementById('item_code').value customer = document.getElementById('customer').value // Send the parameters via the URL (GET method) jsel.src = url+'?customer='+customer+'&item_style='+item_style+'&item_color='+item_color+'&item_code='+item_code; // Append JS element (therefore executing the 'AJAX' call) document.body.appendChild (jsel); } // End --> </pre> <p>

cn-ajax.php
</p> <pre> < ?php // do the calculations here // report the price set_price($total_price); exit; function set_price ($thetotal) { echo "inputtext = document.getElementById('total_charges'); "; echo "inputtext.value = '$thetotal';"; } ?> </pre> <p>

It may look complicated at first, but if you think of the cn-ajax.js as a blackbox,
then it became very simple.

NOTE: Another plus is that this form become usable for mobile warriors as well. Sure today’s PDA can do JavaScript – but speedily? Thought so.
This trick moves most of the processing to the server, with as little JavaScript code as possible. Therefore giving the best performance for these audience.

Other advantages are : clean, cross browsers, adherence to standards.
(thanks rendy ak)

Credit goes to PHPit.com for figuring these out.

TIP: Use Firefox while debugging this stuff. Its JavaScript console was a massive help to me.

OK, back to work.