Not loading a Toolbar using GridView causes JS error with Export dropdown

[bay-jacewhitten]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-export.
• This is not an usage question. I confirm having gone through and read the documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Don't include a {toolbar} in the layout, and use the export module.

Expected behavior and actual behavior

When I follow those steps, I see... a console error 'Not able to find parentNode' This is due to an extra dropdown call being injected.

I was expecting... A quiet console.

Workaround: I was able to just add the toolbar, but set the content to '' and the class to 'd-none'. I also added the missing id for my sake. But as a hack.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: latest
• yii2-export version: dev
• yii2-grid version: dev

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-grid without other plugins.

[strtob]

I have the same error:

(new bootstrap.Dropdown('#w3-button', {}));

Uncaught TypeError: this._element is undefined
Dropdown dropdown.js:97

The export toolbar (dropdown) causes an error which also let pjax stop working, etc.

[strtob]

I have also the problem, that the column button don't open (class="show" assign). I've tried to set the export ("kartik-v/yii2-export": "dev-master",) in composer file and now the column button dropdown open (version problem).

I've tested a lot. I dont' know why, the problem occurs when I use \kartik\tabs\TabsX::widget

<ul id="w11" class="nav-pills flex-column nav d-print-none" data-krajee-tabsx="tabsX_0b4b2adf" role="tablist"><li class="nav-item" role="presentation"><a class="nav-link active" href="#w11-tab0" data-bs-toggle="tab" role="tab" aria-selected="true" aria-controls="w11-tab0"><span class="nav-link-text"><i class="ri-focus-line me-1 align-bottom\"></i> Basic</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#w11-tab1" data-bs-toggle="tab" role="tab" aria-selected="false" aria-controls="w11-tab1" tabindex="-1"><span class="nav-link-text"><i class="ri-book-line me-1 align-bottom"></i> Api Key <span class="badge bg-success">11</span></span></a></li>

Maybe due to the fact, that the nav widget also use a similiar id like 'W1"?

(new bootstrap.Dropdown('#w3-button', {}));

[strtob]

@bay-jacewhitten: do you also use \kartik\tabs\TabsX Widget at the same time?

[bay-jacewhitten]

@strtob No I do not. I just use the standard bootstrap css and js for tabs. A recent 'hack' to stop the error from bubbling up. Sorry for the bad indent, the '' is on the next line.

Note the toolbar is in the layout, but I am setting the options with the content key.

[strtob]

Thank you for sharing!

I've added empty div elements with the #w ids, without any errors, but this can't be the solution

[strtob]

I've not found the relevant position in the code to fix it, is this a problem of @kartik-v exportmenu or dropdown.js?

[strtob]

There are some more details. How can the creation of these files avoid?

jQuery('#w1-html').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The HTML export file will be generated for download."});
jQuery('#w1-csv').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The CSV export file will be generated for download."});
jQuery('#w1-txt').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The TEXT export file will be generated for download."});
jQuery('#w1-pdf').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The PDF export file will be generated for download."});
jQuery('#w1-xls').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The EXCEL 95+ (xls) export file will be generated for download."});
jQuery('#w1-xlsx').exportdata({"settings":kvexpmenu_f5d56d1e,"alertMsg":"The EXCEL 2007+ (xlsx) export file will be generated for download."});
jQuery('#w1-cols-list').exportcolumns({});

(new bootstrap.Dropdown('#w3-button', {}));                 <<<< undefined
(new bootstrap.Dropdown('#w5-button', {}));                 <<<< undefined
var kvGridExp_0950a928={"gridId":"gridview-lead-generator-api-key","action":"/gridview/export/download","module":"gridview","encoding":"utf-8","bom":1,"target":"_blank","messages":{"allowPopups":"Disable any popup blockers in your browser to ensure proper download.","confirmDownload":"Ok to proceed?","downloadProgress":"Generating the export file. Please wait...","downloadComplete":"Request submitted! You may safely close this dialog after saving your downloaded file."},"exportConversions":[{"from":"<span class=\"glyphicon glyphicon-ok-sign text-success\" style=\"font-weight:bold\"></span>","to":"Active"},{"from":"<span class=\"glyphicon glyphicon-remove-sign text-danger\" style=\"font-weight:bold\"></span>","to":"Inactive"}],"skipExportElements":[".sr-only",".hide"],"showConfirmAlert":true};
var kvGridExp_12735912={"filename":"grid-export","showHeader":true,"showPageSummary":true,"showFooter":true};
var kvGridExp_746477fc={"dialogLib":"krajeeDialog","gridOpts":kvGridExp_0950a928,"genOpts":kvGridExp_12735912,"alertMsg":"The HTML export file will be generated for download.","config":{"cssFile":["https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css","https://use.fontawesome.com/releases/v5.3.1/css/all.css"]}};
var kvGridExp_80bd1d95={"dialogLib":"krajeeDialog","gridOpts":kvGridExp_0950a928,"genOpts":kvGridExp_12735912,"alertMsg":"The CSV export file will be generated for download.","config":{"colDelimiter":",","rowDelimiter":"\r\n"}};
var kvGridExp_2a3db6d4={"dialogLib":"

[kartik-v]

Folks can you check if you can try to force yiisoft/yii2-bootstrap5 version 2.0.3 in your composer settings and try if that resolves -- there are some issues with using any other higher versions beyond 2.0.3 due to some BC breaking changes in yiisoft/yii2-bootstrap5

[bay-jacewhitten]

Can confirm no errors using 2.0.3 , must lock the version. 2.0.4 introduces the error.

[kartik-v]

Use this as an interim solution and use yiisoft/yii2-bootstrap5 v2.0.3 due to BC breaking changes in later yiisoft/yii2-bootstrap5 versions. There is a PR # 54 suggested in yii2-bootstrap5 newer version - if that is accepted it should probably resolve this issue. In case the PR is not accepted, there is some set of changes needed in these widgets and isolate dependency from yii2-bootstrap5.

[kartik-v]

Enhancements provided as part of release v3.5.1 as mentioned here in #1056. Kindly test if it resolves the issue.