AJAX With Attributes

DaveP · February 21, 2016

Just found http://intercoolerjs.org/

It does declarative ajax. Frontend wizardry without writing javascript. I'm impressed.

Edited February 21, 2016 by LostKobrakai
Fixed link

pwFoo · February 21, 2016

Intercooler is a small (25K unzipped) library that allows you to add AJAX to your application using HTML attributes.

With just 25kb unzipped size... I should take a closer look. Thanks for posting here!

bernhard · February 23, 2016

looks cool thanks for sharing dave! i think i have to try that

flydev · February 23, 2016

I just tested with Soma's form tutorial and it rocks! I will definitly use it in my next project. Just put two attributes like :

$submit->attr("ic-post-to", "{$config->urls->httpRoot}contact.php");
$submit->attr("ic-target", "#contact-form-error");

thats all...

Impressed.

adrianmak · February 23, 2016

cool...........

pwFoo · March 30, 2016

I looked in intercoolerjs again and I really like it.

Has anyone build a PW site / module with intercoolerjs?

tpr · March 30, 2016

Unfortunately it depends on jQuery which I try to avoid if I can, otherwise cool.

bernhard · March 30, 2016

must be a lonely world outside without jquery... just kidding

did some basic testing and liked it! would fit very well in my next project...

LostKobrakai · March 30, 2016

I'm using more and more vue.js for html - js interaction. Damn useful and you could easily implement the things intercooler does as well.

@bernhard It's certainly not. If you're not in the need to support IE<9 jQuery is really not necessary, especially as it does get heavier and heavier in filesize.

bernhard · March 30, 2016

that's why i said "just kidding"... i thought that would be enough justification for such a statement on an off-topic forum...

pwFoo · March 30, 2016

I'll do some tests with intercoolerjs soon. Maybe it could also work with zepto.js instead of jQuery?

I also looked at Vue.js, but for simple tasts Intercooler looks easier to use.

horst · March 30, 2016

must be a lonely world outside without jquery... just kidding

@bernhard It's certainly not. If you're not in the need to support IE<9 jQuery is really not necessary, especially as it does get heavier and heavier in filesize.

you might not need jquery

pwFoo · July 19, 2016

Did a quick intercoolerJS test... I love it

First test:

Main layout / template

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://intercoolerreleases-leaddynocom.netdna-ssl.com/intercooler-0.9.7.min.js"></script>
    <title>IntercoolerJS Processwire</title>
  </head>
  <body ic-get-from="<?=$page->url?>" ic-trigger-on="load" ic-push-url=true></body><!-- async intercoolerjs call -->
</html>

A simple autoload module output this main template (PW class TemplateFile is used) above and stops PW execution with php "exit". After initial page load you see an empty page body, but after page loaded the intercoolerjs ajax call will be triggered and load the current page ("$page->url") content.

The test was successful and at the moment I write a small module to handle

initial (sync) page load (add layout / base template) -> hookAfter Page::render
ajax updates with history support -> PW template file just return the current page content
sub template support (PW TemplateFile)
add / handle css / js (maybe async add / replace css / js with jquery...)

szabesz · July 20, 2016

10 hours ago, pwFoo said:

... and at the moment I write a small module to handle...

Looking forward to it, thanks in advance!

teppo · July 20, 2016

14 hours ago, pwFoo said:

A simple autoload module output this main template (PW class TemplateFile is used) above and stops PW execution with php "exit".

Sounds great, but one technical note: instead of exit or die, most of the time you should be using $this->halt(). This way ProcessWire can still shutdown as expected.

pwFoo · July 20, 2016

30 minutes ago, teppo said:

Sounds great, but one technical note: instead of exit or die, most of the time you should be using $this->halt(). This way ProcessWire can still shutdown as expected.

Thanks! The way I was searching for!

Just used exit as bad alternative for my first test.

pwFoo · July 20, 2016

@teppo

Is it possible to use it inside my module too?

Quote

Please note that return $this->halt(); must be called from directly within the template file, outside of any function or class scope.

LostKobrakai · July 20, 2016

@pwFoo Nope. It's a function of the TemplateFile class and only works in files included by its render function.

pwFoo · July 20, 2016

@LostKobrakai

Thanks, I'll remove the exit. PW templates output just the page specific html and layout is added by hook Page:render if needed.

So exit isn't needed anymore

pwFoo · July 20, 2016

Maybe hre are some ideas / opinions about how to handle the ic-* attributes inside a PW module...

Should I wrap the attributes into module methods like that?

$ic->post(url)
$ic->delete(url)
...

But you need to output it as html attribute...

<a href="<?=$url?>" <?=$ic->post($url)?>>LINK</a>

Methods could also combine some intercooler options.

<a href="URL" <?=$ic->post($url, $target, $history_Support)?>>LINK</a>

But it need to be outputed inside an HTML element...

Alternative could be ic-* attributes inside the templates as plain text...

Any hints or ideas?

pwFoo · July 21, 2016

Intercooler have great features which are simple to use. Just some html attributes to prompt the user, initiate a ajax request, add / remove css class, ...
I don't know if the features should be limited by a "wrapper module"...

What do you think?

Wrap features into a object like PW fields (example with some field attributes...)

$icField = new icField();

$icField->method = "GET";
$icField->src = "/path/to/file.php";
$icField->pushUrl = true;
$icField->content = "Initial content";
$icField->template = "<div>|</div>";

echo $icField->render();

Output...

<div ic-get-from="/path/to/file.php" ic-push-url=true>Initial content...</div>

User should read the Intercooler documentation and just write the attributes to the template as shown above
```
<div ic-get-from="/path/to/file.php" ic-push-url=true>Initial content...</div>
```

szabesz · July 21, 2016

@pwFoo I'm for option 2.

bernhard · July 21, 2016

maybe i'm the only one but to me it is not exactly clear what your module will/should be doing. maybe you can elaborate on this?

pwFoo · July 22, 2016

Hi @bernhard

That's dependent on the two options above. I planned to build a intercooler-js module, but it's so simple to use... No need to build a wrapper around it to implement it as PW module...
At the moment the module is a PW TemplateFile helper with additional

css / js handling
simple TemplateFile load method
it hooks Page::render to add the main layout / template if it isn't an ajax call (because it should work with intercooler ajax calls ...)

So maybe I build just a pw template helper (PW TemplateFile class helper, handle js / css, ...) module instead of intercooler.

szabesz · July 22, 2016

@pwFoo Either way, I would appreciate if you could post your solution when done, along with a short "tutorial"/explanation on how to use it.

AJAX With Attributes

Recommended Posts

Recently Browsing 0 members

Similar Content