Bootstrap 4 to 5 migration doesnt work

NGM · September 27, 2024, 1:31pm

Hi, I've been meaning to migrate to bootstrap 5 for some time and eventually got around to it but have problems that i dont understand and cant fix.

I changed a dashboard from bootstrap 4 to 5 and used the convert capability. Looked ok (needed to change some styling) but whilst buttons to other pages worked buttons to show modals didnt. I even tried adding a new button to open an existing modal - didnt work and added a new modal with the new button and this didnt work !!!
Wondered if there was any contention because the dashboard used a common layout page so decided to migrate the layout from 4 to 5, using the convert tool again. Unfortunately this got significantly worse - see screenshot

Screenshot 2024-09-27 1416381913×769 32.7 KB

the top bit comes from the layout and whilst server connects ran successfully the banner didnt pick up the value
the dashboard has lost all formatting and all elements are shown and the dmx-show isnt working
the modal buttons arent working - not a surprise
the buttons to other pages arent working

Inspected the page when it reloaded and got a load of console errors - see below

Screenshot 2024-09-27 1418251884×722 70.2 KB
ReferenceError: bootstrap is not defined - seems important not sure what is missing / where
Refused to apply inline style because it violates the following Content Security Policy directive - I only changed bootstrap 4 to 5 so maybe bs5 has stricter rules ???

Any guidance or advise would be greatly appreciated because at the moment seems i'm stuck on bs4 and cant use new features like pdf creator and i suspect others.

Thanks,

Nigel

NGM · September 30, 2024, 9:55am

Hi, Sorry to bother people but does anyone have any advise or thoughts on what is missing? for example the bootstrap is not defined... the framework was changed from bs4 local to bs5 local and then ran the convert option so i would have thought bs5 was defined????

Thanks

ben · September 30, 2024, 11:53am

This could be a multi-issue problem, so let us start at the beginning.

Could you show the contents of the head section of the layout page as well as any links to JS files at the end of the document.

NGM · September 30, 2024, 12:25pm

Hi Ben, Many thanks for helping.

Contents of layout head page

<head>
  <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />

  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
  <script src="dmxAppConnect/dmxPdfCreator/dmxPdfCreator.js" defer></script>




  <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.2.9/build/pdfmake.min.js" defer></script>

  <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.2.9/build/vfs_fonts.min.js" defer></script>

  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake@2.5.2/browser.min.js" defer></script>


  <link rel="stylesheet" href="dmxAppConnect/dmxSummernote/summernote-bs4.min.css" />






  <script src="dmxAppConnect/dmxSummernote/summernote-bs4.min.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxSummernote/summernote-bs5.min.css" />

  <script src="dmxAppConnect/dmxSummernote/summernote-bs5.min.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxSummernote/summernote-lite.min.css" />

  <script src="dmxAppConnect/dmxSummernote/summernote-lite.min.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxSummernote/summernote.min.css" />

  <script src="dmxAppConnect/dmxSummernote/summernote.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ar-AR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-az-AZ.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-bg-BG.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-bn-BD.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ca-ES.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-cs-CZ.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-da-DK.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-de-CH.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-de-DE.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-el-GR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-en-US.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-es-ES.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-es-EU.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-fa-IR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-fi-FI.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-fr-FR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-gl-ES.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-he-IL.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-hr-HR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-hu-HU.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-id-ID.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-it-IT.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ja-JP.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ko-KR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-lt-LT.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-lt-LV.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-mn-MN.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-nb-NO.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-nl-NL.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-pl-PL.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-pt-BR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-pt-PT.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ro-RO.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ru-RU.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-sk-SK.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-sl-SI.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-sr-RS-Latin.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-sr-RS.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-sv-SE.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-ta-IN.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-th-TH.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-tr-TR.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-uk-UA.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-uz-UZ.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-vi-VN.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-zh-CN.min.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/lang/summernote-zh-TW.min.js" defer></script>




  <script src="dmxAppConnect/dmxSlideshow2DTransitions/dmxSlideshow2DTransitions.js" defer></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous" />


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous" />

  <link rel="stylesheet" href="dmxFramework7_icons/css/framework7-icons.css" />

  <link rel="stylesheet" href="dmxAppConnect/dmxPreloader/dmxPreloader.css" />




  <script src="dmxAppConnect/dmxPreloader/dmxPreloader.js" defer></script>




  <script src="dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>




  <script src="dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxMediumEditorImageUpload/dmxMediumEditorImageUpload.css" />








  <script src="dmxAppConnect/dmxMediumEditorImageUpload/dmxMediumEditorImageUpload.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxMediumEditor/medium-editor.css" />

  <script src="dmxAppConnect/dmxMediumEditor/medium-editor.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxMediumEditor/dmxMediumEditor.css" />

  <script src="dmxAppConnect/dmxMediumEditor/dmxMediumEditor.js" defer></script>





  <script src="https://js.stripe.com/v3/" defer></script>





  <script src="dmxAppConnect/dmxStripe/dmxStripe.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxSwiper/swiper.min.css" />




  <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>

  <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>

  <script src="dmxAppConnect/dmxDownload/dmxDownload.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxNotifications/dmxNotifications.css" />

  <script src="dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>

  <script src="dmxAppConnect/dmxSmoothScroll/dmxSmoothScroll.js" defer></script>

  <script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>

  <script src="dmxAppConnect/dmxVideo/dmxVideo.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />




  <script src="dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />

  <script src="dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxLightbox/dmxLightbox.css" />

  <script src="dmxAppConnect/dmxLightbox/dmxLightbox.js" defer></script>

  <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>

  <script src="dmxAppConnect/dmxBackgroundVideo/dmxBackgroundVideo.js" defer></script>

  <script src="dmxAppConnect/dmxTyped/dmxTyped.js" defer></script>

  <script src="dmxAppConnect/dmxTyped/typed.min.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />

  <script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>

  <script src="dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>







  <script src="dmxAppConnect/dmxDatastore/dmxDatastore.js" defer></script>


  <link rel="stylesheet" href="dmxAppConnect/dmxSlideshow/dmxSlideshow.css" />

  <script src="dmxAppConnect/dmxSlideshow/dmxSlideshow.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxSlideshow/themes/default.css" />

  <link rel="stylesheet" href="dmxAppConnect/dmxAnimateCSS/animate.min.css" />

  <script src="dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>

  <script src="dmxAppConnect/dmxBootbox/bootbox.all.min.js" defer></script>

  <script src="dmxAppConnect/dmxBootbox/dmxBootbox.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>

  <script src="dmxAppConnect/dmxCharts/Chart.min.js" defer></script>

  <script src="dmxAppConnect/dmxCharts/dmxCharts.js" defer></script>

  <script src="dmxAppConnect/dmxS3Upload/dmxS3Upload.js" defer></script>

  <script src="dmxAppConnect/dmxSummernoteFileUpload/summernote-upload.js" defer></script>

  <script src="dmxAppConnect/bs-custom-file-input/bs-custom-file-input.min.js" defer></script>

  <link rel="stylesheet" href="dmxAppConnect/dmxDropzone/dmxDropzone.css" />

  <script src="dmxAppConnect/dmxDropzone/dmxDropzone.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>

  <script src="dmxAppConnect/dmxMasonry/dmxMasonry.js" defer></script>

  <script src="dmxAppConnect/dmxBootbox5/bootstrap-modbox.min.js" defer></script>

  <script src="dmxAppConnect/dmxBootbox5/dmxBootbox5.js" defer></script>


  <script src="dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>

  <script src="dmxAppConnect/dmxSwiper/dmxSwiper.js" defer></script>

  <script src="dmxAppConnect/dmxSwiper/swiper.min.js" defer></script>

  <script src="dmxAppConnect/dmxGoogleDirections/dmxGoogleDirections.js" defer></script>

  <script src="dmxAppConnect/dmxTagify/dmxTagify.js" defer></script>

  <script src="https://unpkg.com/@yaireo/tagify" defer></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.7/dist/tagify.css" />

  <link rel="stylesheet" href="dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />

  <script>
    function NewTab(newtab) {
             window.open(newtab, "_blank");
              }
  </script>

  <meta name="ac:route" content="/EnienLayout">

  <base href="/">



  <dmx-download id="download1" dmx-bind:url="'/reports/'+reportdata.data.cid+'Report.pdf'"></dmx-download>
  <script is="dmx-flow" id="waitDownload" type="text/dmx-flow">[
  {
    run: {action: "{{Assessments.info('Preparing to Download')}}"}
  },
  {
    wait: {delay: 2000}
  },
  {
    run: {action: "{{download1.download()}}"}
  }
]</script>

  <dmx-value id="select1hide"></dmx-value>
  <dmx-value id="select2hide"></dmx-value>
  <dmx-value id="select3hide"></dmx-value>
  <dmx-value id="select4hide"></dmx-value>
  <dmx-value id="select5hide"></dmx-value>
  <dmx-value id="select6hide"></dmx-value>
  <dmx-value id="select7hide" dmx-bind:value="1"></dmx-value>
  <dmx-value id="select8hide"></dmx-value>
  <dmx-value id="select9hide"></dmx-value>
  <dmx-value id="select10hide"></dmx-value>
  <dmx-value id="select11hide"></dmx-value>
  <dmx-value id="select12hide"></dmx-value>
  <dmx-value id="select13hide"></dmx-value>
  <dmx-value id="select14hide"></dmx-value>
  <dmx-value id="AllQs"></dmx-value>
  <dmx-value id="GroupInd" dmx-bind:value="((scUserRole.data.QUserDetails[0].URID==4)||(scUserRole.data.QUserDetails[0].URID==7))?0:1"></dmx-value>



  <meta charset="UTF-8">
  <title>Enien Application</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



  <script src="https://www.google.com/recaptcha/api.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>





  <link rel="icon" sizes="192x192" type="image/png" href="assets/EnienMedia/favicon/android-icon-192x192-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/EnienMedia/favicon/apple-icon-180x180-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="152x152" href="assets/EnienMedia/favicon/apple-icon-152x152-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="144x144" href="assets/EnienMedia/favicon/apple-icon-144x144-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="120x120" href="assets/EnienMedia/favicon/apple-icon-120x120-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="114x114" href="assets/EnienMedia/favicon/apple-icon-114x114-dunplab-3029.png">
  <link rel="icon" sizes="96x96" type="image/png" href="assets/EnienMedia/favicon/favicon-96x96-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="76x76" href="assets/EnienMedia/favicon/apple-icon-76x76-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="72x72" href="assets/EnienMedia/favicon/apple-icon-72x72-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="60x60" href="assets/EnienMedia/favicon/apple-icon-60x60-dunplab-3029.png">
  <link rel="apple-touch-icon" sizes="57x57" href="assets/EnienMedia/favicon/apple-icon-57x57-dunplab-3029.png">
  <link rel="icon" sizes="32x32" type="image/png" href="assets/EnienMedia/favicon/favicon-32x32-dunplab-3029.png">
  <link rel="icon" sizes="16x16" type="image/png" href="assets/EnienMedia/favicon/favicon-16x16-dunplab-3029.png">


  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/1.css" />
  <link rel="stylesheet" href="css/18.css" />

  <meta name="theme-color" content="#ffffff">



  <link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/themes/blue.css" />



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous" />

  <script type="text/javascript">
    if(performance.navigation.type == 2){
  location.reload(true);
}

  </script>


</head>

NGM · September 30, 2024, 12:35pm

Hi Ben, If i copy and paste in i can only see it when i edit it... tried saving as a txt file then uploading but cant upload txt files.
Hoping you can see the head section

regarding js files there are a number of them but being a low coder I probably havent put the js files in the right place... but there are a number associated with apexcharts

Teodor · September 30, 2024, 12:57pm

NGM · September 30, 2024, 1:05pm

Thanks

ben · September 30, 2024, 1:34pm

I do not see anything wrong with the links to the files, with perhaps the exception of the number of different font files.

You say that you have a problem with the buttons. Could you show the code for a button that shows a modal?

NGM · September 30, 2024, 2:05pm

Ben,
At the moment nothing works, but the first step i did was to migrate to bs5 on one of the pages (dashboard) and this looked sort of all right but the buttons and modals didnt work - please see below button and modal code.

            <div class="row align-items-center mt-1 mb-1">
                <div class="col"><button id="btn5" class="btn w-100 btn-sm" dmx-bs-tooltip="'View / change my details including Password'" style="font-size: 18px" dmx-class:pid18-greybutton="scUserRole.data.PID[0].PID==18" dmx-class:btn-primary="scUserRole.data.PID[0].PID!=18" data-bs-toggle="modal" data-bs-target="#userdetails" data-bs-trigger="hover">My Details</button></div>
            </div>

the modal code

<div class="modal fade" id="userdetails" is="dmx-bs5-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Your Details</h5>
            </div>
            <div class="modal-body">
                <div class="row justify-content-xl-center align-items-xl-center row-cols-xl-12 row-cols-12">
                    <div class="col-3">
                        <div class="row row-cols-1 justify-content-center align-items-center ms-2">
                            <p class="text-center mb-n1">Account #</p>
                            <textarea id="Accountnumber" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].CID" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">Company Name</p>
                            <textarea id="companyname" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].CompanyName" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">Job Title</p>



                            <textarea id="phonenumber" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].UserJobTitle" readonly="true" disabled="true"></textarea>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="row row-cols-1 justify-content-center align-items-center ms-2">
                            <p class="text-center mb-n1">Title</p>
                            <textarea id="Title" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].Title" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">Surname</p>
                            <textarea id="Name" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].UserLastName" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">Email</p>



                            <textarea id="email" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].UserEmail" readonly="true" disabled="true"></textarea>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="row row-cols-1 justify-content-center ms-2 align-items-center">
                            <p class="text-center mb-n1">Date Added</p>
                            <textarea id="dateadded" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].UserDateAdded.formatDate('dd/MM/yyyy')" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">Date Last Modified</p>
                            <textarea id="datemodified" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].UserDateModified.formatDate('dd/MM/yyyy')" readonly="true" disabled="true"></textarea>
                            <p class="text-center mb-n1">User's Role</p>



                            <textarea id="role" class="form-control" rows="1" dmx-bind:value="scGetUser.data.QUserDetails[0].Role" readonly="true" disabled="true"></textarea>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="row row-cols-1 justify-content-center border rounded border-info mt-1 mb-1 ms-1 me-1 ps-1 pe-1">
                            <p class="text-center mb-n1">Notes</p>
                            <form is="dmx-serverconnect-form" id="scfUpdUserNotes" method="post" action="api/Users/UpdateUserNotes" dmx-generator="bootstrap5" dmx-form-type="horizontal">
                                <div class="form-group row">
                                    <div class="col-sm-12">
                                        <textarea id="inp_UserNotes" name="UserNotes" dmx-bind:value="scGetUser.data.QUserDetails[0].UserNotes" class="form-control" rows="5"></textarea><input type="hidden" class="form-control" id="inp_UID2" name="UID" dmx-bind:value="scGetUser.data.QUserDetails[0].UID" aria-describedby="inp_UID_help" placeholder="Enter UID">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col mt-n3 pt-1">
                                        <button type="submit" class="btn btn-primary w-50 btn-sm" dmx-bind:value="scGetUser.data.QUserDetails[0].Save">Save</button>
                                    </div>
                                </div>
                            </form>



                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btn8" class="btn btn-primary" dmx-on:click="ChgePwd.show();userdetails.hide()">Change Password</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

NGM · September 30, 2024, 2:08pm

One other thought is that the project setting is still set to bootstrap 4 ( as i still have some bs4 and some bs 5 pages)... maybe this should change??

I just tried changing it to bs5 and also change the frameworks in the project to bootstrap 5 but made no difference

NGM · September 30, 2024, 2:32pm

The first error seems to be about bootstrap not being defined - I've taken a screenshot of the inspect ... but the info shown is well beyond what i understand or know how to debug and use.

Teodor · September 30, 2024, 3:32pm

Are you sure all the js files from your dmxAppConnect folder are uploaded to the server after the conversion?
Please make sure to manually upload the whole folder.

NGM · September 30, 2024, 3:52pm

Many thanks - I'm using the development / local / own server - how would i do that?

Teodor · September 30, 2024, 4:04pm

Then there’s nothing to upload and the issue is something else.
It’s hard to tell what went wrong on your page(s) if we don’t have access to check then on some live server.

NGM · September 30, 2024, 4:07pm

could the problem be that i'm trying to migrate a bit at a time and so have bs4 and bs5... would a big bang approach and look to migrate everything in one go be better???
not really sure what difference that would have given the page im testing is bs5 and the layout is bs5 but all a bit weird

I've cloned my app and using that for all the testing

Teodor · September 30, 2024, 4:15pm

It doesn't matter, you update the site page by page when changing the framework to Bootstrap 5 and saving it.

NGM · September 30, 2024, 4:41pm

To recap

I migrated a page to bs5 and ok except modals didnt work
I then migrated the layout that the page was using and everything failed - reference error bootstrap not defined, the page wasnt picking up dmx-bind values, show and hide not working ... basically nothing works

It sounds as if the issue is with the layout page ... any suggestions on where to try / investigate now would be greatly appreciated

Teodor · September 30, 2024, 4:50pm

Is the bootstrap 5 js include added before the closing html tag of your layout page? It should be added when you add Bootstrap 5 using the frameworks menu in the App Connect panel.

NGM · September 30, 2024, 6:53pm

Hi Teodor,

These are all the bootstrap5 lines in the layout after i add bootstrap5 local in the frameworks

 <link rel="stylesheet" href="dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
 <script src="dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
 <script src="dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>
<script src="dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer></script>

  <script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>

Teodor · September 30, 2024, 7:02pm

there should be a bootstrap js include at the end of your page, before the closing </body> tag: