We Keep Coding

How to make a dropdown show values from top instead of where I left it?

On my web form application, I have shown a dashboard with six boxes each with a separate dropdown showing values from a database table. This is for my user's ease of accessibility as they will choose approximately six menu items which they visit most frequently. The dropdown is working fine and show the selected menu items appropriately.
However, the problem is that none of the dropdown show values afresh as it must be. Because once a value is selected from it or just the mouse is scrolled down on it without making any selection, it remember that position. Now when that first dropdwon is revisited again either after selecting a value from another dropdown or just scrolling down the mouse on that another dropdown, the position of the first dropdown remain exactly where it was left before.
I want each and every dropdown to show values from its top and not where user left it before. The code is available here.
//
//
//Menu items are taken from database
if (obj.data.length > 0) {
var lielm = '';
var AccountantHeader = false;
var ReportHeader = false;
var OtherHeader = false;
var accountantItems = [];
var reportsItems = [];
var otherItems = [];
$.each(obj.data, function (i, m) {
if (m.Menu_Item_Name == 'Report Financial' || m.Menu_Item_Name == 'Cover Sheet' || m.Menu_Item_Name == 'Letters' || m.Menu_Item_Name == 'Invites')
{
accountantsItems.push(m);
}
else if (m.Menu_Item_Name == 'Income Statement' || m.Menu_Item_Name == 'Balance' || m.Menu_Item_Name == 'Income' || m.Menu_Item_Name == 'Ledger')
{
reportsItems.push(m);
}
else
{
otherItems.push(m);
}
});
$.each(accountantItems, function (index, m) {
if (!AccountantHeader) {
lielm += '<li class="no-hover"><strong>Accountants</strong></li>';
AccountantHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$.each(reportsItems, function (index, m) {
if (!ReportHeader) {
lielm += '<li class="no-hover"><strong>Reports</strong></li>';
ReportHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$.each(otherItems, function (index, m) {
if (!OtherHeader) {
lielm += '<li class="no-hover"><strong>Other</strong></li>';
OtherHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').html(lielm);
$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').children('li').click(function () {
var pId = $(edt).parent().parent().attr('id');
var mId = $('#' + pId + ' .menu-id').val() || 0;
var mnu = { UserId: uId, Name: this.outerText, Url: $(this).data('value'), ID: mId }
//
//
// Update dashboard
Here is the HTML belong to just a single box (one out of the six sections I have made for dropdowns)
<div class="row">
<div class="box" id="box0">
<div class="drop">
<div class="edit"><span><i class="fa fa-pencil fa-lg"></i></span></div>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul class="widget-options">
</ul>
</div>
</div>
</div>
<a class="menu-href" href="javascript:">
<input type="hidden" class="menu-id" />
<span class="menu-icon fa fa-2x"> </span>
<div class="clearfx"></div>
<label class="menu-text"> </label>
</a>
</div>
Any help in this regard will highly be appreciated.

JavaScript / JSON Linked Listview - Loading a New Panel

I am trying to write some JavaScript code to load JSON from a URL and then display it in a linked listview that navigates to a new panel within the webapp that I am creating. I have successfully rendered the listview from the JSON data however, I cannot seem to get a new panel open. Any ideas? My code so far it below -
<li class="divider">Brown Eyes</li>
<div id="output1"></div>
<li class="divider">Green Eyes</li>
<div id="output2"></div>
<script>
var myContainer = "";
var panel_view = "";
var a = new XMLHttpRequest();
a.open("GET", "https://api.myjson.com/bins/1dwnm", true);
a.onreadystatechange = function () {
console.log(a);
if (a.readyState == 4) {
var obj = JSON.parse(a.responseText);
for (i = 0; i < obj.length; i++) {
if (obj[i].eyeColor == 'brown') {
var myContainer = '<ul class="list"><li><a href="#item_profiles'+i+'" class="icon pin">' + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + '</li></ul>';
document.getElementById('output1').innerHTML += myContainer;
}
if (obj[i].eyeColor == 'green') {
var myContainer = '<ul class="list"><li><a href="#item_profiles'+i+'" class="icon pin">' + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + '</li></ul>';
document.getElementById('output2').innerHTML += myContainer;
}
}
}
}
a.send();
panel_view += '<div class="panel" data-title="'+obj[i].name.first+'" id="item_profiles'+i+'" data-footer="none"><img src="http://localhost:3000/uploads/'+obj[i].name.first+'" style="width:100%;height:auto;"><p style="padding-left: 10px; padding-right: 10px;">'+obj[i].name.first+'</p></div>';
$('#profiles_panel').after(panel_view);
</script>
EDITED -
So, the purpose of this is to achieve the below code to use just Native JavaScript as oppose to jQuery. Here is the jQuery version of the code -
<script type="text/javascript">
$(document).ready(function () {
var panel_view_admissions = "";
$.getJSON( 'http://localhost:3000/admissions', function(data) {
$.each( data, function(i, name) {
$('ul.list-admissions').append('<li>'+name.title+'</li>');
panel_view_admissions += '<div class="panel" data-title="'+name.title+'" id="item_admissions'+i+'" data-footer="none"><img src="http://localhost:3000/uploads/'+name.image+'" style="width:100%;height:auto;"><p style="padding-left: 10px; padding-right: 10px;">'+name.content+'</p></div>';
});
$('#admissions_panel').after(panel_view_admissions);
});
});
</script>

Class added behind targeted element

I have a forloop which appends a div with child elements for each item
for (i = 0; i < len; ++i) {
if (i in courseModuleList) {
s = courseModuleList[i];
if (this.modules.get(s) != undefined) {
var moduleName = (this.modules.get(s).get('Id'));
var moduleId = (this.modules.get(s).get('OptimeIndex'));
var courseDuration = (courseTemplate.get('Duration'));
var scheduleClass;
var scheduleStatus;
var startDate;
if (scheduleStatus === "Fully Scheduled") {
scheduleClass = "cpCreatedCourseStatusScheduled";
} else if (scheduleStatus === "Part Scheduled") {
scheduleClass = "cpCreatedCourseStatusPartScheduled";
} else if (scheduleStatus === "Unscheduled") {
scheduleClass = "cpCreatedCourseStatusUnscheduled";
} else {
scheduleClass = "cpCreatedCourseStatusUnscheduled";
}
if (courseDuration == 1) {
courseDuration += " day";
} else {
courseDuration += " days";
}
div.append('<div id="selectedCourse" data-id=' + moduleId + '> <a href="#" class="list-group-item cpCreatedCourseWrap clearfix">' +
'<div class="col-lg-6 col-md-12">' +
'<div id="courseName" class="cpCreatedCourseName">' + moduleName + '</div>' +
'<div class="cpCreatedCourseDuration">' + courseDuration + '</div>' +
'</div>' +
'<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 cpCreatedCourseStatusWrap">' +
'<label>Schedule Status:</label>' +
'<div class="' + scheduleClass + '">' + scheduleStatus + '</div>' +
'</div>' +
'<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 cpCreatedCourseDateWrap">' +
'<label>Start Date:</label>' +
'<div class="cpCreatedCourseDate">' + startDate + '</div>' +
'</div>' +
'</a> </div>');
}
}
}
I then added a click event on '#selectedCourse' to add a class to the selectedCourse div if the data-id equals a item in an array.
this.$el.find('#selectedCourse').removeClass('cpCreatedCourseWrapActive');
var stepType = $(e.currentTarget).data('id');
var steps = [];
var i, s, courseModuleList = (this.courseTemplate.get('ModuleIndexList')),
len = courseModuleList.length;
for (i = 0; i < len; ++i) {
if (i in courseModuleList) {
s = courseModuleList[i];
if (this.modules.get(s) != undefined) {
var optimeIndex = (this.modules.get(s).get('OptimeIndex'));
steps.push(optimeIndex);
}
}
}
_.each(steps,
function(step) {
if (stepType === step) {
$(e.currentTarget).addClass('cpCreatedCourseWrapActive');
}
});
this is my css
.cpCreatedCourseWrapActive:hover{
background-color:#ddd;
}
.cpCreatedCourseWrapActive{
background-color:#ddd !important;
}
When I click on an element it seems to add behind the element as I can see the colour around the edges. In the image below I changed the background-color to blue to make it clear
Any ideas where I have went wrong? Any help would be appreciated.

Javascript get value from multi dimensional array

I experience an issue with getting values from an array. For some reason I can't get it to work (just getting [object]) and appreciate any help here:
Here I'm creating the response
foreach ($locations as $location) {
if($location->getStreet1() != ''){
$result .= $location->getStreet1() .', ';
}
if($location->getCity() != ''){
$result .= $location->getCity() .', ';
}
$locationList[$i]['location'] = addslashes(htmlspecialchars($location->getName()));
$locationList[$i]['address'] = addslashes(htmlspecialchars($result));
$i++;
$result = '';
}
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode(array('locations' => $locationList)));
And here I'm handling the response:
request.done(function(data) {
var container = jQuery('#hotel-list-container');
var locations = jQuery.parseJSON(data).locations;
container.html('');
var firstSymbols = [];
locations.forEach(function(location) {
var firstSymbol = location.location;
if (jQuery.inArray(firstSymbol, firstSymbols) === -1) {
firstSymbols.push(firstSymbol);
}
});
firstSymbols.forEach(function(firstSymbol) {
if (jQuery.isNumeric(firstSymbol)) {
if (container.find('.numeric').size() === 0) {
container.append('<div class="numeric">0–9</div>');
}
} else {
container.append('<div class="letter">' + firstSymbol + '</div>');
}
locations.forEach(function(data) {
if (firstSymbol == data.location) {
container.append('<div class="hotel-item"><a class="hotel" data-id="' + data.location + '"><div class="hotel_addr_div"><span>' + data.location +'</span>'+data.address+'</div></a></div>');
console.log(data.location);
}
});
});
container.slideDown(null, function() {
jQuery('#hotel-list-container').mCustomScrollbar({ scrollInertia: 0 });
});
});
locations.forEach(function(data) {
if (firstSymbol == data.location) {
container.append('<div class="hotel-item">
<a class="hotel" data-id="' + data.location + '">
<div class="hotel_div"><span>' + data.location +'</span>'+data.address+'</div>
</a>
</div>');
}
And that is what I'm seeing in frontend
<div class="hotel-lists" id="hotel-list-container-mobile" style="max-height: 497px;">
<div class="letter">undefined</div>
<div class="hotel-item"><a class="hotel" data-id="[object Object]">[object Object]</a></div>
<div class="hotel-item"><a class="hotel" data-id="[object Object]">[object Object]</a></div>
<div class="hotel-item"><a class="hotel" data-id="[object Object]">[object Object]</a></div>
</div>
Thanks for all answers. Like requested I added the full code in here

Creating Pages Dynamically

The following is my code where i am updating the content of the dynamically created pages constantly but the problem is my update function is running every 3 seconds on pages that i am not even viewing. i am not able to fix this.
var widgetNames = new Array();
var widgetId = new Array();
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel().enhanceWithin();
});
$(document).on('pagecreate', '#page1', function() {
$("#log").on('click', function(){
$.ajax({
url: "script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':$("input[name='username']").val(), 'password':$("input[name='password']").val()},
dataType: "text",
success: function (html) {
console.log(html);
widgetNames = new Array();
widgetId = new Array();
var res = html.match(/insertNewChild(.*);/g);
for(var i =0;i<res.length;i++){
var temp = res[i].split(',');
if(temp.length >= 3){
widgetNames[i] = (temp[2].replace('");','')).replace('"','');
widgetId[i] = temp[1].replace("'","").replace("'","").replace(/ /g,'');
}
}
var AllWidgets = ''
var testwidget = new Array();
var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);
for(var i =0;i<tempWidgetContent.length;i++){
var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{')+1);
testwidget[i] = widgetContent.replace("site +","");
}
var widgetPart = new Array();
for(var i = 0; i<widgetNames.length; i++){
var pageHeaderPart = "<div data-role='page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#panel' data-role='button' data-icon='flat-menu'></a><h1>BASKETBALL FANATICO</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'>";
var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";
widgetPart[i] = '<DIV style=\" text-align: center; font-size: 100pt;\" id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' + testwidget[i] + '$(\"#widgetContainer_'+widgetId[i]+'").html(counterValue);' + '}' + 'setInterval(function(){UpdateWidgetDiv'+widgetId[i]+'()},3000)' + '</SCRIPT>';
AllWidgets +='<a href="#'+widgetId[i]+'" class="widgetLink" data-theme="b" data-role="button" >'+widgetNames[i]+'</a>';
var makePage = $(pageHeaderPart + widgetPart[i] + pageFooterPart);
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllWidgets).trigger('create');
var page = $('body').pagecontainer('getActivePage').prop("id");
console.log('The Page Id is: '+page);
}
});
});
});
In this code i am looking to run the following function
'setInterval(function(){UpdateWidgetDiv'+widgetId[i]+'()},3000)'
only for the page the user is viewing.

Here is a DEMO
When creating the pages, as well as saving the page ids in the widgetId array, I am also saving the current page index as a data attribute on each dynamic page (data-pageindex), and I am assigning a class to all the dynamic pages (dynPageClass):
for (var i = 0; i< 3; i++){
var pageid = 'dynPage' + i;
widgetId.push(pageid);
var p = '<div data-role="page" id="' + pageid + '" data-pageindex="' + i + '" class="dynPageClass">';
p += '<div data-role="header"><h1>Dyn Page' + i + '</h1></div>';
p += '<div role="main" class="ui-content">I am dynamically created</div>';
p += '<div data-role="footer"><h1>Footer</h1></div>';
p += '</div>';
$('body').append($(p));
}
The the swipe code can be handled with one handler on the dynPageClass that handles both swipeleft and swiperight:
$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
var ind = parseInt($(this).data('pageindex'));
var topageid = "page2";
var rev = true;
if (e.type == 'swiperight'){
if (ind > 0){
topageid = widgetId[ind - 1] ;
}
} else {
rev = false;
if (ind < widgetId.length - 1){
topageid = widgetId[ind + 1] ;
}
}
$.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
});
We first get the current page's index from the data attribute and parse it into an integer. Then we see if this is a right or left swipe. If right, and index is greater than 0, we need to go back one dynamic page. Otherwise it is a left swipe and if current page is not the last one, we need to go forward one page.
Your swipeleft code on page2 is left intact:
$(document).on("swipeleft", "#page2", function() {
$.mobile.changePage("#"+widgetId[0], {transition: "slide", reverse: false});
});