Ajax framework offered by NWE

[a_bertrand]

As we saw from the last poll, you guys want to be able to use ajax inside NWE. However I can say that ajax is not all that fun to code, and some times it can get really messy. So instead of just throwing jQuery with the engine, and change some pages to just use it, I thought I would offer some easier access to it. That doesn't prevent you to do more complex things, simply it's some goodies which will be included with NWE (you don't like it, as always, you don't use it).

First example would be a simple page which contains a part which should be updated (via ajax) every time you click on some button:

<?php
function PartUpdate()
{
   echo Translate("Good you updated on %s",FormatDate());
}

Ajax::RegisterFunction("PartUpdate","partToUpdate");

TableHeader("This part will be updated");
echo "<div id='partToUpdate'>";
echo Translate("Click the button to update via AJAX");
echo "</div>";
TableFooter();

ButtonArea();
Ajax::Button("Click Me","PartUpdate()");
EndButtonArea();

 

So how does that work? Well, you see there is a PartUpdate PHP function, which is then "registered" to the ajax framework. On top of that instead of the usual LinkButton you use the Ajax::Button function and you have to define a "div" or some other HTML area with an ID. Why? because it let the framework update this part via JS.

On the PartUpdate function, you can basically have your normal PHP code, and all the output of the function (via echo) will be directly placed in the div you defined while calling the Ajax:RegisterFunction.

Let's see now a module which would update every X sec:

<?php
function PartUpdate()
{
   echo Translate("Good you updated on %s",FormatDate());
}

Ajax::UpdateTimer("PartUpdate","partToUpdate");

TableHeader("This part will be updated");
echo "<div id='partToUpdate'>";
echo Translate("Will update every 5 sec via ajax");
echo "</div>";
TableFooter();

 

This time the example code is more or less like the previous one, where the major change is the usage of Ajax::UpdateTimer("PartUpdate","partToUpdate") instead of the Ajax::RegisterFunction also you don't need any button as the framework will set a timeout (with refresh rate of 5s by default).

Last example, is a bit more interesting and let you pass back browser fields or other back to PHP:

 

<?php
function PartUpdate ($a, $b)
{
   echo Translate("Result: %d", $a + $b);
}

Ajax::RegisterFunction("PartUpdate", "partToUpdate");

TableHeader("This part will be updated");
echo "<div id='partToUpdate'>";
echo Translate("Result: %d", 0);
echo "</div>";
echo "Value A: <input type='text' id='valuea' value='0'><br>";
echo "Value B: <input type='text' id='valueb' value='0'><br>";
TableFooter();

ButtonArea();
Ajax::Button('Click to sum', 'PartUpdate($(\'#valuea\').val(),$(\'#valueb\').val())');
EndButtonArea();

 

As you can see, we have now 2 fields (outside the div which change content) and we pass the value of the fields via JS inside the Button call. What the framework do, is basically recreate a JS signature which is similar to your PHP signature, which means you could call the PartUpdate inside JS and actually call the PHP function transparently. Isn't that cool?

I will work also on further integration like "panels" or "windows" with content loaded via AJAX, if you have other ideas / wishes, please share and I shall see how to make it easier to use.

Feedback / suggestions / constructive critics are welcome.

[a_bertrand]

Added synchronous calls to the framework in case you really need to do it:

 

<?php
function MyPhpFunction($name)
{
   return Translate("Hello there %s!",$name);
}
Ajax::RegisterReturnFunction("MyPhpFunction");
?>
<script>
function do_my_work()
{
   alert(MyPhpFunction("Your name"));
}
</script>
<?php 

ButtonArea();
Ajax::Button('Click me', 'do_my_work()');
EndButtonArea();

 

As you can see what the NWE framework do, is basically let you call the PHP function from within JS, where you can pass parameters and get back the result from PHP.

The return value of a PHP function is then transformed in JSON and you get it back as JS object. You can therefore send PHP arrays with sub-arrays and even arrays with key/value pairs or single values. Objects cannot be currently sent but if required I could expand the JSON serialiazer.

So what does all that do for you as developer? Basically you code in PHP your functions and you are able both to update page sections without reload as well as call back your PHP functions on the server from JavaScript without much work.

With such infrastructure, I will improve the register page, to check if a username already exists for example or you could get updates of the messages without reloading the page and much more. Yet most of this would require little to none JS code from your side.

[Spudinski]

I found myself saying "Oh no" at every line of code I read.

This is the wrong approach to dealing with JavaScript in an application.

JavaScript events should not be abstracted like this, at all...

When dealing with Ajax, an **interface** should be created, not an abstraction layer.

JavaScript is *object* orientated, unlike C++ or PHP which are actually class-orientated.

PHP is unable to deal with JavaScript objects, events and methods, and visa versa for JavaScript as well.

Furthermore, "registering"(?) a *PHP* function to be used in *JavaScript* and then allowing "JavaScript" to be passed to a "PHP" function to be generated? Seems diabolical.

Seeing as you've practically rolled this out in a bit under a week, something tells me that you didn't think this through properly.

[a_bertrand]

Well too bad I based the thinking on multiple PHP Ajax framework which already exists (like sajax, xaxax) and with a background idea based on ASP.NET. Think about it as an easy way to do ajax, not a way to throw away JS. As always inside NWE you can use it if you want to, you can avoid it if you don't want to. Yet creating an ajax communication with the engine is really matter of creating a function in PHP and registering it. How bad could that be or diabolical as you say? Anyhow, be assured it has been very carefully thought (lot more than 1 week) and tested and this kind of integration between PHP and JS is not something totally wired / odd or stupid ;)

BTW it's creating a PHP function which can be accessed via JS nothing more than that...

P.S.: I was expecting a negative comment from you. Somehow we have a drastic different point of view about programming.

[Spudinski]

While you're mentioning frameworks, why don't you take a look at a "real" framework like Symphony

 

P.S.: That's because you're a Microsoft guy.

[rulerofzu]

I think Spud meant symfony

[Spudinski]

I think Spud meant symfony

+1

http://www.symfony-project.org/