Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swapping of any element that has an ID #170

Closed
arvgta opened this issue Jul 8, 2019 · 1 comment
Closed

Swapping of any element that has an ID #170

arvgta opened this issue Jul 8, 2019 · 1 comment

Comments

@arvgta
Copy link
Owner

arvgta commented Jul 8, 2019

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
Copy link
Owner Author

arvgta commented Jul 25, 2019

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

@arvgta arvgta closed this as completed Jul 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant