Getting Tippy Nested ToolTip Displayed - javascript

I've been trying to get Tippy.js' nested tooltip feature working but haven't had luck so far.
the following lines are placed outside jQuery's Document ready function:
tippy.setDefaultProps({
appendTo: function () {
return document.querySelector('.responseBody')
}
})
popperOptions: { strategy: 'fixed' };
tippy.delegate('.responseBody', {
target: '.tooltip'
});
the tooltip content is being added dynamically based on an extract from ajax response and the ajax function is the following:
function _loadLaunchPad(iSMHost, iSMPort, urlExtension) {
var _serverName = $('#serverName option:selected').text();
var _addOnSelect = $('#addOnSelect option:selected').text();
var _consoleCmdExprValue = $('#consoleCmdExprValue').val();
var dataString = '{ "serverSelection" : "' + _serverName + '", "operationSelection" : "' + _addOnSelect + '", "commandSelection" : "' + _consoleCmdExprValue + '"}';
var stringToSend = " <img class='preLoader' src='images/preloader.gif' title = 'Processing request'/>";
const _toolTipContentHeader = ' <div>' +
' <strong>Server Name    <span class="tooltip" data-title="<strong>hey</strong>" style="color: aqua">%HDRITEM0%</span></strong><br />' +
' <strong>Server IP Address    <span style="color: aqua">%HDRITEM1%</span></strong><br />' +
' <strong>Server #Processors    <span style="color: aqua">%HDRITEM2%</span></strong><br />' +
' <strong>Version    <span style="color: aqua">%HDRITEM3_1%</span></strong><br />' +
' <strong>Build Ref    <span style="color: aqua">%HDRITEM3_2%</span></strong><br />' +
// ' <strong>Build Date    <span style="color: aqua">%HDRITEM3_3%</span></strong><br />' +
' <strong>Configs Count    <span style="color: aqua">%HDRITEM4%</span></strong><br />' +
' <strong>Master Config    <span style="color: aqua">%HDRITEM5%</span></strong><br />' +
' </div>';
const _toolTipContentLine = ' <div>' +
' <strong>Server Name    <span style="color: aqua">%LNITEM0%</span></strong><br />' +
' <strong>Config Process ID    <span style="color: aqua">%LNITEM1%</span></strong><br />' +
' <strong>Config Status    <span style="color: aqua">%LNITEM2%</span></strong><br />' +
' <strong>Config Java Version    <span style="color: aqua">%LNITEM3%</span></strong><br />' +
' <strong>Version    <span style="color: aqua">%LNITEM4_1%</span></strong><br />' +
' <strong>Build Ref    <span style="color: aqua">%LNITEM4_2%</span></strong><br />' +
// ' <strong>Build Date    <span style="color: aqua">%LNITEM4_3%</span></strong><br />' +
' <strong>iBSE Port (If Enabled)    <span style="color: aqua">%LNITEM5%</span></strong><br />' +
' <strong>Master Config    <span style="color: aqua">%LNITEM6%</span></strong><br />' +
' <strong>Registry    <span style="color: aqua">Here</span></strong><br />' +
' <strong>Blue    <span style="color: aqua">Here</span></strong><br />' +
' <strong>Runtime    <span style="color: aqua">Here</span></strong><br />' +
' </div>';
$.ajax({
type: "POST",
url: `http://${iSMHost}:${iSMPort}/${urlExtension}`,
data: dataString,
timeout: 60000 * 30, //60000 milliseconds * 30 = 30 minutes
async: true,
contentType: "application/json",
cache: false,
beforeSend: function () {
$(".terminal .top").addClass('color-change-5x');
$('.terminal .responseBody').html("");
},
success: function (result) {
if (_addOnSelect == 'ConfigsList') {
var h1 = $('<h1 class="responseTitleText">Launch Pad</h1>')
var tabDiv = $('<div id="tabsID"></div>')
var prodTab = $('<div class="tab-container" data-tab-index="0"></div>');
var testTab = $('<div class="tab-container" data-tab-index="1" style="display:none;"></div>');
$('.terminal .responseBody').append(h1);
$('.terminal .responseBody').append(prodTab);
$('.terminal .responseBody').append(testTab);
for (var i = 0; i < result.length; ++i) {
var div = $('<div>'), ulForTest = $('<ul>'), ulForProd = $('<ul>');
var _tempHeaderItem = result[i];
var _tempInstanceFlag = (_tempHeaderItem.host).split(':')[1];
var _tempHostEnvironment = (_tempHeaderItem.host).split(':')[0]
_tempHostEnvironment = ((/p.me.com$/).test(_tempHostEnvironment)) ? 'Prod' : 'Test';
var replacementsForHDR = {
"%HDRITEM0%": _nvl(_tempHeaderItem.host.replace('.me.com', '')),
"%HDRITEM1%": _nvl(_tempHeaderItem.serverIP),
"%HDRITEM2%": _nvl(_tempHeaderItem.processorsCount),
"%HDRITEM3_1%": _nvl(_tempHeaderItem.configs[0].Version),
"%HDRITEM3_2%": _nvl(_tempHeaderItem.configs[0].Build),
// "%HDRITEM3_3%": _nvl(_tempHeaderItem.configs[0].BuildDate),
"%HDRITEM4%": _nvl(('Active: ' + _tempHeaderItem.activeConfigsCount + '/ Inactive: ' + _tempHeaderItem.inActiveConfigsCount)),
"%HDRITEM5%": _nvl(_tempHeaderItem.master)
};
var _toolTipContentHeaderInstance = _toolTipContentHeader.replace(/%\w+%/g, function (all) {
return replacementsForHDR[all] || all;
});
_tempInstanceFlag = (_tempInstanceFlag == '19') ? '1st' : (_tempInstanceFlag == '29') ? '2nd' : (_tempInstanceFlag == '39') ? '3rd' : (_tempInstanceFlag == '49') ? '4th' : '1st?';
if(_tempHostEnvironment == 'Prod'){
ulForProd.append("<li class='tooltip' data-title='" + _toolTipContentHeaderInstance + "'>" + ((_tempHeaderItem.host).split('.')[0]).replace(".me.com", "") + " " + _tempInstanceFlag + "</li>")
}else{
ulForTest.append("<li class='tooltip' data-title='" + _toolTipContentHeaderInstance + "'>" + ((_tempHeaderItem.host).split('.')[0]).replace(".me.com", "") + " " + _tempInstanceFlag + "</li>")
}
for (var j = 0; j < _tempHeaderItem.configs.length; ++j) {
var _tempLineItem = _tempHeaderItem.configs[j];
var replacementsForLN = {
"%LNITEM0%": _nvl(_tempHeaderItem.host.replace('.me.com', '')),
"%LNITEM1%": _nvl(_tempLineItem.processID),
"%LNITEM2%": _nvl(_tempLineItem.status),
"%LNITEM3%": _nvl(_tempLineItem.javaVersion),
"%LNITEM4_1%": _nvl(_tempLineItem.Version),
"%LNITEM4_2%": _nvl(_tempLineItem.Build),
// "%LNITEM4_3%": _nvl(_tempLineItem.BuildDate),
"%LNITEM5%": _nvl(((_tempLineItem.ibsePort.length > 0) ? _tempLineItem.ibsePort : 'NA')),
"%LNITEM6%": _nvl(_tempHeaderItem.master),
"%LNITEM7%": _nvl('http://' + _tempHeaderItem.host + '/' + _tempLineItem.config + '&filter=on'),
"%LNITEM8%": _nvl('http://' + _tempHeaderItem.host + '/yes?configuration=' + _tempLineItem.config),
"%LNITEM9%": _nvl('http://' + _tempHeaderItem.host + '/yes?configuration%7D_' + _tempLineItem.config)
};
var _toolTipContentLineInstance = _toolTipContentLine.replace(/%\w+%/g, function (all) {
return replacementsForLN[all] || all;
});
if(_tempHostEnvironment == 'Prod'){
div.append(ulForProd.append("<li class='tooltip' data-title='" + _toolTipContentLineInstance + "'>" + _tempLineItem.config + "</li>"));
$('#tabLink').show();
$('.terminal .responseBody .tab-container[data-tab-index=0]').append(div.addClass('tracking-in-expand-fwd'));
}else{
div.append(ulForTest.append("<li class='tooltip' data-title='" + _toolTipContentLineInstance + "'>" + _tempLineItem.config + "</li>"));
$('#tabLink').show();
$('.terminal .responseBody .tab-container[data-tab-index=1]').append(div.addClass('tracking-in-expand-fwd'));
}
}
}
}
tippy('.tooltip', {
theme: 'custom',
content: function (reference) {
const htmlContent = reference.getAttribute('data-title');
return htmlContent;
},
interactive: true,
allowHTML: true,
multiple: true
});
popperOptions: { strategy: 'fixed' };
},
error: function (x, t, m) {
$('.terminal .responseBody').html("<p class='error fade-in-fwd'>Something went wrong at the server. Thats all I know! :-(</p>");
},
complete: function (x, t, m) {
$('.terminal .title').html('response pane');
$(".terminal .top").removeClass('color-change-5x');
}
});
return false;
}
the relevant CSS styling info
.tippy-box[data-theme~="custom"] span {
float: right;
}
.tippy-box[data-theme~="custom"] {
width: max-content;
}
Owing to the complexity of the application, I couldn't create a repro on a fiddle/etc. The first tooltip gets displayed well, while the nested does not get displayed.
result:
Any help would be much appreciated.
If the nested tooltip is invoked using data-tippy-content with html, the value gets displayed but the HTML gets displayed raw, meaning, HTML tags appear as-is.

Related

Enlarge a picture after clicking on it

I need to enlarge a picture when I click on it.
The problem is that I get this image in my javascript from my database and I don't know how I can do it to change the size of my picture after the click
Here is the js function that use data to create the picture
function loadSynthese(data) {
$.ajax({
cache: false,
url: "data/loadSynthese",
type: "POST",
async: true,
data: ({
dateid: data,
}),
success: function (response, status) {
response.forEach(element => {
css = "";
idonglet = element["id_onglet"];
idprio = element["id_prio"];
texte = element["texte"];
image = element["image_aide"];
if(image === '' || image === null || image === undefined){
htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '</label>';
} else {
img = '</br><img id="image'+ idprio + '" class="imageP" src="data:image/jpeg;base64,' + btoa(image) +'">';
htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '<p class="imageP" onclick="enlargeImg()">' +img+'</p></label>';
}
$("#" + idonglet + "ps").append(htmlPrio);
((nextid == idonglet) ? k++ : k = 1);
j++; i++;
((j < response.length - 1) ? nextid = response[i]['id_onglet'] : "");
});
}
},
error: function (response, status) {
}
});}
And here he function i want to add to change the size of the picture
function enlargeImg(img) {
img.style.width = "60%";
img.style.height = "auto";
img.style.transition = "width 0.5s ease";}
And When i click on the picture I have this issue :
"Uncaught TypeError: Cannot read properties of undefined (reading 'style')"
You can add or remove a css class some-name which has transform:scale(1.5) whereas your img has transition: 0.5s
img {
transition: 0.5s;
}
img:hover,
.some-class {
transform: scale(1.5)
}
<img src="https://picsum.photos/200" style="margin:40px">

Code block working in mozilla firefox but not in Chrome

Does anyone have any idea why this code block might work well in Mozilla Perfectly and not at all in Chrome? This code block is generating and presenting perfectly in Mozilla Firefox, but not at all in the Chrome search engine. This started when I placed some new code into the block starting at the x = -1 variable and below.
function displaySideBarLink( title, sectionname, anchorid) {
let sidebar;
if ($) {
sidebar = $('#page-layout #record-sidebar .w3-container.menu-links');
}
if (sidebar) {
// Create a link in the side bar navigation
let sidebar_link = document.createElement("a");
let section_title = title || sectionname;
if (section_title) {
sidebar_link.id = sectionname + "-sidebar";
sidebar_link.className = "w3-bar-item";
sidebar_link.href = '#' + anchorid;
sidebar_link.title = section_title;
sidebar_link.alt = section_title;
sidebar_link.innerText = section_title;
sidebar.append(sidebar_link);
}
}
x = -1
lastName = ""
$("#panels-region .panel-heading").each(function () {
x++
console.log($(this))
curName = $(this).attr("name")
$('<a id="panels-sidebar-' + curName.replace(/ |\//g, "_") + '" class="w3-bar-item" href="#panel-' + x + '-header" title="' + curName.replace(/ |\//g, "_") + '"> ' + curName + '</a>').insertAfter("#panels-sidebar" + lastName.replace(/ |\//g, "_"))
console.log($(this).attr("name"), lastName)
lastName = "-" + curName
})
lastName = ""
$("#graph-region .panel-heading h4").each(function () {
try {
x++
console.log($(this).text())
curName = $(this).text().replace("Collapse panelExpand panel", "")
$('<a id="tree_viewers-sidebar-' + curName.replace(/ |\//g, "_") + '" class="w3-bar-item" href="#panel-' + x + '-header" title="' + curName.replace(/ |\//g, "_") + '"> ' + curName + '</a>').insertAfter("#tree_viewers-sidebar" + lastName.replace(/ |\//g, "_"))
console.log($(this).attr("name"), lastName)
lastName = "-" + curName
} catch (e) {
}
})
$(".menu-links a").css("padding", "0px 8px")
$(".field-value").each(function () {
$(this).html($(this).text())
})
$("#tables-content td").each(function () {
$(this).html($(this).text())
})
$(".panel-body").css("background-color", "white")
$("#panels-region .panel-wrapper .panel-default").css("background-color", "white")
}
function getRecordUI( alias, type, id, viewtype, version ) {
// Get record model from Data Model Registry
if ( type ) {
getJSONUIModel( type,
function ( data ) {
displayRecordSections( alias, type, id, version, viewtype, data );
},
function (error) {
console.log("Error getting UI model for type " + type);
console.log(error);
displayRecordSections( alias, type, id, version, viewtype, null );
});
} else {
displayRecordSections( alias, type, id, version, viewtype, null );
}
let x = -1;
lastName = "";
$("#panels-region .panel-heading").each(function () {
x++
console.log($(this))
let curName = $(this).attr("name")
$('<a id="panels-sidebar-' + curName.replace(/ |\//g, "_") + '" class="w3-bar-item" href="#panel-' + x + '-header" title="' + curName.replace(/ |\//g, "_") + '"> ' + curName + '</a>').insertAfter("#panels-sidebar" + lastName.replace(/ |\//g, "_"))
console.log($(this).attr("name"), lastName)
lastName = "-" + curName
})
$("#graph-region .panel-heading h4").each(function () {
x++
let x = -1;
console.log($(this).text())
let curName = $(this).text().replace("Collapse panelExpand panel", "")
$('<a id="tree_viewers-sidebar-' + curName.replace(/ |\//g, "_") + '" class="w3-bar-item" href="#panel-' + x + '-header" title="' + curName.replace(/ |\//g, "_") + '"> ' + curName + '</a>').insertAfter("#tree_viewers-sidebar" + lastName.replace(/ |\//g, "_"))
console.log($(this).attr("name"), lastName)
lastName = "-" + curName
})
$(".menu-links a").css("padding", "0px 8px")
$(".panel-body").css("background-color", "white")
$("#panels-region .panel-wrapper .panel-default").css("background-color", "white")
}

How can I filter null or undefined values from an ajax call?

I'm trying to create a simple class directory for my kid's class. I have a Array of students in JSON format and wrote an AJAX call for the kids' names, and parents information. But some don't have two parents or two sets of contact information? I have tried "if (studentData !== null) {
show the data} but that doesn't work.
function showStudents() {
var currentURL = window.location.origin;
$.ajax({ url: currentURL + '/api/students', method: 'GET'})
.then(function(studentData) {
console.log("------------------------------------");
console.log("URL: " + currentURL + "/api/students");
console.log("------------------------------------");
// Here we then log the NYTData to console, where it will show up as an object.
console.log(studentData);
console.log("------------------------------------");
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
studentSection.addClass('card');
studentSection.attr('id', 'studentCard-' + i);
studentSection.attr('style', 'width:25rem');
$('#studentSection').append(studentSection);
$('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
$('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');
$('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + studentData[i].parent1 + ' & ' + studentData[i].parent2 +' </li>');
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
$('#studentCard-' + i ).append('</ul>');
$('#studentCard-' + i ).append('</div>');
}
});
}
It sounds like it's the parent1 or parent2 properties that might not exist, and the contact1 or contact2 properties that might not exist. It doesn't make sense to test if the entire response is null - just check those properties instead. For example:
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
studentSection.addClass('card');
studentSection.attr('id', 'studentCard-' + i);
studentSection.attr('style', 'width:25rem');
$('#studentSection').append(studentSection);
$('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
$('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');
// Start of changes
const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
$('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
if (studentData[i].contact1) {
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
}
if (studentData[i].contact2) {
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
}
// End of changes
$('#studentCard-' + i ).append('</ul>');
$('#studentCard-' + i ).append('</div>');
}
Your script structure could be improved too - unless each card's id is particularly important, it would make more sense to use a class instead of unique ids for every single element, or perhaps to leave it off entirely if you're only using it to select the newly created container. You already have a reference to the element you just created with studentSection, so just reference that variable again. You can also use method chaining to reduce your syntax noise:
CSS:
.card {
width: 25rem;
}
(that will keep you from having to manually set the width of each created element in your JS)
JS loop:
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
$('#studentSection').append(studentSection);
const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
studentSection.addClass('card')
.append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>')
.append('<ul class="list-group list-group-flush>')
.append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
if (studentData[i].contact1) {
studentSection.append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
}
if (studentData[i].contact2) {
studentSection.append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
}
studentSection.append('</ul>');
.append('</div>');
}
(Or, even better, use template literals instead)

If else statement into a variable

I am trying to insert the statement If else with a for condition into a variable. I don't really know how to handle it.
Here is my original function:
var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
chaine = families[familyName].map(function(variants) {
return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
})
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div><div class="btn-accordion"></div><div class="box-sub-fonts">'+ chaine.join('') +'</div>';
}).join('') + '</div>';
I'd like the chain to return when there are more than 1 variant in the font family. What I tried goes directly with else. Here is the code:
var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
if(families.length > 1){
chaine = families[familyName].map(function(variants) {
return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
})
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div><div class="btn-accordion"></div><div class="box-sub-fonts">'+ chaine.join('') +'</div>';
} else {
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div>';
}
}).join('') + '</div>';
This code access to the font family having 1 variant only.
for(var k in families) if(families[k].length === 1)

How do you pass json data from one page to another to reference the same row of data?

I am pulling address location information from a google spreadsheet and using it to create buttons. When you click on a button it then should open and populate the data for that location in a new page or if need into a dialog box.
How do you pass the information to a new page and complete the if statement? Everything works great if I manually add the entry.id.$t string in the last if statement.
$(document).ready(function () {
$(function FISLocations() {
$.getJSON("https://spreadsheets.google.com/feeds/list/GoogleSpreadsheetKey/od6/public/values? alt=json-in-script&callback=?",
function (data) {
$('.loc').append('<ul class="collapsibleList" id="list"><li><label for="mylist-node1" class="css_btn_classlist">Alabama</label><input type="checkbox" id="mylist-node1" /><ul class="loclist"></ul></li></ul>');
$.each(data.feed.entry, function (i, entry) {
var item = '<span style="display:none ">' + entry.id.$t + '</span>';
item += ' ' + entry.gsx$cityst.$t;
if (entry.gsx$state.$t == "AL") {
$('.loclist').append('<li>' + item + '</li>');
};
});
$('.poploc').append('<div class="items"></div>');
$.each(data.feed.entry, function (i, entry) {
var itemp = '<span style="display:none ">' + entry.id.$t + '</span>';
itemp += '' + entry.gsx$address1.$t + '<br/>';
itemp += ' ' + entry.gsx$city.$t + ', ';
itemp += ' ' + entry.gsx$state.$t;
itemp += ' ' + entry.gsx$postal.$t + '<br/>';
itemp += ' ' + entry.gsx$phone.$t + '<br/>';
itemp += ' ' + entry.gsx$fax.$t + '<br/>';
itemp += '<div class="px12bold"> ' + entry.gsx$email.$t + '<br/ ></div>';
itemp += '<div class="locmid"><br/><a ' + entry.gsx$androidloc.$t + 'class="css_btn_classsmall noselect">Map Us</a>';
itemp += ' Email Us ';
itemp += ' Call us </div>';
if (entry.id.$t == ? ? ? ? ? ? ) {
$('.items').append('<br>' + itemp + '</span><br/>');
};
});
});
});
});

Categories

Resources