rikschennink / short-and-sweet

📟 Accessible character counter for input elements

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use this for many modals?

typhoon11 opened this issue · comments

commented

So I have modals that open up when the user clicks on the edit button of the data and the character count for each modal text area are different but the counter shows the same till onkeyup event is emitted.

This is the way I open multiple modal:

$(document).on('click', '.cc_edit', function(e) {
            e.preventDefault();

            document.getElementsByTagName('html')[0].style.overflow = 'hidden';
            document.getElementsByTagName('body')[0].style.overflowY = 'scroll';

            const command = $(this).attr('data-command');
            const response = $(this).attr('data-response');
            const deletable = $(this).attr('data-deleteable');
            const dm = $(this).attr('data-dm');

            $("#cc_edit #command_name").val(command)
            $("#cc_edit #old_command_name").val(command)
            $("#cc_edit #command_response").val(response)
            if(deletable == "true") {
                $("#cc_edit #delete_command").prop("checked", true)
            } else {
                $("#cc_edit #delete_command").prop("checked", false)
            }

            if(dm == "true") {
                $("#cc_edit #dm_response").prop("checked", true)
            } else {
                $("#cc_edit #dm_response").prop("checked", false)
            }

            $('#cc_edit').modal('toggle')
    });

On closing the modal:

$(document).on("hidden.bs.modal", "#cc_edit", function(e) {
        document.getElementsByTagName('html')[0].style.overflow = '';
        document.getElementsByTagName('body')[0].style.overflowY = '';
    })
commented

Hi, I want to kindly ask to post integration questions on Stack Overflow, it also helps if you add an example integration on codesandbox.io, this issue tracker is for bugs only.