AJAX With Attributes

[pwFoo]

On 23.2.2016 at 11:24 AM, flydev said:

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.

I also did some tests. Instead of the form button name you will get $input->post['ic-trigger-name']. Tested with FormHelper and this code snippet to get form process work.

    if ($input->post['ic-trigger-name']) {
        $input->post[$form->fhSubmitBtn->name] = $input->post['ic-trigger-name'];
    }

Because FormHelper module checks form state by button name attribute.

[pwFoo]

On 22.7.2016 at 3:10 PM, pwFoo said:

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.

I split it up into two modules.

1. TemplateFileHelper 
   Inspired by Template Engine Factory and Wire Render Pattern. A simple module which hooks Page::Render and adds a global controller / template around the current loaded page if it isn't an admin page or an ajax call. It also takes care about css / js (files, "inline" and "$config->js()") and adds the method "load" to the TemplateFile class (which loads an template with an additional controller file).
2. IntercoolerJS
   Depends on TemplateFileHelper (page template is current page only, global layout, it defines how to use / handle PW template files to be compatible to my IntercoolerJS module) and loads jQuery and intercoolerjs. I try to implement async js / css load (current page scripts and styles added inside a DIV and moved by JS code). I try to get it work with FormHelper module, but don't know if it would work with the PW inputfields.

[flydev]

I am trying to get a simple button working on Safari/601.1 (iPhone 6) without success, someone got it working on mobile device ?

 

<button id='validate' ic-post-to='{$config->urls->httpRoot}contact_form.php' ic-target='#contact-wrapper' ic-indicator='#indicator'>SEND  <i id='indicator' class='fa fa-spinner fa-spin' style='display:none'></i></button>

 

 

edit:  by visiting the official examples on their website, it works

 

edit2: Something weird - it works if I hardcode the url of ic-post-to instead of using $config->urls->httpRoot

[pwFoo]

At the moment I write the needed javascript code to extract / execute the transfered json code and remove the temp. dom elem. The code take care about async

• script file load
  • with browser caching enabled (jQuery ajax() method)
• style file (un-)load
  • unload because of css side effects with different pages and css styles
  • prevent css file to be loaded twice or multiple times
  • browser caching enabled (default, nothing to do ;))
• inject / replace inline styles code 
• inject inline scripts code

It works, but I don't know about existing side effects...

$( document ).ready(function() {
    Intercooler.ready(function (elt) {
        var pwJsonTransfer = '#pwJsonTransfer'
        var ProcessWire = JSON.parse($(pwJsonTransfer, elt).text());  // get json information from response
        $(pwJsonTransfer).remove();  // remove temp json transport element from dom


        // load css files if not existing in the DOM
        $(ProcessWire.styles).each(function () {
            if ($('link[href="' + this + '"]').length < 1) {
                loadCSS(this);
            }
        });
        // Remove "old" async loaded stylesheets because it could break the current page
        $('body').children('link').each(function () {
            if ($.inArray(this.href, ProcessWire.styles) == -1) {
                $(this).remove();   // remove unused stylesheet (not in the current css array)
            }
        });


        // load js files if not existing in the DOM
        $(ProcessWire.scripts).each(function () {
            if ($('script[src="' + this + '"]').length < 1) {
                $.ajax({
                    url: this,
                    dataType: 'script',
                    cache: true // to prevent multiple file download
                });
            }
        });


        // inline custom styles of current page
        if (ProcessWire.inlineStyles === null) {
            $('.pwAsyncCustomCSS').remove();    // no custom css, remove element
        } else if ($('.pwAsyncCustomCSS').length > 0) {
            var inlineStyles = $('.asyncCSS');  // reuse existing element
            inlineStyles.innerHTML = ProcessWire.inlineStyles;
        } else {    // element not exists, create a new one
            var inlineStyles = document.createElement('style');
            $(inlineStyles).addClass('pwAsyncCustomCSS');
            $('body').append(inlineStyles);
            inlineStyles.innerHTML = ProcessWire.inlineStyles;
        }


        // append inline scripts
        var inlineScripts = document.createElement('script');
        inlineScripts.innerHTML = ProcessWire.inlineScripts;
        inlineScripts.type = 'text/javascript';
        $('body').append(inlineScripts);
    });
});

I think I'll create and upload the two modules TemplateFileHelper and IntercoolerJS soon... but dev / unstable!!!

[pwFoo]

Also take a look at IntercoolerJS Response Headers.

x-ic-redirect

header('x-ic-redirect: http://www.google.de');

Redirect to url at client side. Also addHookBefore Session::redirect works fine! So a $session->redirect during ajax page call won't be ignored and executed at client side by IntercoolerJS

 

x-ic-open

header('x-ic-open: http://www.google.de');

Open a new window with given URL.

 

x-ic-script

header('x-ic-script: alert("Just a test..."); alert("and again...")');

Execute javascript code.

 

x-ic-trigger

$data = array('myEvent' => array('key1' => 'value1', 'key2' => array('key21' => 'value21')));
$json = json_encode($data);
header("x-ic-trigger: $json");

Transfer json to client and trigger an event.

    $('body').on('myEvent', function (event, data) {
        alert(data['key1']);
    });

 

Edited August 19, 2016 by pwFoo
Updated x-ic-redirect