Identify and trigger event(s) on a "dropdown/selector" - javascript

I'm primarily a BI report developer and a complete JS/JQuery novice. I have a requirement to default one of the "dropdown/selector" values when the page loads. Unfortunately, there is no out of the box functionality that can set a default value in the tool (Microstrategy) that I am using.
Thus far, I have been able to default the text. However, there are events that are tied to values in the "dropdown/selector" that will refresh the other page elements. I have been unable to identify or trigger any event that will refresh these other page elements.
HTML snippet of the "dropdown/selector":
<div id="*lW97AC0343C8A843F7803C7F5C3705A2C7*kW03B8BE5F89014A668C84F3702E0B0B73*x1*t1587427161911" k="W03B8BE5F89014A668C84F3702E0B0B73" class="mstrmojo-DocSelector vi-DocSelector" nm="YearMonth (PSPI)" title="" style="vertical-align: top; text-align: left; color: rgb(0, 0, 0); font: bold 9pt Arial; display: block; height: 35px; width: 223px;">
<div class="filter" style="display: none;" />
<div class="wait" style="display:none;z-index:100;position:absolute;top:0;left:0;width:100%;height:100%" />
<div class="content" style="overflow-x: hidden; height: 35px; width: 223px;">
<div id="mstr559" style="text-align: left; font: bold 9pt Arial; color: rgb(0, 0, 0); display: block; height: 35px; width: 223px;" class="mstrmojo-ui-Pulldown mstrmojo-ui-SearchablePulldown" onmousedown="mstrmojo.dom.captureDomEvent('mstr559','mousedown', self, event)" onclick="mstrmojo.dom.captureDomEvent('mstr559','click', self, event)">
<div class="mstrmojo-ui-Pulldown-text hasEditableText" title="" style="">201911</div>
<div class="container">
<div id="mstr560" class="mstrmojo-PopupList ctrl-popup-list mstrmojo-scrollbar-host" style="display: none;" tabindex="-1" onclick="mstrmojo.dom.captureDomEvent('mstr560','click', self, event)" ondblclick="mstrmojo.dom.captureDomEvent('mstr560','dblclick', self, event)" onmouseover="mstrmojo.dom.captureDomEvent('mstr560','mouseover', self, event)" onmouseout="mstrmojo.dom.captureDomEvent('mstr560','mouseout', self, event)" oncontextmenu="mstrmojo.dom.captureDomEvent('mstr560','contextmenu', self, event)" onkeydown="mstrmojo.dom.captureDomEvent('mstr560','keydown', self, event)">
<div class="mstrmojo-popupList-scrollBar mstrmojo-scrollNode" style="overflow: hidden;">
<div class="" style="">
<div class="item " idx="0" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202003
</div>
<div class="item " idx="1" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202002
</div>
<div class="item " idx="2" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202001
</div>
<div class="item " idx="3" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201912
</div>
<div class="item " idx="4" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201911
</div>
<div class="item selected" idx="5" style="font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201910
</div>
<div class="item " idx="6" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201909
</div>
<div class="item " idx="7" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201908
</div>
<div class="item " idx="8" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201907
</div>
<div class="item " idx="9" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201906
</div>
<div class="item " idx="10" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201905
</div>
<div class="item " idx="11" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201904
</div>
</div>
</div>
<div class="mstrmojo-scrolltrack vertical">
<div class="mstrmojo-scrollbar vertical" />
</div>
<div class="mstrmojo-scrolltrack horizontal">
<div class="mstrmojo-scrollbar horizontal" />
</div>
</div>
</div>
</div>
</div>
</div>
My /JQuery script:
<script>
var script = document.createElement('script');
script.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js";
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function(){
// works
$("div[k='W03B8BE5F89014A668C84F3702E0B0B73'] .mstrmojo-ui-Pulldown-text").text('201911');
// works
// $('div[k="W03B8BE5F89014A668C84F3702E0B0B73"] div[idx="0"]').addClass('selected');
// does not work
$('#mstr599.mstrmojo-ui-Pulldown.mstrmojo-ui-SearchablePulldown').trigger('onmousedown');
$('#mstr599.mstrmojo-ui-Pulldown.mstrmojo-ui-SearchablePulldown').trigger('onclick');
// there are 2 other events associated with the mstr599 element: mouseout and mouseover
});
</script>
What I am missing or doing wrong here?

Related

Get array of html elements [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have some HTML that has the same section repeated a few times, I am trying to get the array of sections to print out in console.log in the JavaScript bellow.
I cant see where I have gone wrong and I get a console error on click of close of
wrapper.getElementsByClassName is not a function
Can anyone help me get this cosole.log to print the amount of arrays please.
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function () {
var wrapper = document.getElementsByClassName('sectorpage-strengths');
var div = wrapper.getElementsByClassName('container');
var section = [];
for (i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>

wrapper is a collection in your code.
Instead of
var wrapper = document.getElementsByClassName('sectorpage-strengths');
Try
var wrapper = document.getElementById('sectorpage-strengths');
Also your i variable is not defined, So instead of
for (i = 0; i < div.length; i++) { // ...
Try
for (var i = 0; i < div.length; i++) { // ...

When you are using jquery you can use jquery class selector, If you want to use document.getElementsByClass you need to get the element by passing index. Also you will like to push values in the section array ike this
section.push(div[i].find('.sectorpage-strengths-list'));
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function() {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (let i = 0; i < div.length; i++) {
section.push(div[i].find('.sectorpage-strengths-list'));
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>

Get correct HTML array number

I have a few HTML elements that are the same, just different text.
On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.
However I get
[HTMLCollection(1)]
printed twice no matter what show less html section I click on.
Is there a reason for this? and how to fix it.
Objective
I want to get the current element array number so I can scroll to the top of the dynamic array number so I can have many HTML elements and the click scroll top event would only scroll to the top of its own section.
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function () {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (var i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
});
};

How to replace string to tag HTML

i Have problem for replace one or more word on my string to tag HTML using jquery
The problem is when i run the code, if i have two word or more with <b> in 1 string, just the first word replace to <b>
Here my Snippet :
$('.ibox-comment').find('.social-comment').find('#comment').each(function() {
var $this = $(this);
var t = $this.text();
$this.html(t.replace('<b>', '<b>').replace('</b>', '</b>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ibox-comment">
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="129">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;Justin Williams&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">4 hours ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 18:52</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="130">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Jim Yarbrough&lt;/b&gt; kesini aja &lt;b&gt;jules ferry&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">4 hours ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 18:59</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="131">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Jim Yarbrough&lt;/b&gt; &lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;sdfsdf sdfsdf&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">7 minutes ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 22:23</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
</div>

A quick solution would be to use parseFromString from DOMParser. Like this:
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
And in your code:
$('.ibox-comment').find('.social-comment').find('#comment').each(function() {
var $this = $(this);
var t = $this.text();
console.log(t);
console.log(htmlDecode(t));
});
See this also. Cheers!

Try this :
$this.html(t.replace(/<b>/g, '<b>').replace(/<b>/g, '</b>'));

Shortening Div Code

I have a project here that looks pretty good and does exactly what I want it to do. The codepen is here. What I need to find out is if these divs that flip:
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')"></span>
</div>
</div>
</div>
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper2">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
</div>
</div>
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper3">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')"></span>
</div>
</div>
</div>
Can be shortened in any way. It seems bulky and too "brute force method". The solution would preferably be in HTML, but JS would not be a problem. Thanks.

Any lightweight JS template engine will do for your use case. Check out this reference for examples:
https://www.sitepoint.com/overview-javascript-templating-engines/
Basically what you do is declare a template once, and apply Javascript variables through interpolation on a template instance.
Example of what such a template could look like:
<div class="flip-container" id="{{ id }}">
<div class="flipper" id="flipper2">
<div class="front" id="front">
<img src="{{ img }}"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
</div>
</div>

Kendo UI not scrolling up

I am developing and app Using Telerik using Cordova and Kendo UI.
I am having the problem that if I scroll down in a div an then switched to div using a simple display:none on the current scrolled div and a display:block to the new div I want to see that the whole app stays scrolled down and I am having no option for scrolling up I have just got a empty screen.
Here the code I am using:
<body onload="onDeviceReady();logint();">
<div id="tabstrip-home"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div id="startupForm" data-role="view" style="display:block;">
<img id="startup" class="startup" src="styles/images/startup.jpg"/>
<input id="closeStartButton" onclick="closeStart();" type="image" src="styles/images/vor.png" name="image" width="40" height="40" style="bottom:0;position:fixed;right:0;">
</div>
<div class="logo-image" id="top" name="top"></div>
<div id="home" data-role="scroller" style="display:none;">
<div id="homeOverview" style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 style="padding-top:5px;">Angemeldet als: <span id="user"></span></h3>
<div id="statsNr" style="display:none;">
<h3 >Zählwerke gesamt: <span id="zaehler"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasst"></span></h3>
</div>
</div>
<div id="auftragGeladenUndDa">
<div style="margin-left:10px;">
<button data-role="button" data-bind="click: showTermine" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Termine
</button>
<button data-role="button" data-bind="click: schhin" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Schlüsselliste
</button>
<button data-role="button" data-bind="click: showStats" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Statistik
</button>
<button data-role="button" onclick="test();" data-bind="click: showAbles" style="height: 50px;width: 61%; padding-top: 0.75em; text-align: center;">
Erfassen
</button>
<button id="homeErfass" data-bind="click: showUpload" data-role="button" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Ergebnisse übermitteln
</button>
</div>
</div>
<div id="auftragNichtDa">
<button id="auftrag" onclick="kAuftragLaden();" data-bind="click: geladen" data-role="button" style="width: 90%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Neuen Auftrag laden
</button>
</div>
</div>
<div id="hinweiseForm" style="display:none;">
<h3 id="row" style="color:black;">Hinweis und Schlüsselliste</h3>
<table id="hinweis" border="0" style="z-index: 1;background-color:white;margin-left: 10px;margin-right: 10px;margin-bottom:5%;">
<tr>
</tr>
</table>
</div>
<div id="terminForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Termine</h3>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<p>Keine Termine vorhanden</p>
</div>
</div>
<div id="uploadForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Ergebnisse übermitteln</h3>
<div id="uploadEinheit" style="background-color: rgba(255,255,255,0.5);padding-top:5px;padding-bottom:3px;margin-bottom:3px;margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<input id="theCheckbox" type="checkbox">
</div>
</div>
<div id="statsForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 id="row" style="padding-top:5px;">Statistik</h3>
<h3 >Zählwerke gesamt: <span id="zaehlerin"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasstin"></span></h3>
</div>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 10px;">
<ul data-role="listview" data-style="inset" >
<li><div style="color:black;">Ort:</div>
<label>
<select style="color:black;" onchange="onchangeOrt();" id="statOrt"></select>
</label>
</li>
</ul>
<ul data-role="listview" data-style="inset" >
<li>
<div style="color:black;">Strasse</div>
<label>
<select style="color:black;" onchange="onchangeStrasse();" id="statOrt"></select>
</label>
</li>
</ul>
</div>
<div id="savedStrasse"></div>
</div>
<div id="ablesForm" style="display:none;" >
<ul data-role="listview" data-style="inset">
<h3 id="row" style="color:black;margin-bottom: 0;margin-top: 0;">Orte</h3>
<li>
<input id="stift" type="image" src="styles/images/erfassen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/suchen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/foto.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/karte.png" name="image" width="40" height="40" style="">
</li>
<li>
<select id="recog" onchange="changeFunc();" style="color:black;left: 0;width: 200px;"> </select>
<select id="2tab" onchange="changeAnz2();" style="margin-right:60px;color:black"><option value="1">K</option><option value="2">Z</option></select>
<select id="alleOffen" onchange="changeAnz2();" style="color:black;"><option value="1">Alle</option><option value="2">Offen</option></select>
</li>
</ul>
<div id="all1" style="font-size: 18pt;height:95%;background-color:white;margin-top: 0;margin-left:25px;margin-right:25px;box-shadow: 3px 3px 20px black;"></div>
<div id="all2" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all3" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all4" style="font-size: 18pt;height:95%;display:none;"></div>
</div>
<div id="erfassForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 1px;">
<h3 style="color:black;display:none;" id="erfassName"></h3>
<h3 style="color:black;" id="erfassNameAnz"></h3>
<h3 style="color:black;display:none;"id="zaehlerNr"></h3>
<h3 style="color:black;"id="adresse"></h3>
<h3 style="color:black;display:none;"id="erfassStrasse"></h3>
<h3 style="color:black;display:none;"id="erfassHausnr"></h3>
<h3 style="color:black;display:none;"id="zpunktID"></h3>
<h3 style="color:black;display:none;"id="zaehlerID"></h3>
<h3 style="color:black;display:none;" id="ablEin"></h3>
<h3 style="color:black;display:none;" id="gerNR"></h3>
<h3 style="color:black;display:none;" id="AbleserNR"></h3>
<h3 style="color:black;"id="standMin" ></h3>
<h3 style="color:black;"id="standMax" ></h3>
<h3 style="color:black;display:none;" id="plasib"></h3>
<h3 style="color:black;display:none;" id="rebuild"></h3>
<select id="alleOrte" style="color:black;width: 45%;"></select>
<select id="alleAbleser" style="color:black;width: 45%; margin-left:20px;"></select>
<h3 style="color:black;margin-bottom: 0;">Zustandsmeldung</h3>
<select id="alleFehler" style="color:black;"></select>
<h3 style="color:black;margin-bottom: 0;">Aktueller Zählerstand</h3>
<input id="stand" type="stand" style="margin-left: 10px;"/>
<button data-click="reset" onclick="erfassenZae();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Erfassen
</button>
</div>
<br><br><br><br><br><br>
<div class="result-area ch50">
<div class="results">
<img style="display:none;margin:5px auto; width:120px; height:120px;" id="smallImage"/>
</div>
<div class="separator"></div>
</div>
</div>
<div id="settings" style="display:none;" >
<div id="adminMS" style="color:black;display:none;">Kennwort
<input id="adminPass" style="text-align:right;width: 150px;color: black;"/>
</div>
<div id="server" style="color:black;">
<p>Sie müssen beim ersten Start einen Server einrichten. Bitte machen Sie dies jetzt!</p>
<p id="infofield"></p>
<p id="os"></p>
<p id="version">2.0.0.6</p>
<div style="display:inline">
<p>Serveradresse:</p>
<input type="text" id="eingabe" style="width: 80%; margin-left: 5px;"/><br>
<button onclick="serverSpeichern();" id="serverTres" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Speichern</button>
</div>
<p>Qualitätsstufe (in Prozent) <input type="text" id="qalID" style="width: 100px; margin-left: 5px;"/><br></p>
<button id="settingsCloseButton" onclick="closet();logint();qalSpeichern();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Ok</button>
</div>
<button id="adminButton" onclick="showServer();" data-role="button" style="display:none;width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Anmelden</button>
</div>
<form data-bind="events: { keyup: checkEnter }" id="logForm" style="background-color: white; padding-top: 1px;margin-left: 10px;margin-right: 10px;height:95%;box-shadow: 3px 3px black;">
<h3 data-bind="invisible: isLoggedIn" style="color:black;font-size:16pt;">Benutzeranmeldung</h3>
<ul data-role="listview" data-style="inset">
<li>
<div style="color:black;margin-left:5px;">Geräte gesamt:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li style="top:0;margin-left:5px;">
<div style="color:black;">Geräte abgelesen:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li><div style="color:black;margin-left:5px;height: 40px;">Ableser</div>
<label>
<select style="width: 30%;border: 1px solid gray;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" onchange="onchangeLogin();" id="Model" type="number" data-bind="value: username"> </select>
</label>
</li>
<li>
<div style="color:black;margin-left:5px;margin-top: 5px;">Kennwort</div>
<label>
<input id="passInput" onkeyup="disableButton();" onclick="cleart();" style="text-align:right;width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" type="password" data-bind="value: password"/>
</label>
</li><br>
<li><button id="login" type="submit" data-role="button" data-bind="click: onLogin" value="Login" class="login-button" style="-webkit-border-radius: 5px;background-color: rgba(200,200,200,1.0);box-shadow: 3px 3px black;color:black;float:right;width:30%;">weiter</button></li>
</ul>
<!--<button onclick="settings();serverAnzeigen();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Einstellungen</button>
--><br>
</form>
</div>
<input onclick="openStart();" type="image" src="styles/images/zurueck.png" style="display:none;"name="image" width="40" height="40">
<div data-role="layout" data-id="tabstrip-layout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer" >
<div id="footert" style="width: 100%;display:none;">
<input id="closeButton" onclick="showHome();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="closeHome" onclick="logout();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="uploadButton" onclick="uploadAll();" type="image" src="styles/images/uebermitteln.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
<!--<button id="closeButton" onclick="showHome();" data-click="reset" data-role="button" style="width: 40%; text-align: center;display:none;">Schließen</button>
<button id="erfassButton" data-click="reset" data-bind="click: showErfass" data-role="button" style="display:none; width: 40%; text-align: center;">Ablesen</button>
-->
<input id="settingsButton" onclick="settingsH();" type="image" src="styles/images/einstellungen.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
</div>
</div>
</div>
</body>
</html>
No I am for exmaple scrolling down in the div named hinweiseForm and then going back using the following function:
function showHome(){
document.getElementById("ablesForm").setAttribute("style","display:none;");
document.getElementById("hinweiseForm").setAttribute("style","display:none;");
document.getElementById("statsForm").setAttribute("style","display:none;");
document.getElementById("home").setAttribute("style","display:block;");
document.getElementById("erfassForm").setAttribute("style","display:none;");
document.getElementById("uploadForm").setAttribute("style","display:none;");
document.getElementById("terminForm").setAttribute("style","display:none;");
document.getElementById("closeHome").setAttribute("style","display:block;"); document.getElementById("footert").setAttribute("style","position:fixed;bottom:0px;width: 100%;display:block;");
document.getElementById("plasib").innerHTML="";
document.getElementById("closeButton").setAttribute("style","display:none;bottom:0;postion:fixed;");
document.getElementById("uploadButton").setAttribute("style","display:none;");
document.getElementById("settingsButton").setAttribute("style","display:block;bottom:0;margin-left:50px;position:fixed;");
document.getElementById("settings").setAttribute("style","display:none");
//$("#home").data("kendoMobileScroller").reset();
//new kendo.mobile.Application();
//app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" });
}
I already tried some things like the reset function but either I am not using it right or I need to do it another way. It would be really awesome if you can help me.
Thanks in advance

I use the scrollTo method to scroll to the top of my views.
app.application = new kendo.mobile.Application(document.body, {
layout: "tabstrip-layout"
});
// get the view scroller
var scroller = app.application.view().scroller;
/*
* scroller.scrollTop = The number of pixels that are hidden from view above the
* scrollable area.
*/
if (scroller.scrollTop) {
scroller.scrollTo(0, 0);
}

Categories