Skip to content

Instantly share code, notes, and snippets.

@makinde
Created April 23, 2010 01:02
Show Gist options
  • Save makinde/376039 to your computer and use it in GitHub Desktop.
Save makinde/376039 to your computer and use it in GitHub Desktop.
!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', '');
}();
@jdalton
Copy link

jdalton commented Aug 4, 2010

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.

@tomocchino
Copy link

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.

@makinde
Copy link
Author

makinde commented Aug 4, 2010

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.

@jdalton
Copy link

jdalton commented Aug 4, 2010

@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

@criso
Copy link

criso commented Aug 6, 2010

wow. Very elegant solution. Freakin' awesome!

@hmschreiner
Copy link

Nowadays, this code still being a good solution?

@AceMood
Copy link

AceMood commented Nov 17, 2015

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.

@1cg
Copy link

1cg commented Feb 2, 2024

image

@andirkh
Copy link

andirkh commented Feb 2, 2024

🎖

@desfint
Copy link

desfint commented Feb 2, 2024

You dropped this 👑

@josuebrunel
Copy link

👑

@claudiogonzalo
Copy link

image

@jackrim1
Copy link

jackrim1 commented Feb 2, 2024

salute

@mehdi-alouane
Copy link

👑

@toraritte
Copy link

toraritte commented Feb 3, 2024

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

@Daniel15
Copy link

@toraritte There's also a video about Primer on YouTube from jsconf, but I can't find it now :/

@josuebrunel
Copy link

I think it's this one Makinde Adeagbo: Primer

@Daniel15
Copy link

Daniel15 commented Jun 27, 2024

@josuebrunel - That's the one! Thanks for the link.

I work at Meta and Primer is still in the codebase, but isn't in use in any new development. It's mostly only used on legacy pages that are rendered server-side with XHP and Hack (XHP being the precursor to BoltJS components, which were the precursor to React's JSX).

I kinda miss using it since it was so simple to get basic interactions working pretty well. All the new stuff is React and Relay, which are great for highly interactive apps, but the barrier to entry and amount of boilerplate to build a basic page is a lot higher compared to just server-rendering a chunk of HTML, especially in small internal tools that just show some data and aren't very interactive (and where the team building tool may consist entirely of backend engineers with limited frontend experience). React definitely has its place, but I do still really like the Primer / htmx model.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment