Publisher does not support the Fluid field type. 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: Errors when dragging bloq nodes

Status Resolved
Add-on / Version Bloqs 4.1.1
Severity
EE Version 5.3.0

MLohrman

Jan 14, 2020

When dragging blocks around, things get funky. Errors appear in the Chrome browser console. I have a video uploaded here (https://www.dropbox.com/s/w5oxwqefvx3uudz/bloqs_draganddrop_issue_vf1080.mp4?dl=0) that shows what happens and the errors in the console. Please let me know if you need any other information. Thanks!

#1

BoldMinded (Brian)

Hi, Mike. Can you copy the error from the console and paste in here? Also list out what types of field types are inside those blocks being dragged. Lastly, does this happen only when dragging nested blocks?

#2

MLohrman

Brian, it seems to work ok dragging block that aren’t nested and don’t have bloqs nested within. If I try to drag a top-level bloq that has nested elements, it messes up.

tree-validation.js?version=4.1.1:112 Uncaught TypeError: _.findWhere is not a function
    at loadSettings (tree-validation.js?version=4.1.1:112)
    at Object.validate (tree-validation.js?version=4.1.1:17)
    at validateTreeField (cp.js?version=4.1.1:391)
    at updateTreeField (cp.js?version=4.1.1:385)
    at HTMLDivElement.<a> (cp.js?version=4.1.1:196)
    at HTMLDivElement.dispatch (jquery.js?v=1569698144:3)
    at HTMLDivElement.v.handle (jquery.js?v=1569698144:3)
    at Object.trigger (jquery.js?v=1569698144:4)
    at HTMLDivElement.<a> (jquery.js?v=1569698144:4)
    at Function.each (jquery.js?v=1569698144:2)
loadSettings @ tree-validation.js?version=4.1.1:112
validate @ tree-validation.js?version=4.1.1:17
validateTreeField @ cp.js?version=4.1.1:391
updateTreeField @ cp.js?version=4.1.1:385
(anonymous) @ cp.js?version=4.1.1:196
dispatch @ jquery.js?v=1569698144:3
v.handle @ jquery.js?v=1569698144:3
trigger @ jquery.js?v=1569698144:4
(anonymous) @ jquery.js?v=1569698144:4
each @ jquery.js?v=1569698144:2
each @ jquery.js?v=1569698144:2
trigger @ jquery.js?v=1569698144:4
dragStop @ admin.php?S=0&D=cp&C=javascript&M=combo_load&ui=core,widget,mouse,position,sortable,dialog,button&plugin=ee_interact.event,ee_broadcast.event,ee_notice,ee_txtarea,tablesorter,ee_toggle_all,nestable&file=react/react.min,react/react-dom.min,json2,underscore,cp/global_start,cp/form_validation,cp/sort_helper,cp/form_group,cp/modal_form,cp/confirm_remove,cp/fuzzy_filters,components/no_results,components/loading,components/filters,components/filterable,components/toggle,components/select_list,fields/select/select,fields/select/mutable_select,fields/dropdown/dropdown&v=1569698146:150
n @ admin.php?S=0&D=cp&C=javascript&M=combo_load&ui=core,widget,mouse,position,sortable,dialog,button&plugin=ee_interact.event,ee_broadcast.event,ee_notice,ee_txtarea,tablesorter,ee_toggle_all,nestable&file=react/react.min,react/react-dom.min,json2,underscore,cp/global_start,cp/form_validation,cp/sort_helper,cp/form_group,cp/modal_form,cp/confirm_remove,cp/fuzzy_filters,components/no_results,components/loading,components/filters,components/filterable,components/toggle,components/select_list,fields/select/select,fields/select/mutable_select,fields/dropdown/dropdown&v=1569698146:150
dispatch @ jquery.js?v=1569698144:3
v.handle @ jquery.js?v=1569698144:3

This is the error that happens when I try to drag after getting the first error…

admin.php?S=0&D=cp&C=javascript&M=combo_load&ui=core,widget,mouse,position,sortable,dialog,button&plugin=ee_interact.event,ee_broadcast.event,ee_notice,ee_txtarea,tablesorter,ee_toggle_all,nestable&file=react/react.min,react/react-dom.min,json2,underscore,cp/global_start,cp/form_validation,cp/sort_helper,cp/form_group,cp/modal_form,cp/confirm_remove,cp/fuzzy_filters,components/no_results,components/loading,components/filters,components/filterable,components/toggle,components/select_list,fields/select/select,fields/select/mutable_select,fields/dropdown/dropdown&v=1569698146:150 Uncaught TypeError: Cannot read property 'parentNode' of undefined
    at a.dragStop (admin.php?S=0&D=cp&C=javascript&M=combo_load&ui=core,widget,mouse,position,sortable,dialog,button&plugin=ee_interact.event,ee_broadcast.event,ee_notice,ee_txtarea,tablesorter,ee_toggle_all,nestable&file=react/react.min,react/react-dom.min,json2,underscore,cp/global_start,cp/form_validation,cp/sort_helper,cp/form_group,cp/modal_form,cp/confirm_remove,cp/fuzzy_filters,components/no_results,components/loading,components/filters,components/filterable,components/toggle,components/select_list,fields/select/select,fields/select/mutable_select,fields/dropdown/dropdown&v=1569698146:150)
    at HTMLDocument.n (admin.php?S=0&D=cp&C=javascript&M=combo_load&ui=core,widget,mouse,position,sortable,dialog,button&plugin=ee_interact.event,ee_broadcast.event,ee_notice,ee_txtarea,tablesorter,ee_toggle_all,nestable&file=react/react.min,react/react-dom.min,json2,underscore,cp/global_start,cp/form_validation,cp/sort_helper,cp/form_group,cp/modal_form,cp/confirm_remove,cp/fuzzy_filters,components/no_results,components/loading,components/filters,components/filterable,components/toggle,components/select_list,fields/select/select,fields/select/mutable_select,fields/dropdown/dropdown&v=1569698146:150)
    at HTMLDocument.dispatch (jquery.js?v=1569698144:3)
    at HTMLDocument.v.handle (jquery.js?v=1569698144:3)
#3

MLohrman

Fields used in bloqs… Ansel Wygwam Toggle Text

#4

MLohrman

There’s 4 separate bloqs fields on this publish form if that matters

#5

BoldMinded (Brian)

What happens if you drag nested blocks that have only a basic text field in them, nothing complex or 3rd party?

#6

BoldMinded (Brian)

So that error makes me believe that EE’s local Underscore JS library is not getting loaded for some reason. This isn’t happening locally for me in 2 different environments. Have you tried this in a new EE install, or at least in an entry that has only a Bloqs field and nothing else? Something is stopping EE from loading the Underscore library, and I’m not sure what that would be. The only thing I can think of to try is to change the js load order on line 162 of ft.bloqs.php to this:

$this->includeThemeJS('javascript/cp.js');
        $this->includeThemeJS('javascript/tree-validation.js');

The old order is tree-validation.js, then cp.js, but it has been like that for 2+ years with no known issues. If swapping that load order doesn’t fix it then there is probably something else in your environment that is wrong.

#7

MLohrman

Before updating the ft.bloqs.php file as you mentioned above, I tested things on a development version of the site. Same issue on the development site. I created a new channel with just the bloqs field with the same bloqs fields within. When adding bloqs and drag dropping them, it produced no errors.

I then created a new channel with all the fields from the suspect channel and have the same issue, but getting a different error I’ll paste below. Updating the ft.bloqs.php file made no change. If this doesn’t help you. So maybe some other field is interfering? I figure my next step could be to start removing fields from the channel and see if that helps.

tree-validation.js?version=4.1.1:112 Uncaught TypeError: _.findWhere is not a function
    at loadSettings (tree-validation.js?version=4.1.1:112)
    at Object.validate (tree-validation.js?version=4.1.1:17)
    at validateTreeField (cp.js?version=4.1.1:391)
    at updateTreeField (cp.js?version=4.1.1:385)
    at HTMLDivElement.<a> (cp.js?version=4.1.1:196)
    at HTMLDivElement.dispatch (jquery.js?v=1569705342:3)
    at HTMLDivElement.v.handle (jquery.js?v=1569705342:3)
    at Object.trigger (jquery.js?v=1569705342:4)
    at HTMLDivElement.<a> (jquery.js?v=1569705342:4)
    at Function.each (jquery.js?v=1569705342:2)
#8

BoldMinded (Brian)

I just double checked locally that the underscore library is in fact loaded every CP request in cp.php -> set_default_view_variables(). Make sure the following files exist in your repo: ee/asset/javascript/src/underscore.js or ee/asset/javascript/compressed/underscore.js. Have you tried a new EE install with Bloqs? I’m not sure what else to debug at this time b/c this really sounds like an issue with the environment, not Bloqs.

#9

MLohrman

Brian, I don’t see that path in my files, there’s no “asset” folder in the system/ee folder. Unless I’m looking in the wrong spot? I’m doing some testing now, removing different fields to see if it eventually starts working to see if there is a conflict.

#10

BoldMinded (Brian)

Search your themes folder for “function findWhere”, or check you full project for underscore.js to see if it exists. I just double checked and the path should be /themes/ee/asset/javascript/compressed/underscore.js.

#11

BoldMinded (Brian)

Sorry, search for “findWhere=function”

#12

MLohrman

Ok, I think I found the issue, currently running v6.0 of Gmaps plugin(https://docs.reinos.nl/gmaps/#changelog) and v4.0 of Gmaps fieldtype(https://docs.reinos.nl/gmaps-fieldtype/#changelog) and have the field in that channel. When I removed it from the channel the drag/drop started working again. Add it back, it breaks again. There is a newer version of both, but my license has expired for these and it is recommended to use their other, newer maps plugin, which I purchased a license for, but haven’t gotten around to implementing. So, updating to the newer version of these plugins might help, or implementing the newer plugin might help, will have to do one or the other. Thanks for hangin in there with me on this support request.

#13

MLohrman

Rein, dev of the Gmaps plugin is going to take a look at things on his side, I’ll let you know if he finds anything.

#14

BoldMinded (Brian)

Sounds good. Let me know if what he finds is relevant for me and I’ll take a look. I’m going to go ahead and close this ticket. You can reopen it later if you need to.

Login to reply