I'm using insertAdjacentHTML to inject forms containing values that are checked, upon post, by a server side function to ensure the values are numbers. This check is failing, and I'm trying to determine whether the issue is due to insertAdjacentHTML.
Based on its documentation, the insertAdjacentHTML text parameter holds "The string to be parsed as HTML or XML and inserted into the tree."
Does this mean variables storing numbers are converted to strings? If so, what would be the proper approach for what I've attempted below?
I have a custom context menu that, on right-click, gets values related to the clicked object:
let selector = document.querySelector("#c-menu");
$(".cmenu").contextmenu(function() {
dataID = parseInt($(this).attr("data-id"));
dataTemplate = parseInt($(this).attr("data-template"));
dataParent = encodeURIComponent($(this).attr("data-parent"));
let dataParent_int = parseInt(dataParent);
dataIndex = encodeURIComponent($(this).attr("data-index"));
let dataIndex_int = parseInt(dataIndex);
dataTitle = encodeURIComponent($(this).attr("data-title"));
var dataTitle_decoded = decodeURIComponent(dataTitle);
Then, using a template condition related to the clicked object (which represents a webpage), form values are built:
// Construct Query String to EDIT existing library node of Template 26
var params_edit_tpl26 = { parent: dataParent_int, index: dataIndex_int, title: dataTitle_decoded, template: dataTemplate, };
var queryString_edit_tpl26 = $.param(params_edit_tpl26);
// Construct Query String to ADD a new library node of Template 26
var params_add_tpl26 = { parent: dataID, };
var queryString_add_tpl26 = $.param(params_add_tpl26);
// Construct URL strings with parameters
var formURLEdit_26 = 'edit-library-node?' + queryString_edit_tpl26;
var formURLAdd_26 = 'add-library-node?' + queryString_add_tpl26;
Then the form HTML is concatenated and injected:
if (typeof dataTemplate === "number") {
if ( dataTemplate === 26 ) {
selector.insertAdjacentHTML("afterbegin", "<ul class='context-menu__items no-indent no-bullets'><li class='context-menu__item' data-role='edit'><form action='" + formURLEdit_26 + "' method='post' class='np_button_form' style='right:auto; bottom: auto;'><input type='hidden' name='np_existing' value='true'><input type='hidden' name='np_doc_id' value='" + dataID + "'><input type='submit' class='np_edit_this_button' name='submit' value='Edit Category'></form></li><li class='context-menu__item' data-role='add'><form action='" + formURLAdd_26 + "' method='post' class='np_button_form' style='right:auto; bottom: auto;'><input type='hidden' name='np_existing' value='false'><input type='hidden' name='np_doc_id' value='" + dataID + "'><input type='submit' class='np_edit_this_button' name='submit' value='Add Node'></form></li></ul>");
// checks
console.log(typeof(dataID));
} else if ( dataTemplate === 29 ) {
...
}
}
});