4 ms·

It's no longer cool on HN to use it, but jQuery-Pjax (https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax) solved this problem years a

It's no longer cool on HN to use it, but jQuery-Pjax (https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax) solved this problem years ago in a minimally intrusive way. I build all my projects with it. It's the only SPA framework that allows for full server side rendering after minimal configuration. It also manages to do this without introducing needless abstractions into your code. Even more magical: it works with any server side language or framework you desire! The trick is that all rendering gets done server side and the SPA framework is just a dumb little script that replaces old DOM nodes with the newly rendered bits as they get sent down the pipe. You only bring the logic client side as needed, but defer work to the server 99% of the time. So no need to reproduce your rendering logic in 2 places. Someone on HN has been hyping up his own variation on the technique and calls his framework IntercoolerJS but I haven't felt the need to move away from jQuery-Pjax.

heavenlyhash 10y ago
This looks really cool! And simple. I am looking at it closely. I'm wondering if it can also support merging elements into an existing document: for example, I have a table of elements, and suppose that I have an 'id' attribute for each row which correctly identifies which elements I would like to replace when new content is fetched. If some elements are replaced, of course I must replace them; but if neighboring rows are unaffected, if the users has a selection in them, their cursor should not move. So, replacing the entire content div is not ideal: the user's cursor will be discarded if it's anywhere in the replaced area. This seems like something that almost a for-loop around this jquery-pjax stuff would handle, but of course if someone else has written it already, I want to join their project rather than reinvent it!
- bigmanwalter 10y ago
  https://github.com/MoOx/pjax https://github.com/MoOx/pjax is a version that might work. It's a reimplementation of the library without jquery and with a few extra features. Instead of working on a single container where all the ajaxing happens, you provide it a list of IDs, and then it extracts the nodes with those IDs from the response and replaces them throughout the document. If I understood you, that's the behaviour you're looking for. It also has a few extra hooks for animating content in and out. It's not as widely used as the defunkt version though, and I remember needing to stop using it because of a bug where it wasn't scrolling to in-page anchors properly. But hopefully it would work for you. Personally, I might just use the defunkt version and write a before and after hook to refocus the appropriate input. When it comes to reimplementing browser features in JavaScript, there are lots of edge cases so it's nice to use widely adopted libraries. jQuery-Pjax is used by GitHub so you know it's well tested :)

heavenlyhash 10y ago

This looks really cool! And simple. I am looking at it closely. I'm wondering if it can also support merging elements into an existing document: for example, I have a table of elements, and suppose that I have an 'id' attribute for each row which correctly identifies which elements I would like to replace when new content is fetched. If some elements are replaced, of course I must replace them; but if neighboring rows are unaffected, if the users has a selection in them, their cursor should not move. So, replacing the entire content div is not ideal: the user's cursor will be discarded if it's anywhere in the replaced area. This seems like something that almost a for-loop around this jquery-pjax stuff would handle, but of course if someone else has written it already, I want to join their project rather than reinvent it!

bigmanwalter 10y ago
https://github.com/MoOx/pjax https://github.com/MoOx/pjax is a version that might work. It's a reimplementation of the library without jquery and with a few extra features. Instead of working on a single container where all the ajaxing happens, you provide it a list of IDs, and then it extracts the nodes with those IDs from the response and replaces them throughout the document. If I understood you, that's the behaviour you're looking for. It also has a few extra hooks for animating content in and out. It's not as widely used as the defunkt version though, and I remember needing to stop using it because of a bug where it wasn't scrolling to in-page anchors properly. But hopefully it would work for you. Personally, I might just use the defunkt version and write a before and after hook to refocus the appropriate input. When it comes to reimplementing browser features in JavaScript, there are lots of edge cases so it's nice to use widely adopted libraries. jQuery-Pjax is used by GitHub so you know it's well tested :)