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

arvgta opened this issue Jul 8, 2019 · 1 comment

Swapping of any element that has an ID #170

arvgta opened this issue Jul 8, 2019 · 1 comment


Copy link

@arvgta 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="" id="prodlogo">
<h1 id="prodh1">Home</h1>

Additional HTML for the Product Search page

<img src="" id="prodlogo">
<h1 id="prodh1">Product search</h1>

Additional HTML for all other pages

<img src="" 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...

Copy link
Owner Author

@arvgta 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 Jul 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant