[PP-1] BigPipe uses AJAX system to insert new content, AJAX system adds a wrapping <div>, breaks theme [#2654386]

Hi,
I have just installed big pipe to see the magic in action and the first thing I have noticed is that it broke my theme. The issue is that blocks that were lazy loaded with big pipe were wrapped in a div and so the CSS no longer applied.

I am using Foundation and so this:

<div class="row">
  <div class="block small-8 columns">...</div>
</div>

became this:

<div class="row">
  <div>
    <div class="block small-8 columns">...</div>
  <div>
</div>

Comments

Comment #1

Anonymous (not verified) commented 21 January 2016 at 16:57

ivanjaros created an issue. See original summary.

Comment #2

wim leers

Ghent 🇧🇪🇪🇺

commented 25 January 2016 at 11:41

Title:	Broken UI	» BigPipe uses AJAX system to insert new content, AJAX system adds a wrapping <div>, breaks theme
Status:	Active	» Postponed (maintainer needs more info)
Related issues:		+#736066: ajax.js insert command sometimes wraps content in a div, potentially producing invalid HTML and other bugs

I'm 99% certain this is caused by #736066: ajax.js insert command sometimes wraps content in a div, potentially producing invalid HTML and other bugs.

To be 100% certain, can you please copy/paste the part of the HTML response starting at

 <script type="application/json" data-big-pipe-event="start"></script>

until the very end?

Also: while this is definitely a bug, it also means you're testing with:

a theme that is also broken if any other content is loaded via AJAX
a theme that is generally very brittle/poorly developed

Comment #3

Anonymous (not verified) commented 25 January 2016 at 14:56

so: while this is definitely a bug, it also means you're testing with:
a theme that is also broken if any other content is loaded via AJAX
a theme that is generally very brittle/poorly developed

Can you be more specific? My theme is not broken in any way that I can see and it certainly is not poorly developed, on the contrary.

Comment #4

wim leers

Ghent 🇧🇪🇪🇺

commented 25 January 2016 at 16:25

First:

To be 100% certain, can you please copy/paste the part of the HTML response starting at
 <script type="application/json" data-big-pipe-event="start"></script>
 
until the very end?

Comment #5

Anonymous (not verified) commented 25 January 2016 at 17:28

Thi is just one block since there is too much text to paste in here(unicode is converted).

<script type="application/json" data-big-pipe-event="start"></script>

<script type="application/json" data-big-pipe-placeholder="callback=Drupal%5Cblock%5CBlockViewBuilder%3A%3AlazyBuilder&amp;args[0]=mytheme_myentitysearch&amp;args[1]=full&amp;args[2]&amp;token=6885eeef" data-drupal-ajax-processor="big_pipe">
    [{"command":"settings","settings":{"ajaxPageState":{"theme":"mytheme","libraries":"big_pipe\/big_pipe,core\/drupal.active-link,core\/html5shiv,mytheme\/base,mymodule\/administration_link,mymodule\/base,mymodule\/search_block,mymodule\/tree_menu,system\/base"},"mymodule":{"myentity":{"searchBlockSuggestions":["EIZO","AMD","Corsair","ASUS"]}},"ajaxTrustedUrl":{"form_action_cc611e1d":true},"pluralDelimiter":"","user":{"uid":"1","permissionsHash":"594fa17808695e1531e4c44398086912c2f62d50b1bcfe75bec4f67993ffa518"}},"merge":true},{"command":"add_css","data":"<link rel="stylesheet" href="https:\/\/myprofile.local\/profiles\/myprofile\/modules\/mymodule\/assets\/myprofile\/css\/mymodule.myentity-search-block.css?o1iiqh" media="all" \/>\n"},{"command":"insert","method":"append","selector":"body","data":"<script src="https:\/\/myprofile.local\/profiles\/myprofile\/modules\/mymodule\/assets\/myprofile\/js\/mymodule.myentity_search_block.js?o1iiqh"><\/script>\n","settings":null},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-selector="callback=Drupal%5Cblock%5CBlockViewBuilder%3A%3AlazyBuilder&args[0]=mytheme_myentitysearch&args[1]=full&args[2]&token=6885eeef"]","data":"<div class="myentity-search-block-form block small-8 columns" data-drupal-selector="myentity-search-block-form" id="block-mytheme-myentitysearch" data-plugin="myentity_search_form_block">\n  \n    \n      <form action="\/asus-6" method="post" id="myentity-search-block-form" accept-charset="UTF-8">\n  <div class="js-form-item form-item js-form-type-search form-item-search js-form-item-search form-no-label">\n            <label for="edit-search" class="visually-hidden">Vyhľadať myentity<\/label>\n    \n    \n    \n    <input autocomplete="off" data-drupal-selector="edit-search" type="search" id="edit-search" name="search" value="" size="60" maxlength="64" class="form-search" \/>\n\n\n    \n    \n    \n    <\/div>\n<input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Vyhľadať" class="button js-form-submit form-submit" \/>\n<input data-drupal-selector="form-ehdnic5atx64rn6h-hi5infe-g1gbum-wnpzf-x1s8q" type="hidden" name="form_build_id" value="form-eHDnic5ATX64Rn6h-HI5InFE_g1GBum_WNpZF-x1S8Q" \/>\n<input data-drupal-selector="edit-myentity-search-block-form-form-token" type="hidden" name="form_token" value="Bi32POecjQVj-PdJ5b8gn_vaq40CIm5QNA1oHvrVw2Q" \/>\n<input data-drupal-selector="edit-myentity-search-block-form" type="hidden" name="form_id" value="myentity_search_block_form" \/>\n\n<\/form>\n\n  <\/div>\n","settings":null}]
</script> 

<script type="application/json" data-big-pipe-event="stop"></script>

Comment #6

wim leers

Ghent 🇧🇪🇪🇺

commented 25 January 2016 at 17:28

Title:	BigPipe uses AJAX system to insert new content, AJAX system adds a wrapping <div>, breaks theme	» [PP-1] BigPipe uses AJAX system to insert new content, AJAX system adds a wrapping <div>, breaks theme
Status:	Postponed (maintainer needs more info)	» Postponed

Thanks, that's enough :)

Look at this bit:

"data":"\u003Cdiv class=\u0022myentity-search-block-form block small-8 columns\u0022 data-drupal-selector=…

decoded, that says:
<div class="myentity-search-block-form block small-8 columns" data-drupal-selector=…

In other words: no wrapping <div>. Hence this proves my hypothesis in #2 that this is effectively a duplicate of #736066: ajax.js insert command sometimes wraps content in a div, potentially producing invalid HTML and other bugs.

Comment #7

Anonymous (not verified) commented 25 January 2016 at 17:32

Wrapping div si there ..

value="myentity_search_block_form" \/>\n\n<\/form>\n\n  <\/div>\n","settings":null}]
</script>

or:

<script type="application/json" data-big-pipe-event="start"></script>

<script type="application/json" data-big-pipe-placeholder="callback=Drupal%5Cblock%5CBlockViewBuilder%3A%3AlazyBuilder&amp;args[0]=mytheme_myentitysearch&amp;args[1]=full&amp;args[2]&amp;token=6885eeef" data-drupal-ajax-processor="big_pipe">
    [{"command":"settings","settings":{"ajaxPageState":{"theme":"mytheme","libraries":"big_pipe\/big_pipe,core\/drupal.active-link,core\/html5shiv,mytheme\/base,mymodule\/administration_link,mymodule\/base,mymodule\/search_block,mymodule\/tree_menu,system\/base"},"mymodule":{"myentity":{"searchBlockSuggestions":["EIZO","AMD","Corsair","ASUS"]}},"ajaxTrustedUrl":{"form_action_cc611e1d":true},"pluralDelimiter":"","user":{"uid":"1","permissionsHash":"594fa17808695e1531e4c44398086912c2f62d50b1bcfe75bec4f67993ffa518"}},"merge":true},{"command":"add_css","data":"<link rel="stylesheet" href="https:\/\/myprofile.local\/profiles\/myprofile\/modules\/mymodule\/assets\/myprofile\/css\/mymodule.myentity-search-block.css?o1iiqh" media="all" \/>\n"},{"command":"insert","method":"append","selector":"body","data":"<script src="https:\/\/myprofile.local\/profiles\/myprofile\/modules\/mymodule\/assets\/myprofile\/js\/mymodule.myentity_search_block.js?o1iiqh"><\/script>\n","settings":null},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-selector="callback=Drupal%5Cblock%5CBlockViewBuilder%3A%3AlazyBuilder&args[0]=mytheme_myentitysearch&args[1]=full&args[2]&token=6885eeef"]","data":"<div class="myentity-search-block-form block small-8 columns" data-drupal-selector="myentity-search-block-form" id="block-mytheme-myentitysearch" data-plugin="myentity_search_form_block">\n  \n    \n      <form action="\/asus-6" method="post" id="myentity-search-block-form" accept-charset="UTF-8">\n  ..... <\/form>\n\n  <\/div>\n","settings":null}]
</script> 

<script type="application/json" data-big-pipe-event="stop"></script>

Comment #8

wim leers

Ghent 🇧🇪🇪🇺

commented 25 January 2016 at 17:32

Can you be more specific? My theme is not broken in any way that I can see and it certainly is not poorly developed, on the contrary.

Your theme is using selectors that are brittle. If they were more robust, then an unexpected additional <div> level, it wouldn't break.

And since this problem is not specific to the BigPipe module, but is a generic problem you'll see with just about every bit of content that is inserted by the AJAX system, that means that the brokenness you reported when using BigPipe must also exist when using other modules loading inserting content using the AJAX system. Perhaps nothing is breaking because those parts just happen to use different selectors. But that's merely accidental, because anything could be loaded via AJAX.

Hence what I said at the bottom of #2. It's just an observation of the interaction of the markup with the CSS, it's not personal.