Jump to content

AJAX With Attributes

DaveP

By DaveP,
in Dev Talk

 Share

Recommended Posts

flydev Hero Member

flydev

Posted
Posted

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.

  • Like 3
Link to comment
Share on other sites
  • 1 month later...
LostKobrakai Hero Member

LostKobrakai

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
  • 3 months later...
pwFoo Hero Member

pwFoo

Posted
Posted

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

  1. initial (sync) page load (add layout / base template) -> hookAfter Page::render
  2. ajax updates with history support -> PW template file just return the current page content
  3. sub template support (PW TemplateFile)
  4. add / handle css / js (maybe async add / replace css / js with jquery...)
  • Like 3
Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted
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.

  • Like 3
Link to comment
Share on other sites
pwFoo Hero Member

pwFoo

Posted
Posted
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.

Link to comment
Share on other sites
pwFoo Hero Member

pwFoo

Posted
Posted

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?

Link to comment
Share on other sites
pwFoo Hero Member

pwFoo

Posted
Posted

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?

  1. 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>

     

  2. 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>

     

  • Like 1
Link to comment
Share on other sites
pwFoo Hero Member

pwFoo

Posted
Posted

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.

  • Like 2
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...