The bootstrap popup does not open from the first click, and the necessary data is not loaded by ID, what's wrong?

Question

JavaScript

In general, you need a grid in the popup, when you click, the ID is transferred to the server, and there it makes a renderPartial, jquery code:

$('#warningHistory').click(function(e) {
        $.post(
            $(this).data('uri'),
            {
                'id': $(this).data('id')
            },
            function(result) {
                $('.report-index').append(result);
                $('#warningHistoryModal').on('shown.bs.modal', function () {
                    $('#closeButton').focus()
                })
            }
        );
    });

corrected, but somehow nothing, it got even worse

$('#warningHistory').click(function(e) {
        e.preventDefault();
        $('#warningHistoryModal').on('shown.bs.modal', function () {
                $.post(
                    $(this).data('uri'),
                    {
                        'id': $(this).data('id')
                    },
                    function (result) {
                        $('.report-index').append(result);
                    }
                )
            }
        );
    });

Answer 1

1. the code you provided does not open the modal, but sends an ajax request
2. why renderPartial and not renderAjax?
3. Bind ajax not to the click, but to the "show.bs.modal" or "shown.bs.modal" event (the latter is more reliable), then everything will be ok.