I have the following code which is a modal element. The "NewButton" element is supposed to trigger a text input box in which the user writes the reason for the delete action. The Scripts part is what copilot suggested me to do, but it's doing nothing when I click the button. I already have an Index.js page in which I configure the modals onOpen events, I don't know if I should have the Scripts part in that file. I never used ABP framework before, so I'm little confused, but it's what my company is using so I have to adapt to it. I already tried changing the button "class" to "id" and to using regular bootstrap syntax instead of abp but nothing worked. Nothing logged either.
<form asp-page="/NxsAlteraStatusPed/LogModal">
<abp-modal size="Large">
<abp-modal-header title="@L["LogQuery"].Value"></abp-modal-header>
<abp-modal-body>
@for(var i = 0; i < Model.ViewModel.LogQuery.Count; i++)
{
<strong>@Model.ViewModel.LogQuery[i].StatPedVendaDescr</strong>
<abp-card-text>@Model.ViewModel.Info[i]</abp-card-text>
}
<abp-button class="NewButton" text="@L["Action:DeleteLog"].Value" icon="trash" button-type="Danger" />
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
</abp-modal>
<div id="inputBox" style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1060;">
<input type="text" id="logInput" placeholder="Enter log info" />
<button type="button" onclick="submitLog()">Submit</button>
</div>
</form>
@section Scripts {
<script>
document.getElementById('NewButton').addEventListener('click', function (event) {
console.log('button was clicked');
event.preventDefault(); // Prevent form submission
document.getElementById('inputBox').style.display = 'block'; // Show the input box
});
function submitLog() {
// Logic to handle the submission of the input box
document.getElementById('inputBox').style.display = 'none'; // Hide the input box after submission
}
</script>
}
document.getElementById('NewButton')
assumes it's an 'id'. So indeed, you must already putid='newButton'
. Else, usegetElementsByClassName()
and take the first element.