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

bay-jacewhitten commented 1 year ago

Prerequisites

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

Steps to reproduce the issue

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. Screen Shot 2023-03-30 at 10 20 33 AM

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

[x] Google Chrome
[x] Mozilla Firefox
[x] Internet Explorer
[x] Safari

Operating System

[ ] Windows
[x] Mac OS X
[ ] Linux
[ ] Mobile

Libraries

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

Isolating the problem

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

strtob commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

bay-jacewhitten commented 1 year ago

@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.

Screen Shot 2023-04-17 at 10 16 28 AM

strtob commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Screen Shot 2023-04-20 at 9 52 55 AM

kartik-v commented 1 year ago

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 commented 1 year ago

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

kartik-v / yii2-grid