Develop Reference

HTML Element not being inserted

I'm working on a .NET Core project for my company where work orders are loaded from our SQL database using Entity Framework, filtered and then displayed as markers on a map through Google Maps API for our installers.
We have two types of filters: one that gets included in an Ajax POST, and one that filters locally to decrease load times and performance issues. What I'm trying to do is load the local filter items (lists that are included in the response when calling the initial Ajax POST). If the list of filter items exceeds 5 items, I want them to collapse to only 5 items and insert an anchor which expands (utilizes jQuery's toggle()) showing the rest of the items in that list.
This is the excerpt from the JavaScript function which takes care of that:
filterItems
.forEach((filterItem, i) => {
var localItem = '<label class="' + selectorContainerClass
+ ' selectorContainer" id="' + selectorContainerIdPrefix + filterItem.key
+ '"><input id="' + convertValToEng(filterItem.value)
+ '" type = "checkbox" class="filled-in navy" name="' + inputName
+ '" value="' + filterItem.key
+ '" onchange="localFilter(this, this.value)" /><span class="selector-value">'
+ filterItem.value
+ '</span> <span id="' + paramName + 'Cnt__' + filterItem.key
+ '" class="selector-count"></span></label ><br />';
document.querySelector("#" + colId).insertAdjacentHTML('beforeend', localItem);
if (i >= 5) {
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).addClass("collapse");
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).toggle(100);
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key + " + br").toggle(100);
}
});
if (filterItems.length > 5) {
//TODO: Fix the bug here; the .filter-collapse element is not being inserted under local installers.
var newEl = '<a class="filter-collapse" onclick="toggleFilterExpand(false, this)";><i class="material-icons">expand_more</i></a>';
document.getElementById(colId).insertAdjacentHTML('beforeend', newEl);
}
I should be getting a newEl inserted under the "Installer" column (8 installers, 3 of them not being displayed), but I'm not. I've tried jQuery's after() and insertAfter() methods, but neither of those worked. newEl is being generated for the "Area" column, as it should, but for the "Installer" column it's not.
I've also tried inserting the element manually through the console window with the exact same code and it works.
Would appreciate some help with this as I feel lost regarding this issue.
Thanks.

It turned out to be a stupid mistake on my end where I was removing the element newEl from the all the other filter lists before inserting a new one to the currently iterated one.

How do I Get Text from Dynamically created element in JavaScript

I am dynamically creating Div Text in JS and was wondering how I access the various text upon click.
Here is what I have tried so far;
My Dynamically created div
function Message(Side, message) {
var divChat = '<div class="direct-chat-msg ' + Side + '">' +
'<div id="myDiv" class="direct-chat-text">' + message + '</div>' +
'<div id="accountMenu">' +
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
'<li>Preferences</li>' +
'</ul>' +
'</div></div>';
$('#divChatWindow').append(divChat);
}
JS when the li is clicked on.
function getMessage(str) {
alert(str);
}
The error I am getting is:
Uncaught ReferenceError: *whaeverthemessageis* is not defined
at HTMLLIElement.onclick
What is the best solution to solve this problem?
Thanks =)

You have malformed html using single and double quotes. The message is being treated as a variable, not a string, hence the undefined error.
replace:
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
with this:
'<li onclick = "getMessage(\'' + message + '\')" id="replyDiv">Reply</li>' +

I'm not exactly sure what the problem is, but here is a working Playcode

On window resize event javascript on object tag

I have created Jquery tabs and embedded a JSP page on the parent page. I have called on window resize events on both pages. But the inner page function does not get invoked.
For the inner page I have an SVG element which needs to be resized every time the window is resized.
sLinkPageToJunction = '<%=base1%>' + "/InnerTabbedPage.jsp?IntersectionName=" + strIntersectionName + "&FrameName=" + strFrameName + "&ip=" + '<%=ServerIP %>' + "&port=" + '<%=ServerPORT %>' + "&InterCorridorName=" + svgfilename;
if (document.getElementById("JnLive" + strIntersectionName) == null) {
//var nextTab = $('#tabs li').size()+1;
Tabcount = $('#tabs li').size();
// create the tab
$('<li>' + strIntersectionName + ' <button class="close closeTab" align="right" "type="button">x</button></li>').appendTo('#tabs');
// create the tab content
$('<div class="tab-pane" id="tab' + strIntersectionName + '"> <div id="JnLive' + strIntersectionName + '" class="col-sm-6" style="margin-top: 1%"> </div>').appendTo('.tab-content');
var heightvalue = $(window).height();
var widthvalue = $(window).width()
//alert("---->"+heightvalue+"---->"+widthvalue);
var url = "<object id=obj'" + strIntersectionName + "' data='" + sLinkPageToJunction + "' height='" + heightvalue + "' width='" + widthvalue + "'></object>";
$("#JnLive" + strIntersectionName).html(url);
// make the new tab active
$('#tabs a:last').tab('show');
OpenedTabbedJunctionNames[Tabcount - 1] = strIntersectionName;
OpenedTabbedJunctionFrameNames[Tabcount - 1] = strFrameName;
registerCloseEvent();
}
So it creates a new tab if it does not already exist.
Now my on windowresize event on the inner page is
window.addEventListener('resize', changeframesizeJN) ;
on the outer page it is
window.addEventListener('resize', changeframesize) ;
But when I resize the window with the tab selected changeframesizeJN is not invoked.
How can I do that?
P.S: I dont know if I have put the information that is required for the question to be answered. The fact is I am not sure how to ask this question.

You give your panel a fixed width and height from what I can tell from your code. You should change the CSS of your inner page to resize with it's parent.
Alternatively you could call the inner page function on the resize of its outer parent as well as its own. Since its on the same domain you won't have any problem doing this:
window.addEventListener('resize', function() {
changeframesize();
window.frames['yourIframeName'].changeframesizeJN();
});
Just make sure you give your inner window a name so you can select it. Or use it's index but I would recommend using a name to keep it readable:
window.frames[0].changeframesizeJN();

Try adding the resize onto the object tag, like:
var url = "<object id=obj'" + strIntersectionName + "' onresize='changeframesizeJN()' data='" + sLinkPageToJunction + "' height='" + heightvalue + "' width='" + widthvalue + "'></object>";
If that works then you can bind it to the object, the same as your window, except with the object element instead.
objectElement.addEventListener('resize', changeframesizeJN) ;

jQuery .click(function(){ not working

<a class="click_' + module_row + '_' + element + '_on">Show</a>
<div class="div_' + module_row + '_' + element + '_show">div content</div>
$('.div_' + module_row + '_' + element + '_show').hide();
$('.click_' + module_row + '_' + element + '_on').click(function(){
$('.div_' + module_row + '_' + element + '_show')
.fadeIn('slow')
.show('slow')
});
I trying to show dynamically a div content via JavaScript. But not working.

I'm guessing that you are adding it dynamically via JavaScript, if that is the case you should use:
$(document).on('click','.click_' + module_row + '_' + element + '_on',function () {
// hide here, that is simple
});
Edit 1) DO you have module_row and element defined? I'm thinking that is the problem. Tell us more about those selectors?
Edit 2) Since you told me that module_row and elements are numbers, you should use different syntax. Use php to put module_row and element in attribute. Code HTML:
<a class="div_show" data-module="module_row" data-element="element">div content</div>
Code JS:
$(document).on('click','.click_on',function (e) {
// not to reload the page
e.preventDefault(e);
var module = $(this).attr('data-module');
var element = $(this).attr('data-element');
$('div_' + module + '_' + element + '_show').hide()
});
You might need to tweak it around little more, but thats it

How to create a tooltip using bootstrap 3 and javascript/css

I am working on a game and I want to create tooltip for items, there is alot of them and player can possibly store 100 or more items. I want each of them to display stats in tooltip, without any delay when hovering. I am using basic html data-toogle I believe or maybe its part of bootstrap I dont know.
html += '<img src="images/items/' + playerInventory[i].subType + "/" +
playerInventory[i].image + '.png" "data-toggle=" "tooltip" title="'
html += "You will gain:"
html += '\n'
html += "Item Type: " + playerInventory[i].subType + '\n'
if (playerInventory[i].minDamage > 0 && playerInventory[i].maxDamage > 0) {
html += "Min Damage: " + (playerInventory[i].minDamage - itemStat.minDamage) + '\n'
html+= "Max Damage: " + (playerInventory[i].maxDamage - itemStat.maxDamage) + '\n'
}
The problem is that I want to change the way this pop up window appear, I want to remove delay, change colors/font etc. I am using javascript only and so far I found most if not all answer in jquery which does not help me at all.