Skip to main content
6 of 7
added 596 characters in body
Pedro
  • 144
  • 1
  • 13

Custom module causes an AJAX error

I created a custom module which creates a content type (FAQs) with a paragraph field whose type is FAQ Item (with 2 fields, title and text).

After installing the module, I have a new content type as expected.

I add this new content type (which works), but when I want to add more paragraphs, I get this error.

error

edit start

↵An AJAX HTTP error occurred.↵HTTP Result Code: 200↵Debugging information follows.↵Path: /node/add/faq?ajax_form=1↵StatusText: OK↵ResponseText: <?php[{"command":"settings","settings":{"ajaxPageState":{"theme":"gin","theme_token":"FBIB6sjMcgI3SRTRYKUeCkAsw92FHcEaXOlFVwB2ngI","libraries":"admin_toolbar/toolbar.tree,admin_toolbar_tools/toolbar.icon,big_pipe/big_pipe,claro/global-styling,claro/node-form,contextual/drupal.contextual-links,contextual/drupal.contextual-toolbar,core/drupal.active-link,core/drupal.autocomplete,core/drupal.collapse,core/drupal.date,core/drupal.message,core/drupal.states,core/drupal.tabledrag,core/drupal.tableresponsive,core/normalize,devel/devel-toolbar,gin/gin,gin/gin_accent,gin/gin_classic_toolbar,gin/gin_init,node/drupal.node,paragraphs/drupal.paragraphs.actions,paragraphs/drupal.paragraphs.widget,path/drupal.path,shortcut/drupal.shortcut,toolbar/toolbar,toolbar/toolbar.escapeAdmin,tour/tour,user/drupal.user.icons"},"ajax":{"field-faq-item-faq-item-add-more--qjVoLJWqOj8":{"callback":["Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget","addMoreAjax"],"wrapper":"field-faq-item-add-more-wrapper","effect":"fade","progress":{"type":"fullscreen"},"event":"mousedown","keypress":true,"prevent":"click","url":"/node/add/faq?ajax_form=1\u0026_wrapper_format=drupal_ajax","dialogType":"ajax","submit":{"_triggering_element_name":"field_faq_item_faq_item_add_more","_triggering_element_value":"Add FAQ Item"}},"field-faq-item-0-duplicate--5r3tif9hPpY":{"callback":["Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget","itemAjax"],"wrapper":"field-faq-item-add-more-wrapper","effect":"fade","progress":{"type":"fullscreen"},"event":"mousedown","keypress":true,"prevent":"click","url":"/node/add/faq?ajax_form=1\u0026_wrapper_format=drupal_ajax","dialogType":"ajax","submit":{"_triggering_element_name":"field_faq_item_0_duplicate","_triggering_element_value":"Duplicate"}},"field-faq-item-0-remove--NvGan03FwK0":{"callback":["Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget","itemAjax"],"wrapper":"field-faq-item-add-more-wrapper","effect":"fade","progress":{"type":"fullscreen"},"event":"mousedown","keypress":true,"prevent":"click","url":"/node/add/faq?ajax_form=1\u0026_wrapper_format=drupal_ajax","dialogType":"ajax","submit":{"_triggering_element_name":"field_faq_item_0_remove","_triggering_element_value":"Remove"}},"field-faq-item-0-collapse--yUCRTd5RNDM":{"callback":["Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget","itemAjax"],"wrapper":"field-faq-item-add-more-wrapper","effect":"fade","progress":{"type":"fullscreen"},"event":"mousedown","keypress":true,"prevent":"click","url":"/node/add/faq?ajax_form=1\u0026_wrapper_format=drupal_ajax","dialogType":"ajax","submit":{"_triggering_element_name":"field_faq_item_0_collapse","_triggering_element_value":"Collapse"}}},"ajaxTrustedUrl":{"/node/add/faq?ajax_form=1\u0026_wrapper_format=drupal_ajax":true},"tableDrag":{"field-faq-item-values--aSwvHj3qht8":{"field_faq_item-delta-order":[{"target":"field_faq_item-delta-order","source":"field_faq_item-delta-order","relationship":"sibling","action":"order","hidden":true,"limit":0}]}},"pluralDelimiter":"\u0003","user":{"uid":"1","permissionsHash":"d4e95d2832dafdce408600977315dae536f35cef51345576f862d16ed41f18b4"}},"merge":true},{"command":"add_css","data":"\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022/sites/default/files/css/css_c_rE2XcWPmUHirqKm-RKFF_qynL8rJA8g-W8n4abiVo.css\u0022 /\u003E\n"},{"command":"insert","method":"append","selector":"body","data":"\u003Cscript src=\u0022/sites/default/files/js/js_3jVG9lzgjcFlKtvE_E57arfU7Hn1rx6ioB4oZjGpem4.js\u0022\u003E\u003C/script\u003E\n","settings":null},{"command":"update_build_id","old":"form-N3cfG-UvfQ9d7-lyKH11XP19GRYkgZdu3m2gHPl5nZc","new":"form-lc7fp8-kj_PcGe8MQ13UMQ-iiW188ZB7fSqnr3GeVH4"},{"command":"insert","method":null,"selector":null,"data":"\u003Cdiv class=\u0022is-horizontal paragraphs-tabs-wrapper\u0022 id=\u0022field-faq-item-add-more-wrapper\u0022\u003E\u003Cul class=\u0022paragraphs-tabs tabs primary clearfix\u0022\u003E\u003Cli id=\u0022content\u0022 class=\u0022tabs__tab\u0022\u003E\u003Ca href=\u0022#field-faq-item-values\u0022\u003EContent\u003C/a\u003E\u003C/li\u003E\u003Cli id=\u0022behavior\u0022 class=\u0022tabs__tab\u0022\u003E\u003Ca href=\u0022#field-faq-item-values\u0022\u003EBehavior\u003C/a\u003E\u003C/li\u003E\u003C/ul\u003E \u003Cdiv data-drupal-selector=\u0022edit-field-faq-item\u0022 class=\u0022js-form-item form-item form-item--multiple\u0022\u003E\n \u003Cdiv class=\u0022layer-wrapper\u0022\u003E\n \u003Ctable id=\u0022field-faq-item-values--aSwvHj3qht8\u0022 class=\u0022field-multiple-table responsive-enabled draggable-table\u0022 data-striping=\u00221\u0022\u003E\n \n \n \u003Cthead\u003E\n \u003Ctr\u003E\n \u003Cth colspan=\u00222\u0022 class=\u0022field-label th__h4-classform-item__label-form-item__label--multiple-value-formfaq-item-h4\u0022\u003E\u003Ch4 class=\u0022form-item__label form-item__label--multiple-value-form\u0022\u003EFAQ Item\u003C/h4\u003E\n\u003C/th\u003E\n \u003Cth class=\u0022th__order\u0022\u003EOrder\u003C/th\u003E\n \u003C/tr\u003E\n \u003C/thead\u003E\n \n \u003Ctbody\u003E\n \u003Ctr class=\u0022draggable paragraph-type--faq-item odd\u0022\u003E\n \n \n \n \u003Ctd class=\u0022field-multiple-drag tabledrag-cell tabledrag-cell--only-drag td__h4-classform-item__label-form-item__label--multiple-value-formfaq-item-h4\u0022\u003E\u003C/td\u003E\n \n \n \n \u003Ctd class=\u0022td__order\u0022\u003E\u003Cdiv class=\u0022ajax-new-content\u0022\u003E\u003Cdiv id=\u0022field-faq-item-0-item-wrapper--TJ-6ELr1PXQ\u0022\u003E\u003Cdiv data-drupal-selector=\u0022edit-field-faq-item-0\u0022 id=\u0022edit-field-faq-item-0--tHifVZX8CJg\u0022 class=\u0022js-form-wrapper form-wrapper\u0022\u003E\u003Cdiv class=\u0022paragraph-top add-above-off js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-top\u0022 id=\u0022edit-field-faq-item-0-top--MW5PwJH-PGo\u0022\u003E\u003Cdiv class=\u0022paragraph-type js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-top-type\u0022 id=\u0022edit-field-faq-item-0-top-type--XM9izR4T3To\u0022\u003E\u003Cspan class=\u0022paragraph-type-label\u0022\u003EFAQ Item\u003C/span\u003E\u003C/div\u003E\n\u003Cdiv class=\u0022paragraph-info js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-top-icons\u0022 id=\u0022edit-field-faq-item-0-top-icons--ELnpCd9G72o\u0022\u003E\u003C/div\u003E\n\u003Cdiv class=\u0022paragraph-summary js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-top-summary\u0022 id=\u0022edit-field-faq-item-0-top-summary--Zb9Qz1KXTOg\u0022\u003E\u003C/div\u003E\n\u003Cdiv class=\u0022paragraphs-actions\u0022\u003E\n \u003Cinput class=\u0022paragraphs-icon-button paragraphs-icon-button-collapse button--extrasmall button js-form-submit form-submit button--small\u0022 title=\u0022Collapse\u0022 data-drupal-selector=\u0022field-faq-item-0-collapse-yucrtd5rndm\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022field-faq-item-0-collapse--yUCRTd5RNDM\u0022 name=\u0022field_faq_item_0_collapse\u0022 value=\u0022Collapse\u0022 /\u003E\n\n\n \u003Cdiv class=\u0022paragraphs-dropdown\u0022\u003E\n \u003Cbutton class=\u0022paragraphs-dropdown-toggle\u0022\u003E\u003Cspan class=\u0022visually-hidden\u0022\u003EToggle Actions\u003C/span\u003E\u003C/button\u003E\n \u003Cdiv class=\u0022paragraphs-dropdown-actions\u0022\u003E\n \u003Cinput class=\u0022button--small paragraphs-dropdown-action button js-form-submit form-submit\u0022 data-drupal-selector=\u0022field-faq-item-0-remove-nvgan03fwk0\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022field-faq-item-0-remove--NvGan03FwK0\u0022 name=\u0022field_faq_item_0_remove\u0022 value=\u0022Remove\u0022 /\u003E\n\n\u003Cinput class=\u0022button--small paragraphs-dropdown-action button js-form-submit form-submit\u0022 data-drupal-selector=\u0022field-faq-item-0-duplicate-5r3tif9hppy\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022field-faq-item-0-duplicate--5r3tif9hPpY\u0022 name=\u0022field_faq_item_0_duplicate\u0022 value=\u0022Duplicate\u0022 /\u003E\n\n\n \u003C/div\u003E\n \u003C/div\u003E\n \u003C/div\u003E\n\u003C/div\u003E\n\u003Cdiv class=\u0022paragraphs-subform js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-subform\u0022 id=\u0022edit-field-faq-item-0-subform--V7t1GU8rq2s\u0022\u003E\u003Cdiv class=\u0022field--type-string field--name-field-title field--widget-string-textfield paragraphs-content js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-subform-field-title-wrapper\u0022 id=\u0022edit-field-faq-item-0-subform-field-title-wrapper--zJgUMDcs51c\u0022\u003E \u003Cdiv class=\u0022js-form-item form-item js-form-type-textfield form-type--textfield js-form-item-field-faq-item-0-subform-field-title-0-value form-item--field-faq-item-0-subform-field-title-0-value\u0022\u003E\n \u003Clabel for=\u0022edit-field-faq-item-0-subform-field-title-0-value--B04PQNbHYfs\u0022 class=\u0022form-item__label\u0022\u003ETitle\u003C/label\u003E\n \u003Cinput class=\u0022js-text-full text-full form-text form-element form-element--type-text form-element--api-textfield\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-subform-field-title-0-value\u0022 type=\u0022text\u0022 id=\u0022edit-field-faq-item-0-subform-field-title-0-value--B04PQNbHYfs\u0022 name=\u0022field_faq_item[0][subform][field_title][0][value]\u0022 value=\u0022\u0022 size=\u002260\u0022 maxlength=\u0022255\u0022 placeholder=\u0022\u0022/\u003E\n \u003C/div\u003E\n\n \u003C/div\u003E\n\u003Cdiv class=\u0022field--type-string-long field--name-field-text field--widget-string-textarea paragraphs-content js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-subform-field-text-wrapper\u0022 id=\u0022edit-field-faq-item-0-subform-field-text-wrapper--wwt5VTnDb3g\u0022\u003E \u003Cdiv class=\u0022js-form-item form-item js-form-type-textarea form-type--textarea js-form-item-field-faq-item-0-subform-field-text-0-value form-item--field-faq-item-0-subform-field-text-0-value\u0022\u003E\n \u003Clabel for=\u0022edit-field-faq-item-0-subform-field-text-0-value--2XyKSOBHMvo\u0022 class=\u0022form-item__label\u0022\u003EText\u003C/label\u003E\n \u003Cdiv class=\u0022form-textarea-wrapper\u0022\u003E\n \u003Ctextarea class=\u0022js-text-full text-full form-textarea resize-vertical form-element form-element--type-textarea form-element--api-textarea\u0022 data-drupal-selector=\u0022edit-field-faq-item-0-subform-field-text-0-value\u0022 id=\u0022edit-field-faq-item-0-subform-field-text-0-value--2XyKSOBHMvo\u0022 name=\u0022field_faq_item[0][subform][field_text][0][value]\u0022 rows=\u00225\u0022 cols=\u002260\u0022 placeholder=\u0022\u0022\u003E\u003C/textarea\u003E\n\u003C/div\u003E\n\n \u003C/div\u003E\n\n \u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\u003C/div\u003E\u003C/td\u003E\n \n \n \n \u003Ctd class=\u0022delta-order\u0022\u003E\u003Cdiv class=\u0022js-form-item form-item js-form-type-select form-type--select js-form-item-field-faq-item-0--weight form-item--field-faq-item-0--weight form-item--no-label\u0022\u003E\n \u003Clabel for=\u0022edit-field-faq-item-0-weight--xJIEMOlpx40\u0022 class=\u0022form-item__label visually-hidden\u0022\u003EWeight for row 1\u003C/label\u003E\n \u003Cselect data-drupal-selector=\u0022edit-field-faq-item-0-weight\u0022 class=\u0022field_faq_item-delta-order form-select form-element form-element--type-select\u0022 id=\u0022edit-field-faq-item-0-weight--xJIEMOlpx40\u0022 name=\u0022field_faq_item[0][_weight]\u0022\u003E\u003Coption value=\u0022-1\u0022\u003E-1\u003C/option\u003E\u003Coption value=\u00220\u0022 selected=\u0022selected\u0022\u003E0\u003C/option\u003E\u003Coption value=\u00221\u0022\u003E1\u003C/option\u003E\u003C/select\u003E\n \u003C/div\u003E\n\u003C/td\u003E\n \u003C/tr\u003E\n \u003C/tbody\u003E\n \u003C/table\u003E\n\u003C/div\u003E\n\n \u003Cdiv class=\u0022form-actions\u0022\u003E\u003Cdiv class=\u0022paragraphs-dropbutton-wrapper paragraphs-add-wrapper button--small js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-field-faq-item-add-more\u0022 id=\u0022edit-field-faq-item-add-more--YxkFvZNWbAE\u0022\u003E\u003Cinput class=\u0022field-add-more-submit button js-form-submit form-submit button--small\u0022 data-drupal-selector=\u0022field-faq-item-faq-item-add-more-qjvoljwqoj8\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022field-faq-item-faq-item-add-more--qjVoLJWqOj8\u0022 name=\u0022field_faq_item_faq_item_add_more\u0022 value=\u0022Add FAQ Item\u0022 /\u003E\n\n\u003C/div\u003E\nto \u003Cem class=\u0022placeholder\u0022\u003EFAQ Item\u003C/em\u003E\u003C/div\u003E\n \u003C/div\u003E\n\u003C/div\u003E","settings":null}]

edit end

Is there any missing configuration the module should provide?

The YAML files are inside faq/config/optional. They have been created from the UI on another site and exported.

edit 2 start

My module files and structure

img1

.info.yml file I have basic info link name, type, description, core_version_requirement and package.

.libraries.yml Am importing a JS file, inside "src-js"

.module is empty, without any php code.

.routing.yml also have basic stuff:

faq:
path: '/faqs'
defaults:
  _controller: 'Drupal\faq\Controller\GetFaqController::getFaq'
  _title: 'FAQs Page'
requirements:
  _permission: 'access content'

Inside config-optional folder I have my YML to create content type, fields and paragraph. Those .yml files I exported from another website where I create all of this and deleted "uuid" line.

img2

Then in my controller I also have basic stuff (for now).

class GetFaqController extends ControllerBase {
public function getFaq() {
    
    echo '<h1>FAQs</h1>';

    return [
        '#title' => 'test'
    ];
}

}

This is my module structure/files.

Have very basic configs, that's why I am a bit lost with this error and what I search online I found same error but it is not related.

It seems something is missing with paragraphs and ajax request to add more.

edit 2 end

edit 3 start

I have created another module, this new module only creates a paragraph type with 2 fields (title and text), then I add manually this paragraph to "Article" content type and I get same error.

Another thing I have notice, in a clean drupal site with paragrpahs module installed, when I create a paragraph type manually via backoffice and then add it to any content type works correctly, when I install my module all paragraphs fields stop working and give this error.

If I uninstall my module and delete paragraph type created by my module, other paragraphs type start working again.

Here a repository of my custom module if someone want to test.

https://gitlab.com/drase15/custom-module

edit 3 end

Pedro
  • 144
  • 1
  • 13