var test = "";
for (var i = 0; i < controlResponse.classifications.length; i++) {
test+='<div role="option" aria-checked="false" class="select item" style="pointer-events: all;"><span class="text">' + controlResponse.classifications[i].name + ' </span></div>';
}
for (var i = 0; i < controlResponse.fileList.length; i++) {
var htmlCode='<div class="row"> '+
' <div class= "ten wide computer sixteen wide mobile ten wide tablet column"> '+
' <h5 class="ui header"> '+
' <i aria-hidden="true" class="file word outline large icon fa-fw"></i> '+
' <div class="content">outlook_testler.docx</div> '+
' </h5> '+
' </div > <div class="six wide computer sixteen wide mobile six wide tablet column"> '+
' <div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0" style="float: right;"> '+
' <div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div><i aria-hidden="true" class="dropdown icon"></i> '+
' <div class="menu transition classifications"> ' +
+test+
' </div> ' +
' </div> '+
' </div> '+
' </div>';
$("#classificationModalList").append(htmlCode);
}
When I add html code to the variable, it shows as NaN.
I add select item html codes to test variable then I added test variable inside htmlCode variable
then I added test variable inside htmlCode variable
Instead of joining all the strings using + and ' you can use Template literals. Here I combined it with Array.prototype.map() – that is more readable too.
/* test data */
const controlResponse = {};
controlResponse.classifications = [{name:'class01'},{name:'class02'}];
controlResponse.fileList = ['file01', 'file02'];
var test = controlResponse.classifications.map(classification => {
return `<div role="option" aria-checked="false" class="select item" style="pointer-events: all;">
<span class="text">${classification.name}</span>
</div>`;
}).join('');
var htmlCode = controlResponse.fileList.map(file => {
return `<div class="row">
<div class="ten wide computer sixteen wide mobile ten wide tablet column">
<h5 class="ui header">
<i aria-hidden="true" class="file word outline large icon fa-fw"></i>
<div class="content">outlook_testler.docx</div>
</h5>
</div>
<div class="six wide computer sixteen wide mobile six wide tablet column">
<div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0" style="float: right;">
<div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div>
<i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition classifications">${test}</div>
</div>
</div>
</div>`;
}).join('');
$("#classificationModalList").append(htmlCode);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="classificationModalList"></div>
Related
I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('Number of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector('#current').textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* input[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">Foreword</div>
<div class="col"><span></span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Foreword</div>
<div class="col timeline-type__title">Foreword</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand this
item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">Title A</div>
<div class="col"><span>SUMMARY</span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">A</div>
<div class="col timeline-type__title">Summary</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li><a href="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - Cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.
I am new to javascript and I am trying to create a nested row that gets viewed when clicked using accordion. I have written javascript to dynamically expand the rows and it is not expanding at all. out of blue it once did and only the first element got expanded, I made few changes in my code then again none of them is expanding now, please help me out.
function mainfunction(challenges,targets) {
console.log(challenges)
var table = document.getElementById('challenge_table_tree')
for (i in challenges) {
table.innerHTML += '<div class="row accordion-toggle" data-toggle="collapse" data-target="#'+challenges[i].id +'">' +
'<div class="col">'+ challenges[i].name+'</div>' +
'<div class="col">'+ challenges[i].id+'</div>' +
'</div>' +
'<div class="accordion-body collapse" id="'+challenges[i].id+'"></div>'
for(j in targets) {
var hidden_data = document.getElementById(challenges[i].id)
if(targets[j].challenge_id==challenges[i].id) {
console.log('here')
hidden_data.innerHTML += '<div class="row">' +
'<div class="col">'+targets[j].id+'</div>' +
'<div class="col">'+targets[j].name+'</div>' +
'<div class="col">'+targets[j].parent_id+'</div>' +
'</div>'
}
}
}
}
The Html it generates is
<div class="form-group" id="challenge_table_tree">
<div class="row accordion-toggle" data-toggle="collapse" data-target="#8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="col">Adersh Ganesh</div>
<div class="col">8a263b72-7e61-487a-b756-f7744c9dc623</div>
</div>
<div class="accordion-body collapse" id="8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="row">
<div class="col">4df41507-8c7d-48a8-8cc7-66094dd58844</div>
<div class="col">undefined</div>
<div class="col">null</div>
</div>
</div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#905bd9a2-d47a-4269-9fae-03c6daa46c16">
<div class="col">Adersh</div>
<div class="col">905bd9a2-d47a-4269-9fae-03c6daa46c16</div>
</div>
<div class="accordion-body collapse" id="905bd9a2-d47a-4269-9fae-03c6daa46c16"></div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#7abc296e-9347-405d-9d19-4bea7b29651c">
<div class="col">aaaaa</div>
<div class="col">7abc296e-9347-405d-9d19-4bea7b29651c</div>
</div>
<div class="accordion-body collapse" id="7abc296e-9347-405d-9d19-4bea7b29651c"></div>
</div>
I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle
I was wondering how I could insert glyphicon glyphicon-transfer in a suitable size which fits the currency converter program above the text "From currency: To currency:" and when the user clicks on the "glyphicon" the drop down menu currency type "From currency" and "To currency" would switch drop down menu.
Here is an example, I wanted to convert the amount £5 from GBP to Euros and I clicked on if I clicked on the glyphicon the drop down menu would switch to Euros to GBP.
In order to implement the glyphicon, I was used the code below. However, I couldn't get the icon in the currency converter in the correct place and please note I'm making a responsive site using bootstrap.
<div class="col-sm-4">
<span class="glyphicon glyphicon-transfer logo-small"></span>
</div>
Codepen
javascript code
// Fetch exchange rate data from api
$.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
var currencies = [];
$.each(data.rates, function(currency, rate) {
// Currency options dropdown menu
currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
});
$(".currency-list").append(currencies);
})
//Calculate and output the new amount
function exchangeCurrency() {
var amount = $(".amount").val();
var rateFrom = $(".currency-list")[0].value;
var rateTo = $(".currency-list")[1].value;
if ((amount - 0) != amount || (''+amount).trim().length == 0) {
$(".results").html("0");
$(".error").show()
} else {
$(".error").hide()
if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
$(".results").html("0");
} else {
$(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
}
}
}
Just to finalise, I'm looking for some help on inserting glyphicon glyphicon-transferabove the text stated above in my currency converter program.
In addition, I was wondering when the user clicks on the icon how the drop down menu currency type would switch. Example is above.
I add a new row that hold both glyphicon and from and to.
<div class="row">
<div class="col-sm-12" style="text-align: center">
<span style="color: #FFF" class="glyphicon glyphicon-transfer logo-small"></span>
</div>
<div class="form-group inline-block">
<label for="">From currency:</label>
<select class="currency-list form-control from" onclick="exchangeCurrency()">
<option>--Select--</option>
</select>
</div>
<div class="form-group inline-block">
<label>To currency:</label>
<select class="currency-list form-control to" onclick="exchangeCurrency()">
<option>--Select--</option>
</select>
</div>
</div>
and added click event on the .logo-small to swap the values and calculate currency.
$('.logo-small').on('click', function () {
var toValue = $('.to').find(':selected').val();
var toText = $('.to').find(':selected').text();
var fromValue = $('.from').find(':selected').val();
var fromText = $('.from').find(':selected').text();
$('.from').find(':selected').val(toValue);
$('.from').find(':selected').text(toText);
$('.to').find(':selected').val(fromValue);
$('.to').find(':selected').text(fromText);
exchangeCurrency();
})
Add new class to your select to and from
<select class="currency-list form-control from" onclick="exchangeCurrency()">
and
<select class="currency-list form-control to" onclick="exchangeCurrency()">
// Fetch exchange rate data from api
$.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
var currencies = [];
$.each(data.rates, function(currency, rate) {
// Currency options dropdown menu
currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
});
$(".currency-list").append(currencies);
})
//Calculate and output the new amount
function exchangeCurrency() {
var amount = $(".amount").val();
var rateFrom = $(".currency-list")[0].value;
var rateTo = $(".currency-list")[1].value;
if ((amount - 0) != amount || (''+amount).trim().length == 0) {
$(".results").html("0");
$(".error").show()
} else {
$(".error").hide()
if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
$(".results").html("0");
} else {
$(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
}
}
}
$('.logo-small').on('click', function () {
var toValue = $('.to').find(':selected').val();
var toText = $('.to').find(':selected').text();
var fromValue = $('.from').find(':selected').val();
var fromText = $('.from').find(':selected').text();
$('.from').find(':selected').val(toValue);
$('.from').find(':selected').text(toText);
$('.to').find(':selected').val(fromValue);
$('.to').find(':selected').text(fromText);
exchangeCurrency();
})
html {
font-size: 20px;
}
.panel {
background: #333333;
border: solid white;
}
.results {
font-size: 1em;
}
.dropdown {
margin-bottom: 50px;
}
.inline-block {
display: inline-block;
}
.center {
width: 90%;
margin: 0 auto 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<!-- <script src="program.js"></script> missing-->
<!-- Navigation Bar -->
<nav class="menu navbar-default navbar-menu">
<div class="container">
<div class="menu-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Currency Converter Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Currency Converter Program</li>
</ul>
</div>
</div>
</nav>
<!-- End of navbar-->
<br>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary text-center">
<div class="panel-heading">
<h4 class="panel-title">Currency Converter</h4>
</div>
<div class="error">
Please enter numeric value
</div>
<div class="panel-body">
<form class="form-vertical">
<div class="form-group center">
<label for="">Enter Value:</label>
<input type="number" class="amount form-control" placeholder="Enter value" min="1">
</div>
<div class="row">
<div class="col-sm-12" style="text-align: center">
<span class="glyphicon glyphicon-transfer logo-small"></span>
</div>
<div class="form-group inline-block">
<label for="">From currency:</label>
<select class="currency-list form-control from" onclick="exchangeCurrency()">
<option>--Select--</option>
</select>
</div>
<div class="form-group inline-block">
<label>To currency:</label>
<select class="currency-list form-control to" onclick="exchangeCurrency()">
<option>--Select--</option>
</select>
</div>
</div>
</form>
<p class="results">0</p>
</div>
</div>
</div>
</div>
</div>
<!-- Money pics -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2016/11/30/u-k-s-first-ever-plastic-5-bill-has-really-upset-vegans/_jcr_content/par/featured_image/media-0.img.jpg/876/493/1480522867287.jpg" target="_blank">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2016/11/30/u-k-s-first-ever-plastic-5-bill-has-really-upset-vegans/_jcr_content/par/featured_image/media-0.img.jpg/876/493/1480522867287.jpg" alt="Pic1" style="width:100%">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="https://w-dog.net/wallpapers/12/1/458166855232810/money-euro-euro-currency-notes-close-up.jpg" target="_blank">
<img src="https://w-dog.net/wallpapers/12/1/458166855232810/money-euro-euro-currency-notes-close-up.jpg" alt="Pic2" style="width:100%">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="https://cdn.shutterstock.com/shutterstock/videos/7477096/thumb/9.jpg" target="_blank">
<img src="https://cdn.shutterstock.com/shutterstock/videos/7477096/thumb/9.jpg" alt="Pic3" style="width:100%">
</div>
</a>
</div>
</div>
</div>
<!-- End of money pics -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="text-center">© Liam Docherty All Rights Reserved | Portfolio - http://liam-portfolio.surge.sh</p>
</div>
</div>
So, I'm doing a database select and bringing all the fields from a table in divs like this:
<div class="card hoverable reserva">
<div class="card-content">
<div class="cod-reserva-lbl teal-text text-lighten-2">Reservation number.</div>
<div class="reservation-code teal-text">00000000</div>
<div class="reservation-item">
<b>Car's licence plate:</b> <span class="dato">AAA-000</span>
</div>
<div class="reservation-item">
<b>Person's ID:</b> <span class="dato">00000000</span>
</div>
<div class="reservation-item">
<b>Departure:</b> <span class="dato">dd/mm/yyyy</span>
</div>
<div class="reserva-item">
<b>Arrival:</b> <span class="dato">dd/mm/yyyy</span>
</div>
<div class="reservation-item">
<b>Starting city:</b> <span class="dato">Some city</span>
</div>
<div class="reservation-item">
<b>Destination city:</b> <span class="dato">Some other city</span>
</div>
<div class="reservation-item">
<b>Price:</b> <span class="green-text dato">$XXXXXX</span>
</div>
</div>
<div class="card-action card-action-reservation">
<a href="#" class="green-text flat-small waves-effect waves-green">
<i class="left material-icons">mode_edit</i> Edit
</a>
<a href="#" class="red-text flat-small waves-effect waves-red">
<i class="left material-icons">delete</i> Delete
</a>
</div>
</div>
The script I'm currently using goes like this:
//Search filter
var $rows = $('.reservation');
//#search is the input I'm using as search bar
$('#search').keyup(function () {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
The problem is, if I search for "Reservation number", it will still show all of them because all of them contain "Reservation number". What I want is to be able to filter exclusively for the text inside the span.dato items. How can I achieve this?