arvgta / ajaxify

Ajaxify - The Ajax Plugin
https://4nf.org/
274 stars 124 forks source link

Swapping of any element that has an ID #170

Closed arvgta closed 4 years ago

arvgta commented 5 years ago

Until recently, it was only possible to swap content divs with the same ID across pages. In course of the last changes, I have tried preparing to abstract the code in order to support the swapping of any type of element, that has an ID, i.e. not only divs.

(Why? -> That will be more powerful and flexible for the web designer)


The new function _copyAttributes() now works and was a pre-requisite for supporting any kind of element.

Swapping any kind of element can now be established, by performing the following two steps, which augment each other:

  1. Calling _copyAttributes()
  2. Executing a "normal" jQuery html()

This issue is, in turn, a pre-requisite for moving towards supporting any kind of elements with ID across pages, even when they are inconsistent, i.e. not present on all pages of the site...


Great news(!):

First tests on this partner site indicate that it might already be working properly... Description of the (simple) test scenario:

The div with the ID logo in the header section of the site

<div id="logo">

... has been enriched with two new elements:

  1. an img tag with the ID prodlogo
  2. a h1 tag with the ID prodh1

Pages of the testbed have been divided into three different page types:

Additional HTML for the Home page

<img src="https://4nf.org/images/home.gif" id="prodlogo">
<h1 id="prodh1">Home</h1>

Additional HTML for the Product Search page

<img src="https://4nf.org/images/preview_small.jpg" id="prodlogo">
<h1 id="prodh1">Product search</h1>

Additional HTML for all other pages

<img src="https://4nf.org/images/delta_small.png" id="prodlogo">
<h1 id="prodh1">Normal page</h1>

Finally, the main Ajaxify selection was adapted to:

jQuery('#content, #prodlogo, #prodh1').ajaxify({...});

Desired output for the various pages (img with h1 floating to the right):

image Home


image Product search


image Normal page


...and it works right away!...

What does this test?

  1. The new img tag tests the new function _copyAttributes() (i.e. copying over the src attribute)
  2. The new h1 tag tests the part with the normal html() (i.e. copying over the tag's inner contents)

Obviously, these are dead-simple test cases, but it is reassuring to see, that they work instantaneously! It would be great to know, whether the above mechanism also works against more complicated types of tags / elements, such as form...

arvgta commented 4 years ago

Deemed to be successful, as no errors reported, thus closing, also in order to focus on issue #169