Publisher is EE6 compatible, but it does not support the Fluid field. Please do not contact asking when support will be available.

If you purchased an add-on from expressionengine.com, be sure to visit boldminded.com/claim to add the license to your account here on boldminded.com.

Ticket: Ansel images not uploaded when a block first created

Status Resolved
Add-on / Version Bloqs 4.9.1
Severity
EE Version 6.1.5

Aasun Eble

Oct 28, 2021

Not sure if this is a Bloqs bug, or an Ansel bug.  But, when I have a bloq that uses an Ansel field. If I try to upload an image to that field in the same process that I added the bloq to the entry, the image is not uploaded or saved when the EE entry “Save” button is pressed.  Subsequent edits and saves work fine.  It’s only upon initial addition of the bloq to the entry that the Ansel field won’t save.

If this is an Ansel bug, let me know and I’ll post a ticket to BuzzingPixel.

#1

BoldMinded (Brian)

Oct 28, 2021

This is probably an Ansel issue, and I’m pretty sure this isn’t the first time this has been reported. This is probably a known issue for TJ.

#2

Aasun Eble

Oct 30, 2021

Reviewed this with TJ and he tested and determined it’s a Bloqs issue.

So this issue is definitely a Bloqs issue. Bloqs, like Grid, runs input name replacement everytime a new block (or grid row) is added (likely using js regex). Ansel stores its row template in a script tag ([removed]). Bloqs is not running name replacements on the inputs inside the script tag.

#3

TJ Draper

Oct 30, 2021

Yeah, sorry Brian, it does appear to be a Bloqs issue. I spent a lot of time debugging this and trying to figure out what was going on today. This is the first time this has been reported to me so I was not aware of it until Aasun reported it. To provide as much clarity as possible, I recorded a video explaining the issue.

https://vimeo.com/640733968/fa23f274d9

Please let me know if there’s any way I can help or anything I can provide. Or if I’m just missing something and there is something I can do on my end to fix it.

#4

TJ Draper

Oct 30, 2021

For fun, here’s the issue tracking for this on my site https://www.buzzingpixel.com/support/issue/207

#5

BoldMinded (Brian)

Oct 30, 2021

I’ll try take a look at this in the next few days, but based on Aasun’s description it sounds like Ansel doesn’t have an onDisplay or onClone event handler? Once the bloq is added to the page, it updates the input field names. If a field type then adds more elements to the page then it needs to be responsible for updating its own field names. I say this without investigating it myself, just explaining the order of operations. If the field names are hidden in a <template> tag then it not sure Bloqs can target it and be responsible for updating it.

#6

TJ Draper

Oct 30, 2021

Per the video, the markup is there for Bloqs to update, but Bloqs isn’t updating it seemingly because the markup is inside a script tag. Bloqs used to update it. At some point, something changed so that it doesn’t. I’d be happy to jump on a screen share or call or something as needed.

#7

BoldMinded (Brian)

Oct 31, 2021

Some months ago, maybe even a year ago, I had to refactor how Bloqs creates the new bloqs so it worked with cloning existing bloqs, and all its children, as well as inserting new ones, while maintaining the ability to trigger the onDisplay events for a bloq and all it’s children. The old way literally used jQuery’s .html() function to get all the html inside of a bloq (as well as it’s children), so updating the field names was easy b/c it was one big regex replace, however, this did not work well when the bloq had to be re-inserted into the page because it was raw html, and all the events bound to elements within that html were lost. If you look at the cp.js file, line 702 you’ll see the createBlock method which is the single method where all this is handled, and it is maintaining the dom and all the bound events and just using jQuery to update the field names. Because of this I’m suspecting that jQuery won’t look inside of a [removed] or <template> tag and update the html. I had to make a couple of updates to Simple Grids and Tables b/c it too is using a <template> tag. For example here is what I did in SG&T in the grid.js file (since Bloqs is trigger Grid events)

var onDisplay = function(cell) {
    var isBloqs = cell.hasClass('blocksft-atom');

    if (isBloqs) {
        $(cell).on('grid:addRow', function(element) {
            var $simpleGridField = $(element.target);
            var $newRow = $simpleGridField.find('tr').last();

            // Used to not have to do this, but when Bloqs' cloning/inserting of new bloqs was introduced
            // it might have broken something. <a href="https://boldminded.com/support/ticket/2335">https://boldminded.com/support/ticket/2335</a>
            $newRow.find('[name]').each(function() {
                var $field = $(this);
                var blockId = $field.closest('.blocksft-block').data('id');
                var eleName = $field.attr('name');

                $field.attr('name', eleName
                    .replace(
                        /blocks_new_block_\d+/gm,
                        blockId
                    ));
            });
        });

        return;
    }

};

Unfortunately, TJ, I think this is an issue you might have to address on your side :( I spent a lot of time working on Bloqs’ cloning and inserting functionality and it’s probably not something I’m going to go back to and try to refactor again. It seems to work fine for everything, unless it uses a [removed] or <template> tag to hold its html template contents.

 

#8

TJ Draper

Nov 01, 2021

Login to reply