Нажмите на опцию выбора, чтобы открыть МОДАЛЬНЫЙ [закрыто] ⇐ Php

[Anonymous]

Я пытаюсь добавить функциональность в свой код, чтобы, как только я нажимаю на опцию «Выбрать ошибку обработки», сразу появляется модальное окно с текстовым полем и двумя кнопками сохранения и отмены, но только графический интерфейс, однако я Я уже давно пытаюсь это сделать, но не могу, или, скорее, код, который я создаю, чтобы попытаться это сделать, создает конфликт с другими кодами, и все перестает работать,
function showDetails(type) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `pedidos.php?type=${type}`, true);
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
let detailsContent = '';

if (type === 'miniaturas') {
detailsContent = `

Lista de miniaturas para Imprimir




Name
Nota
Status


`;

data.forEach(row => {
detailsContent += `
${row.nome_miniatura}
${row.status === "Falha Processamento" ? "Erro na impressão" : ""}




Nao Concluido
Concluido
Pintado

Atualizar


`;
});

detailsContent += `
© 2024 Sistema Interno - Todos os direitos reservados.
`;
}

else if (type === 'guarda') {
detailsContent = `

Lista de miniaturas para Passar Tinta de Guarda




Name
Status


`;

data.forEach(row => {
detailsContent += `
${row.nome_miniatura}




Guarda
Falha

Atualizar


`;
});

detailsContent += `
© 2024 Sistema Interno - Todos os direitos reservados.
`;
}

else if (type === 'montar') {
detailsContent = `

Lista de miniaturas para Montar




Name
Status


`;

data.forEach(row => {
detailsContent += `
${row.nome_miniatura}




Montado
Falha
Falha Processamento

Atualizar


`;

});

detailsContent += `
© 2024 Sistema Interno - Todos os direitos reservados.
`;
}

else if (type === 'caixas') {
detailsContent = `

Lista de caixas para Preparar




Caixa
Miniatura
Status


`;

let caixa_numero = 1;

// Itera sobre os dados recebidos
data.forEach(row => {
// Divide as miniaturas em uma lista, considerando a separação por '\n'
const miniaturas = row.miniaturas.split('\n');
miniaturas.forEach(miniatura => {
// Adiciona uma linha na tabela para cada miniatura
detailsContent += `
Caixa ${caixa_numero} - ${row.nome_order}
${miniatura}




Pronto
Falha

Atualizar


`;
});

// Incrementa o número da caixa após adicionar todas as miniaturas
caixa_numero++;
});

detailsContent += `
© 2024 Sistema Interno - Todos os direitos reservados.
`;

// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}

else if (type === 'Rasteiartudo') {
detailsContent = `

Lista de Caixas Rasteadas




Caixas
Código de Rastreamento
Data


`;

let caixa_numero = 1;
data.forEach(row => {
detailsContent += `
Caixa ${caixa_numero} - ${row.nome_order}
${row.codigo_rastreio}
${row.data}
`;
caixa_numero++;
});

detailsContent += `

© 2024 Sistema Interno - Todos os direitos reservados.
`;

// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}

else if (type === 'progresso') {
let selectedStatus = {};

// Retrieve stored selected status on page load
selectedStatus = JSON.parse(localStorage.getItem('selectedStatus')) || {};

detailsContent = `

Progresso das Caixas




Caixas
STP
CTT Portugal
Finalizado


`;

let caixa_numero = 1;
data.forEach(row => {
let codigoRastreamento = row.codigo_rastreio ? 1 : 0; // Se código de rastreio não for nulo, considera fase 1 como ativada

// Define o status atual para a caixa
let stpChecked = codigoRastreamento === 1 ? 'checked' : '';
let cttChecked = codigoRastreamento === 2 ? 'checked' : '';
let finalizadoChecked = codigoRastreamento === 3 ? 'checked' : '';

detailsContent += `
Caixa ${caixa_numero} -» ${row.nome_order}



`;
caixa_numero++;
});

detailsContent += `

© 2024 Sistema Interno - Todos os direitos reservados.
`;

// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}

};
xhr.send();






Informe o motivo da falha


Salvar
Cancelar





Sucesso
Falha Processamento





document.getElementById('statusSelect').addEventListener('change', function() {
var selectedOption = this.value;
if (selectedOption === 'falha') {
document.getElementById('falhaModal').style.display = 'block';
}
});

document.getElementById('salvarFalha').addEventListener('click', function() {
var motivo = document.getElementById('falhaMotivo').value;
if (motivo.trim() === '') {
alert('Por favor, informe o motivo da falha.');
} else {
console.log('Motivo da falha salvo:', motivo);
document.getElementById('falhaModal').style.display = 'none';
}
});

document.getElementById('cancelarFalha').addEventListener('click', function() {
document.getElementById('falhaModal').style.display = 'none';
});

document.getElementById('modalOverlay').addEventListener('click', function() {
document.getElementById('falhaModal').style.display = 'none';
});


``` testei isso separadamente funcionou perfeitamente, mas o problema é que quando eu tento adaptar a este trecho do codigo aqui, não funciona e ainda interfere no funcionamento de outros

else if (type === 'mount') {
detailsContent = `

Список миниатюр для монтирования




Name
Status


`;

data.forEach(row => {
detailsContent += `
${row.nome_miniatura}




Montado
Falha
Falha Processamento

Atualizar


`;

});

detailsContent += `
© 2024 Sistema Interno - Todos os direitos reservados.
`;
}




Подробнее здесь: https://stackoverflow.com/questions/790 ... ir-o-modal