PAID Javascript Function Fix help

Jobs
#1

I am creating a javascript function. As you can imagine I am beginner with javascript. I a looking for someone that can help me with small details I dont know how to reach, Via Zoom or teamviewer. PAID

#2

Can you explain the requirements in more detail? (Mine is free help regardless)

#3

Do you have time? I can show you. For a Javascript coder will be simple.

#4

Best create a video or post more details here. I have around 50 unpublished extensions laying around and can just share any here that might solve your problem.

2 Likes
#5

GrabacioĢn de pantalla 2023-05-05 a la(s) 12.53.44

I am creating a CSM that can edit on the fly. When you click element you can edit and when you blur, if detects change on inner html open a modal to save the content on database.

The problem is that when you blur out and the pointer is over other element seem to open 2 modals and get cofused. So how to disable the other elements when you click the first one.

const elementos = document.querySelectorAll('[bycom="true"]');   
 elementos.forEach((elemento) => {
            elemento.addEventListener('click', () => {
            if (isEdit){
            campoFormulario.value = elemento.innerHTML;
            elemento.setAttribute('bycomEdit', true);
            }
            });
            

            elemento.addEventListener('blur', () => {
            var bycomedit = document.querySelector('[bycomedit="true"]');
            campoFormulario2.value = bycomedit.innerHTML;
            
                if (campoFormulario2.value !== campoFormulario.value) {
                var modalBycom = new bootstrap.Modal(document.getElementById('modalBycom'), {
                backdrop: 'static',
                keyboard: false
                });
                modalBycom.show();
                }
            });

        });
#6

You need to prevent the function from running if one modal is already open. Lemme quickly rewrite your function.

1 Like
#7 
const elementos = document.querySelectorAll('[bycom="true"]');
let modalOpen = false; // Add a variable to track if a modal is open

elementos.forEach((elemento) => {
    elemento.addEventListener('click', () => {
        if (isEdit && !modalOpen) { // Check if modal is not open
            campoFormulario.value = elemento.innerHTML;
            elemento.setAttribute('bycomEdit', true);
        }
    });

    elemento.addEventListener('blur', () => {
        var bycomedit = document.querySelector('[bycomedit="true"]');
        if (bycomedit) {
            campoFormulario2.value = bycomedit.innerHTML;

            if (campoFormulario2.value !== campoFormulario.value) {
                if (!modalOpen) { // Check if modal is not open before opening another
                    var modalBycom = new bootstrap.Modal(document.getElementById('modalBycom'), {
                        backdrop: 'static',
                        keyboard: false
                    });
                    modalBycom.show();
                    modalOpen = true; 
                }
            }
            bycomedit.removeAttribute('bycomEdit'); // Remove the bycomEdit attribute after the blur event
        }
    });
});

document.getElementById('modalBycom').addEventListener('hidden.bs.modal', () => {
    modalOpen = false; 
});
1 Like
#8

Thanks thanks a lot. This help me. Other question do you find Wappler code editor javascript formatter difficult? My code seems like a word documentā€¦ no tabs no spacesā€¦

#9

I personally only use the internal code editor if I quickly need to try or find something. I usually stick to lazyvim and sometimes vscode depending on the project.

#10

Thanks for advice- I sent PM.