#javascript
#язык JavaScript
Вопрос:
Я создал метод для отображения сводки проверки. У меня есть частичный элемент управления со структурой таблицы в нем. Я заполняю и создаю таблицу динамически, используя javascript. Всплывающее окно отображается нормально при первом щелчке, а затем я закрываю всплывающее окно. Но при втором щелчке происходит сбой, селектор элементов возвращает значение null. Это почему?
const titleText = document.querySelector("#titleTxt"); Вот частичный контроль:
lt;div id="validationSummary" style="visibility: hidden"gt; lt;div id="entityList" style="text-align:center; font-weight:bold"gt; lt;span id="titleTxt"gt;lt;/spangt; lt;table class="table" style="border:solid 1px black;"gt; lt;theadgt; lt;trgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;#lt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Validationlt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Detailslt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Severitylt;/thgt; lt;/trgt; lt;/theadgt; lt;tbody id="tableBody"gt; lt;/tbodygt; lt;/tablegt; lt;/divgt; Вот способ отображения всплывающего окна:
function DisplayValidationSummary() { let accountNumber = '@Model.AccountNumber'; let versionId = '@Model.VersionId'; let rollYr = $('#accountRollYear').val(); let validationURL = asrAppApiHelper.getValidationErrorsUrl(accountNumber, versionId, rollYr); $.when(asrKendoHelper.asrDataSet.getDataFromUrlByPromise(validationURL)).then((validationResult) =gt; { if (validationResult.length gt; 0) { const tableData = validationResult.map(function (value, index) { let iconCol = `lt;tdgt;lt;/tdgt;` if (value.validationSeverity === 'Error') { iconCol = `lt;td lt;i class="fa fa-times" style="color:red"gt;lt;/igt;lt;/tdgt;` } if (value.validationSeverity === 'Warning') { iconCol = `lt;td lt;i class="fa fa-exclamation-triangle" style="color:orange"gt;lt;/igt;lt;/tdgt;` } if (value.validationSeverity === 'Ok') { iconCol = `lt;td lt;i class="fa fa-check" style="color:green"gt;lt;/igt;lt;/tdgt;` } return ( `lt;trgt; lt;td style="border-right:solid 1px black;"gt;${index 1}lt;/tdgt; lt;td style="border-right:solid 1px black;"gt;${value.validationType}lt;/tdgt; lt;td style="border-right:solid 1px black;"gt;${value.validationDetail}lt;/tdgt; ${iconCol} lt;/trgt;` ); }).join(''); const titleText = document.querySelector("#titleTxt"); titleText.innerHTML = "A/C:amp;nbsp;" accountNumber "amp;emsp;Version #" versionId "amp;emsp;Validation Summary"; const tableBody = document.querySelector("#tableBody"); tableBody.innerHTML = tableData; const validationSummary = document.querySelector("#validationSummary"); validationSummary.style.visibility = "visible"; getAlertWindow(validationSummary); } }); Комментарии:
1. Вы случайно не удаляете элемент из DOM при закрытии всплывающего окна?
2. Итак, где вы удаляете всплывающее окно?
3. Я не уничтожаю всплывающее окно, но похоже, что всплывающее окно kendo может что-то делать и уничтожать его. Если я обновлю страницу и нажму на всплывающее окно, оно загрузится нормально в первый раз. Я использовал консоль, чтобы проверить, существует ли сводка проверки, и она говорит, что она не существует после первого щелчка.
4. Похоже, что ваш всплывающий код удаляет элемент, поэтому вам, вероятно, нужно его клонировать. Это предположение, так как мы понятия не имеем, как вы создаете всплывающее окно. Все это скрыто от нас.
5. @epascarello Я проверю и свяжусь с вами.
Ответ №1:
Как отметили другие комментаторы, вы, должно быть, удаляете элемент из DOM, возможно, с помощью вызова .remove()? Вместо этого вы можете вернуть его видимость на скрытую:
validationSummary.style.visibility = "hidden"; Комментарии:
1. Если я сделаю это последней строкой в своем коде javascript, содержимое всплывающего окна будет пустым, потому что элемент теперь снова скрыт.
2. Вам понадобятся две разные функции. Один, чтобы сделать видимость видимой, а другой, чтобы сделать ее скрытой. Используйте события javascript, такие как onClick, для вызова ваших функций.
Ответ №2:
Изменил все с некоторой помощью, чтобы выглядеть так:
$("#button-open-validations").click((e) =gt; { e.preventDefault(); e.stopPropagation(); DisplayValidationSummary(); }); function displayValidationSummaryPromise() { return new Promise((resolve, reject) =gt; { let accountNumber = '@Model.AccountNumber'; let versionId = '@Model.VersionId'; let rollYr = $('#accountRollYear').val(); let isvalidationFailed = false; let validationURL = asrAppApiHelper.getValidationErrorsUrl(accountNumber, versionId, rollYr); $.when(asrKendoHelper.asrDataSet.getDataFromUrlByPromise(validationURL)).then((validationResult) =gt; { if (validationResult.length gt; 0) { const tableData = validationResult.map(function (value, index) { let iconRow = `lt;tdgt;lt;/tdgt;` if (value.validationSeverity === 'Error') { if (isvalidationFailed != true) isvalidationFailed = true; iconRow = `lt;td lt;i class="fa fa-times" style="color:red"gt;lt;/igt;lt;/tdgt;` } if (value.validationSeverity === 'Warning') { iconRow = `lt;td lt;i class="fa fa-exclamation-triangle" style="color:orange"gt;lt;/igt;lt;/tdgt;` } if (value.validationSeverity === 'Ok') { iconRow = `lt;td lt;i class="fa fa-check" style="color:green"gt;lt;/igt;lt;/tdgt;` } return ( `lt;trgt; lt;td style="border-right:solid 1px black;"gt;${index 1}lt;/tdgt; lt;td style="border-right:solid 1px black;"gt;${value.validationType}lt;/tdgt; lt;td style="border-right:solid 1px black;"gt;${value.validationDetail}lt;/tdgt; ${iconRow} lt;/trgt;` ); }).join(''); let valid = `lt;div id="validationSummary" gt; lt;div id="entityList" style="text-align:center; font-weight:bold"gt; lt;span id="titleTxt"gt;A/C:amp;nbsp;${accountNumber}amp;emsp;Version # ${versionId} amp;emsp;Validation Summarylt;/spangt; lt;table class="table" style="border:solid 1px black;"gt; lt;theadgt; lt;trgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;#lt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Validationlt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Detailslt;/thgt; lt;th scope="col" style="text-align:center; border:solid 1px black;"gt;Severitylt;/thgt; lt;/trgt; lt;/theadgt; lt;tbody id="tableBody"gt;${tableData}lt;/tbodygt; lt;/tablegt; lt;/divgt; lt;/divgt;` resolve({ summary:valid, errorFlag: isvalidationFailed}); } }); }); } function DisplayValidationSummary() { displayValidationSummaryPromise().then((validationSummary) =gt; { getAlertWindow(validationSummary.summary); }); } Удалил частичный элемент управления и теперь создаю всю таблицу в javascript.