addButtonFromView & tabler issue

[blondie63]

I've converted some my projects from Coreuiv2 to Tabler and all working fine except this two buttons:

$this->crud->addButtonFromView('line', 'change_user_password', 'change_user_password', 'beginning');
$this->crud->addButtonFromView('line', 'switch_user_registered', 'switch_user_registered', 'beginning');

The buttons appear correctly but clicking them does nothing at all, no errors in the browser console!
What could it be? Here is my corresponding blade resources/views/vendor/backpack/crud/buttons/change_user_password.blade.php

<a href="javascript:void(0)" id="edit-password-btn"
    class="btn btn-sm btn-link {{ (int) backpack_user()->user_level_id !== 5 ? '' : 'disabled' }}"
    data-id="{{ $entry->getKey() }}" data-style="zoom-in" data-toggle="modal" data-target="#changeUserPasswordModal">
    <span class="ladda-label"><i class="la la-edit"></i>{{ trans('backpack::ash_base.change_password') }}<span>
</a>

@push('before_scripts') @if (request()->ajax())
@endpush
@endif

<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('body').on('click', '#edit-password-btn', function() {
        let user_id = $(this).data('id');
        $("input[name='user_id']").val(user_id);
    });

    function editPassword(id) {
        $("input[name='user_id']").val(id);
    }

    $('#changePasswordForm').unbind('submit').submit(function(e) {
        e.preventDefault();
        let user_id = $("input[name='user_id']").val();
        let new_password = $("input[name='new_password']").val();
        let password_confirm = $("input[name='password_confirm']").val();

        console.log('send n.')

        $("#error_message").hide();

        if (new_password != '' && password_confirm) {
            if (new_password == password_confirm) {
                $.ajax({
                    url: "/admin/user-change-password",
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token: $("input[name=_token]").val(),
                        id: user_id,
                        password: password_confirm
                    },
                    success: function(res) {
                        if (res.success == true) {
                            location.reload();
                        }
                    },
                    error: function(err) {},
                });
            } else {
                let error_message = document.querySelector("#error_message");
                $("#error_message").show();
            }
        }

    });

    $("#changeUserPasswordModal").on("hidden.bs.modal", function(e) {
        $("input[name='user_id']").val("");
        $("input[name='new_password']").val("");
        $("input[name='password_confirm']").val("");
        $("#error_message").hide();
        $(this).removeData("bs.modal");
    });
</script>

@if (!request()->ajax())
@endpush
@endif

and modal resources/views/modal/users/changeUserPassword.blade.php

<div class="modal fade" id="changeUserPasswordModal" tabindex="-1" role="dialog" aria-labelledby="changeUserPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modifica password</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="error_message" style="display: none">
            <label><span class="text-danger">Le password non corrispondono!</span></label>
          </div>
            <form id="changePasswordForm">
              @csrf
              <input type="hidden" name="user_id">
              <div class="form-group">
                  <label for="new_password">Password</label>
                  <input type="password" class="form-control" id="new_password" name="new_password" autocomplete="new-password">
              </div>
              <div class="form-group">
                  <label for="password_confirm">Conferma password</label>
                  <input type="password" class="form-control" id="password_confirm" name="password_confirm" autocomplete="new-password">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                @if ((int) backpack_user()->user_level_id !== 3)
                <button class="btn btn-primary">{{ trans('backpack::base.save') }}</button>
                @endif
              </div>
            </form>
        </div>
      </div>
    </div>
</div>

Some help ?
Thanks

[jcastroa87]

Hello @blondie63

Did you clean all the cache?

php artisan optimize:clear
php artisan basset:clear
php artisan basset:cache
php artisan optimize

If this didnt clean cache, please check chmod

sudo chown -R $USER:www-data storage
sudo chmod -R 775 storage

If is not working, check too storage link:

php artisan storage:unlink
php artisan storage:link

Let me know if thats help.

Cheers.

[blondie63]

Very often i this bkpall.sh :
composer self-update
composer dump-autoload
composer update
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan optimize:clear
php artisan basset:clear
php artisan basset:cache

i've tried now:
php artisan storage:unlink
php artisan storage:link

But same result that you can see on this video

customButtonsIssue.mp4

@jcastroa87 What do you think ?

[jcastroa87]

When you inspect the code, can you see the JS code?
Did you try print some console to click event?

Cheers.

[blondie63]

@jcastroa87 Yes, open browser console i can see but when i click on "Cambia Password" there's no event as you can see on next video here:

customButtonsIssue-debug.mp4

[blondie63]

@jcastroa87 below a video os same code about inline button working fine on prj with coreuiV2..

backpack-psw-change-coreUIV2-OK.mp4

[pxpm]

@blondie63 coreuiv2 uses Bootstrap 4 while tabler uses Bootstrap 5.
There are different attributes required to open modals etc on BS5 that were not required in BS4.

I know you have PRO, so you can go to vendor/backpack/pro/resources/views/relationship/fetch_or_create.blade.php and check how we are initializing and opening the modal. I remember we needed to do some changes on the modal initialization so that it worked with both BS4 and BS5.

Let me know if that helps.

Cheers

[blondie63]

Hi @pxpm the right path is /vendor/backpack/pro/resources/views/fields/relationship/fetch_or_create.blade.php :)
I'll tell you the truth, I looked at the code you pointed out but it's too complicated for me, but you gave me the indication about Bootstrap 5 and then I asked chatGPT to convert my code and boom!! Now it works perfectly :)

Thanks !!

[pxpm]

Team work! 🥳

Happy you solved it! Keep it up 🙏

Cheers