JavaScript initialization has HTML block -- can I customize the HTML block by calling OTHER JavaScript functions - but have it render as a string?
How do I ensure that some JavaScript functions I wrote are invoked, such that they are rendered as "code" as part of another JavaScript function that wraps them?
The JavaScript code that is being invoked is a class that is essentially creating a custom block of HTML. I am trying to break this into smaller pieces. I want to call JavaScript functions that "emit" the HTML piece by piece:
let c1 = "Loan ID"; //this must be auto-generated
return generateColumn(c1) + `${data.LOANID}` + `</h5>\ ...`;generateColumn( ) looks like this:
function generateColumn(tempheader) {
`return <div><div class="row align-items-centers">\
<div class="col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">${tempheader}</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">`;
}So the content of the JavaScript function would then look like this:
$('#txtGlobalSearch').typeahead({
hint: true,
highlight: true,
minLength: 3
},
{
displayKey: 'display',
source: GlobalSearchData.ttAdapter(),
///TODO: - this "display:" property needs to be dynamic per section
display: [generateHeaderBasedOnType("Loan")],
templates: {
header: '<div class= "d-flex align-items-centers justify-content-between SearchlistTitle" data-SearchType="Loans"><div>Loans</div><div><span class="ResultCountText">721 Results</span><a href="#" class="text-CoreTwo LinkText">See All</a></div></div>',
empty: function () {
TotalEmptyDataset = TotalEmptyDataset + 1
},
suggestion: function (data) {
return '<div><div class="row align-items-centers">\
<div class= "col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">Loan Id</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">55644</h5>\
...
...
}Here is the entire GlobalSearch.js file as it now stands:
let TotalEmptyDataset = 0;
//debugger;
var GlobalSearchData = new Bloodhound({
//datumTokenizer is required. It is a function that transforms a datum into an array of string tokens
datumTokenizer: function (datum) {
///TODO: this must be auto-generated
var LoanID = Bloodhound.tokenizers.whitespace(datum.LOANID);
var BorrowerID = Bloodhound.tokenizers.whitespace(datum.BORROWERID);
var BorrowerName = Bloodhound.tokenizers.whitespace(datum.BORROWERNAME);
var LenderID = Bloodhound.tokenizers.whitespace(datum.LENDERID);
var LenderName = Bloodhound.tokenizers.whitespace(datum.LENDERNAME);
return BorrowerID.concat(LoanID).concat(BorrowerName).concat(LenderID).concat(LenderName);
},
//A function with the signature(query) that transforms a query into an array of string tokens.Required.
queryTokenizer: Bloodhound.tokenizers.whitespace,
//Can be a URL to a JSON file containing an array of data or, if more configurability is needed, a prefetch options hash.
prefetch: 'https://dxahl7cr0o273.cloudfront.net/clientstatic/lereta/taxadmin/json/search-loans.json',
// Can be a URL to fetch data from when the data provided by the internal search index is insufficient or, if more configurability is needed, a remote options hash.
remote: {
url: 'https://dxahl7cr0o273.cloudfront.net/clientstatic/lereta/taxadmin/json/queries/%QUERY.json',
wildcard: '%QUERY'
}
//local: [
// {LOANID: 'L45678733', BORROWERID: 'B353052', BORROWERNAME: 'Joseph Lewis', LENDERID: 'L93r12', LENDERNAME: 'Wells Fargo Bank'},
// {LOANID: 'L86583052', BORROWERID: 'B356686', BORROWERNAME: 'Lorie Lawson', LENDERID: 'L3754', LENDERNAME: 'Bank Of America'},
// {LOANID: 'L87333596', BORROWERID: 'B362467', BORROWERNAME: 'Gary Tomlinson', LENDERID: 'L4328', LENDERNAME: 'Wells Fargo Bank'}
//]
});
GlobalSearchData.initialize();
let c1 = 'Loan IDTom';
$('#txtGlobalSearch').typeahead({
hint: true,
highlight: true,
minLength: 3
},
{
displayKey: 'display',
source: GlobalSearchData.ttAdapter(),
///TODO: - this "display:" property needs to be dynamic per section
display: [generateHeaderBasedOnType("Loan")],
//display: ['LOANID', 'BORROWERID', 'BORROWERNAME', 'LENDERID', 'LENDERNAME'],
templates: {
header: '<div class= "d-flex align-items-centers justify-content-between SearchlistTitle" data-SearchType="Loans"><div>Loans</div><div><span class="ResultCountText">721 Results</span><a href="#" class="text-CoreTwo LinkText">See All</a></div></div>',
empty: function () {
TotalEmptyDataset = TotalEmptyDataset + 1
},
suggestion: function (data) {
//$('#GlobalSearchModal').removeClass('EmptyDataSearch');
//this must be auto-generated
return generateColumn(c1) + `${data.LOANID}` + `</h5>\
</div>\
</div>\
<div class="col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">Borrower Id</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">${data.BORROWERID}</h5>\
</div>\
</div>\
<div class="col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">Borrower Name</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.BORROWERNAME + '</h5>\
</div>\
</div>\
<div class="col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">Lender Id</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.LENDERID + '</h5>\
</div>\
</div>\
<div class="col-md-3">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">Lender Name</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.LENDERNAME + '</h5>\
</div>\
</div>\
<div class="col">\
<div class="d-flex justify-content-end align-items-center h-100 SearchActionContainer">\
<a href="b-0-accutax-payment-history.html"><span class="badgeGlobalSearchAction">Payment History</span></a>\
</div>\
</div>\
</div></div>`;
}
}
//WE NEED A WAY TO CUSTOM GENERATE THIS PER THE JSON FILE,
//NOT KNOWING BEFORHAND HOW MANY MAIN SECTIONS OR HOW MANY ROWS ARE RETURNED BACK
//THIS IS THE OLD WAY ... CREATING SECTION AFTER SECTION THAT VARIED
//VERY LITTLE EXCEPT FOR THE display:PROPERTY AND THE LabelTitles FOR EACH COLUMN
//},
//{
// displayKey: 'display',
// source: SearchCustomerData.ttAdapter(),
// display: ['CUSTOMERID', 'CUSTOMERNAME', 'CUSTOMERORGNAME'],
// templates: {
// header: '<div class= "d-flex align-items-centers justify-content-between SearchlistTitle" data-SearchType="Customers"><div>Customers</div><div><span class="ResultCountText">1,273 Results</span><a href="#" class="text-CoreTwo LinkText">See All</a></div></div>',
// empty: function () {
// TotalEmptyDataset = TotalEmptyDataset + 1
// },
// suggestion: function (data) {
// return '<div><div class="row align-items-centers">\
// <div class="col-md-2 pr-md-0">\
// <div class="DataColWrapper">\
// <p class="text-muted text-uppercase mb-0 LabelTitle">Customer Id</p>\
// <h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.CUSTOMERID + '</h5>\
// </div>\
// </div>\
// <div class="col-md-2 pl-md-0">\
// <div class="DataColWrapper">\
// <p class="text-muted text-uppercase mb-0 LabelTitle">Customer Name</p>\
// <h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.CUSTOMERNAME + '</h5>\
// </div>\
// </div>\
// <div class="col">\
// <div class="DataColWrapper">\
// <p class="text-muted text-uppercase mb-0 LabelTitle">Customer ORG. Name</p>\
// <h5 class="mb-1 text-CoreOne LabelValue MaxcharString">'+ data.CUSTOMERORGNAME + '</h5>\
// </div>\
// </div>\
// <div class="col">\
// <div class="d-flex justify-content-end align-items-center h-100 SearchActionContainer">\
// <a href=""><span class="badgeGlobalSearchAction">Customer Profile</span></a>\
// </div>\
// </div>\
// </div ></div>';
// }
// }
//},
}
).on('typeahead:render', function (ev, suggestion) {
$('.tt-dataset').hide();
$('.GlobalSearchModal').addClass('EmptyDataSearch');
$('.tt-menu').prepend('<div class="SearchingClass">Searching...</div>');
$('.SearchlistTitle .LinkText').attr('href', "");
$(".SearchlistTitle").each(function (index) {
var searchtype = $(this).attr('data-SearchType');
$(this).find('.LinkText').attr('href', "https://www.url.com?gsearchtype=" + searchtype + "&t=" + $('#txtGlobalSearch').val());
});
}).on('typeahead:asyncreceive', function (ev, suggestion) {
$('.GlobalSearchModal').removeClass('EmptyDataSearch');
$('.SearchingClass').remove();
$('.tt-dataset').show();
//If no result found
if ($('.tt-menu').hasClass('tt-empty')) {
$('.GlobalSearchModal').addClass('EmptyDataSearch');
$('.tt-menu').prepend('<div class="empty-message">No result found</div>');
$('.tt-menu').removeClass('tt-empty');
$('.tt-menu').css('display', 'block');
}
else {
$('.empty-message').remove();
$('.GlobalSearchModal').removeClass('EmptyDataSearch');
}
});
//Clickable row onclick handler
$('.SearchListHeader .tt-suggestion').click(function (e) {
e.stopPropagation();
alert("Search Result Click");
});
//Change modal backdrop colour
$('.GlobalSearchModal').on('show.bs.modal', function (e) {
$('body').addClass('DarkBackDrop');
});
$('.GlobalSearchModal').on('hidden.bs.modal', function (e) {
$('body').removeClass('DarkBackDrop');
});
$('#txtGlobalSearch').keyup(function () {
if (!$(this).val()) {
$('#GlobalSearchModal').addClass('HideData');
}
else {
$('#GlobalSearchModal').removeClass('HideData');
}
});
/*filter datat set*/
function FilterDataSet(selectedData) {
var filterDataOf = $(selectedData).attr('data-datasetIdx');
console.log(filterDataOf);
if ($(selectedData).hasClass('active')) {
$(selectedData).removeClass('active');
$('.tt-dataset-' + filterDataOf).hide();
if ($('.tt-dataset').is(':empty')) {
//If no result found
$('.tt-menu').prepend('<div class="empty-message">No result found</div>');
$('.tt-menu').removeClass('tt-empty');
$('.tt-menu').css('display', 'block');
}
else {
$('.empty-message').remove();
$('.GlobalSearchModal').removeClass('EmptyDataSearch');
}
}
else {
// $('.GSFilterMenu .dropdown-item').removeClass('active');
$(selectedData).addClass('active');
// $('.tt-dataset').hide();
$('.tt-dataset-' + filterDataOf).show();
if ($('.tt-dataset-' + filterDataOf).is(':empty')) {
//If no result found
$('.tt-menu').prepend('<div class="empty-message">No result found</div>');
$('.tt-menu').removeClass('tt-empty');
$('.tt-menu').css('display', 'block');
}
else {
$('.empty-message').remove();
$('.GlobalSearchModal').removeClass('EmptyDataSearch');
}
$('.tt-menu').css('display', 'block');
}
}
function ShowDefaultDataSet(selectedData) {
var filterDataOf = $(selectedData).attr('data-Sort');
console.log(filterDataOf);
if ($(selectedData).hasClass('active')) {
$(selectedData).removeClass('active');
$('.tt-dataset').show();
}
else {
// $('.GSFilterMenu .dropdown-item').removeClass('active');
$(selectedData).addClass('active');
$('.tt-dataset').hide();
$('.tt-dataset-1').show();
$('.tt-menu').css('display', 'block');
}
}
$('#txtGlobalSearch').focusout(function () {
if ($(this).val().length > 0) {
$('.tt-menu').addClass('d-block');
}
else { $('.tt-menu').RemoveClass('d-block'); }
});
function generateHeaderBasedOnType(temptype) {
if (temptype === "Loan") {
return `'LOANID', 'BORROWERID', 'BORROWERNAME', 'LENDERID', 'LENDERNAME'`;
}
}
function generateColumn(tempheader) {
`return <div><div class="row align-items-centers">\
<div class="col">\
<div class="DataColWrapper">\
<p class="text-muted text-uppercase mb-0 LabelTitle">${tempheader}</p>\
<h5 class="mb-1 text-CoreOne LabelValue MaxcharString">`;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.