primer.js

!function() {
  var doc     = document,
      htm     = doc.documentElement,
      lct     = null,   // last click target                                              
      nearest = function(elm, tag) {
        while (elm && elm.nodeName != tag) {
          elm = elm.parentNode;
        }
        return elm;
  };

  // Listeners for our most common interations                                            
  htm.onclick = function(e) {
    e = e || window.event;
    lct = e.target || e.srcElement;

    var elem = nearest(lct, 'A') || htm,
        href = elem.getAttribute('ajaxify') || elem.href;

    switch (elem.rel) {
    case 'dialog':
    case 'dialog-post':
      Bootloader.loadComponents('dialog', function() {
        Dialog.bootstrap(href, null, elem.rel == 'dialog');
      });
      break;
    case 'async':
    case 'async-post':
      Bootloader.loadComponents('async', function() {
        AsyncRequest.bootstrap(href, elem);
      });
      break;
    default:
      return;
    }

    return false;
  };

  htm.onsubmit = function(e) {
    e = e || window.event;
    var elem = e.target || e.srcElement;

    if (!elem || elem.nodeName != 'FORM' || !elem.getAttribute('ajaxify')) {
      return;
    }

    Bootloader.loadComponents('dom-form', function() {
      bootstrap_form(elem, lct);
    });

    return false;
  };

  // Remove the no JS class, if it is here                                                
  htm.className = htm.className.replace('no_js', '');
}();

I missed the presentation so I'm sorry if this is out of context.

The submit event doesn't bubble in IE.
Also returning false in the onclick handler prevents the default action, submitting the form, from happening when clicking a submit button.

Hey jdalton, one thing I wanted to mention during the talk but forgot to, was the fact that in order to make the form submission through primer work in IE, we insert a snippet of JS into the form's onsubmit handler. The handler just basically invokes the onsubmit manually, passing in the global 'event' object.

This is basically what it looks like inside of our ui:form XHP element:

 // IE doesn't bubble form submission events, so we do it manually
 if (Net_UserAgent_Detect_APC::singleton()->isBrowser('ie')) {
   $onsubmit = ';var d=document.documentElement;'
     .'if (d.onsubmit) { return d.onsubmit(event); }'
   $this->setAttribute('onsubmit', $this->getAttribute('onsubmit').$onsubmit);
 }

It's a bit of a hack, but it works really well.

Thanks for taking a look jdalton. I'm not sure I undersand your second comment. We return false on clicks when we determine that the target element is a link and we are able to send an AJAX request in place of doing the link's default action. Similarly, we only prevent the form submission when we are able to serialize the form and send an AJAX request in place of the form submission.

@tomochino - Thanks for the additional info

@makinde - Ok cool, I was doing a reduced test with return false and noticed the issue but my usage was not in line with your implementation.
You guys return as the default path of the switch statement which avoids the return false below it :D

wow. Very elegant solution. Freakin' awesome!

Nowadays, this code still being a good solution?

I think load javascript dynamically is a key rule of performance optimization forever, it's never outdate.
The Web is absolutely a resource enhanced Web, more and more javascript and css could load in an single page as time past, and the usage of memory increased continuously. We can choose a point to reload the page one time, but before that point, partial refresh and load on demand is necessary.

🎖

You dropped this 👑

👑

👑

Not sure, but I think these are the corresponding slides to provide context for ignorant devs like me who got excited by the HTMX post but have not much clue what it's about:
https://www.slideshare.net/makinde/javascript-primer (archived, although it will be tough to reconstruct it from there...)