We Keep Coding

How to stop a looping in Javascript?

I'm new in Laravel,
I want to make modal Iconpicker in js, but I got a problem that modal can't stop looping until the browser crashes.
and I don't get error at all on browser console, even on page load too:
script in fapicker.js:
(function() {
this.fapicker = function (options = {})
{
var defaults = {
iconUrl : '',
onSelect: function(){}
}
var options = $.extend({}, defaults, options);
if (!options.iconUrl) {
console.log('faplugin: iconUrl must be defined');
}
$elm = $('[tabindex]').attr('data-tabindex', "-1");
$elm.removeAttr('tabindex');
var $modal = $('.fapicker-modal');
if ($modal.length == 0) {
var $modal = $('<div class="wdi-modal fapicker-modal">')
.append('<div class="wdi-modal-overlay">')
.appendTo('body');
var $modal_container = $('<div class="wdi-modal-content">').appendTo($modal);
var $modal_header = $('<div class="wdi-modal-header">').appendTo($modal_container);
var $modal_body = $('<div class="wdi-modal-body">').appendTo($modal_container);
var $search_field = $('<input type="search" placeholder="Search..." class="fapicker-search" />')
.attr('disabled', 'disabled')
.addClass('disabled')
.appendTo($modal_header);
var $close = $('<button class="close"></button>').appendTo($modal_header);
var $icon_container = $('<div class="fapicker-icons-container">').appendTo($modal_body);
var $loader = $('<div class="loader-ring">').appendTo($icon_container);
var $icon_notfound = $('<div class="fapicker-notfound">Icon not found</a>').hide().appendTo($icon_container);
$.get(options.iconUrl, function (data) {
var list_icon = jsyaml.load(data);
var icon_name;
var icons = [];
$loader.hide();
for(icon_name in list_icon)
{
var styles = list_icon[icon_name].styles;
var i;
var prefix;
for (i in styles)
{
prefix = '';
switch (styles[i]) {
case 'solid':
prefix = 'fas';
break;
case 'brands':
prefix = 'fab';
break;
case 'regular':
prefix = 'far';
break;
case 'light':
prefix = 'far';
break;
}
if (prefix) {
var j;
var terms = list_icon[icon_name].search.terms.join() + ',' + icon_name;
var class_name = prefix + ' fa-' + icon_name;
var icon_item = '<i class="'+prefix+' fa-'+icon_name+'"></i>';
$icon_container.append(icon_item);
}
}
}
} else {
var $icon_container = $modal.find('.fapicker-icons-container');
var $icon_notfound = $modal.find('.fapicker-notfound');
// var $icon_filter = $icon_container.find('a[data-terms]');
$modal.fadeIn('fast');
}
// Hack the close button on input type search
var $icon_filter;
$('.fapicker-search').on('input', function()
{
if (!$icon_filter) {
$icon_filter = $icon_container.find('a[data-terms]');
}
$icon_notfound.hide();
var val = $.trim(this.value.toLowerCase());
$icon_filter.removeClass('fapicker-hidden');
if (val) {
$icon_filter.not('[data-terms *= "'+val+'"]').addClass("fapicker-hidden");
}
var $icon_found = $icon_filter.not('.fapicker-hidden');
if (!$icon_found.length) {
$icon_notfound.show();
}
});
$('.fapicker-icons-container').on('click', 'a', function()
{
options.onSelect(this);
$modal.fadeOut('fast');
});
$modal.find('.close').click(function() {
$modal.fadeOut('fast');
});
}
}());
script in menu.js:
$(document).ready(function()
{
$(document).on('click', '.icon-preview', function() {
$this = $(this);
fapicker({
iconUrl: "/vendors/font-awesome/metadata/icons.yml",
onSelect: function (elm) {
var icon_class = $(elm).data('icon');
$this.find('i').removeAttr('class').addClass(icon_class);
$this.parent().find('[name="icon_class"]').val(icon_class);
}
});
});
});
script in View:
<div class="mt-2 row form-group">
<label for="icon" class="col-form-label col-md-3 fw-bolder text-muted">Use Icon</label>
<div class="col-md-8 d-inline">
<div class="row">
<input type="hidden" name="icon_class" value="far fa-circle"/>
<div class="col-md-4">
<select class="form-select" id="icon">
<option selected>Ya</option>
<option value="1">Tidak</option>
</select>
</div>
<div class="col-md-8" style="margin-top: -5px; margin-left: -10px;">
<a href="javascript:void(0)" class="icon-preview text-muted"
data-action="faPicker" style="font-size: 2rem;">
<i class="far fa-circle"></i>
</a>
</div>
</div>
</div>
</div>
the result should like this:
what should i do?

Filter the tables in html part of Google App Script

I am beginner to appscript. I am developing a payment system where user can see their payment history and can pay their payment. But for now after I have made some changes to my code, after I select a year and filter it (for example if I select 2020) it says that the records are not available. I have included the link to my appscript and some images to explain my self better. Thank you so much.
Before filtering it
After filtering it
Code.gs
var url = "https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006";
var streetSheetName = "JALAN SANGGUL 4";
function doGet(e) {
var streetSheetName = "JALAN SANGGUL 4"; // Added
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
return HtmlService.createHtmlOutputFromFile('WebAppLogin')
.setTitle("Resident Payment");
}
function checkLogin(username, password) {
var found_record = '';
var name = '';
var ss = SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("USERNAMES");
var getLastRow = webAppSheet.getLastRow();
for(var i = 2; i <= getLastRow; i++) {
if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && webAppSheet.getRange(i, 7).getValue() == password) {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
} else if (username.toUpperCase() == 'ADMIN' && password == 'ADMINPASSWORD') {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
}
}
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
if(found_record == '') {
found_record = 'FALSE';
}
return [found_record, username,name];
}
function GetRecords(username,filter) {
var filteredDataRangeValues = GetUsernameAssociatedProperties(username);
var resultArray = GetPaymentRecords(filteredDataRangeValues,filter);
var resultFilter = getYears();
result = {
data: resultArray,
filter: resultFilter
};
return result;
}
function getYears() {
var ss= SpreadsheetApp.openByUrl(url);
var yearSheet = ss.getSheetByName("Configuration");
var getLastRow = yearSheet.getLastRow();
var return_array = [];
for(var i = 2; i <= getLastRow; i++)
{
if(return_array.indexOf(yearSheet.getRange(i, 2).getDisplayValue()) === -1) {
return_array.push(yearSheet.getRange(i, 2).getDisplayValue());
}
}
return return_array;
}
function changePassword(username, newPassword) {
var sheet = SpreadsheetApp.openByUrl(url).getSheetByName("USERNAMES");
var range = sheet.getRange("A2:A").createTextFinder(username).matchEntireCell(true).findNext();
if (range) {
range.offset(0, 6).setValue(newPassword);
}
}
function GetUsernameAssociatedProperties(username) {
var filteredDataRangeValues = '';
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName("USERNAMES");
var dataRangeValues = displaySheet.getDataRange().getValues();
if (username.toUpperCase() == 'ADMIN') {
dataRangeValues.shift();
filteredDataRangeValues = dataRangeValues;
} else {
filteredDataRangeValues = dataRangeValues.filter(row => row[0].toUpperCase() == username.toUpperCase());
}
return filteredDataRangeValues;
}
function GetPaymentRecords(userProperties,filter) {
var streetSheetName = PropertiesService.getScriptProperties().getProperty("streetSheetName"); // Added
var transpose = m => m[0].map((_, i) => m.map(x => x[i]));
var resultArray = [];
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName(streetSheetName);
var addressValues = displaySheet.getRange("B:C").getValues();
var paidMonthValues = displaySheet.getRange(1, 7, displaySheet.getLastRow(), displaySheet.getLastColumn() - 6).getValues();
//Logger.log(addressValues);
//Logger.log(transpose(paidMonthValues));
userProperties.forEach((v, i) => {
var userHouseNumber = v[1];
var userStreet = v[2];
var column = addressValues.reduce(function callbackFn(accumulator, currentValue, index, array) {
if (currentValue[0] == userHouseNumber && currentValue[1] == userStreet) {
return index
} else {
return accumulator
}
}, '');
//Logger.log(column);
Logger.log(filter)
Logger.log(paidMonthValues);
if(filter=="None"){
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}else{
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
if(element[0].includes(filter))return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}
resultArray = resultArray.concat(result);
//Logger.log(resultArray);
})
//Remove null elements
resultArray = resultArray.filter(element=>{
Logger.log(element!=null)
return element != null;
});
return resultArray;
}
WebAppLogin.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var username = ""; // Added
function GetRecords() {
var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
spin += " Loading...";
document.getElementById("LoginButton").innerHTML = spin;
username = document.getElementById("username").value; // Modified
var password = document.getElementById("password").value;
var password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(output) {
console.log(output);
var username = output[1];
var name = output[2];
if(output[0] == 'TRUE') {
document.getElementById("loginDisplay").style.display = "none";
document.getElementById("dataDisplay").style.display = "block";
document.getElementById("errorMessage").innerHTML = "";
document.getElementById("currentUser").value = name; // CHANGE
google.script.run.withSuccessHandler(displayTable).GetRecords(username,"None");
} else if(output[0] == 'FALSE') {
document.getElementById("firstLastName").innerHTML = "";
document.getElementById("currentUser").value = "";
document.getElementById("myFilter").innerHTML = "";
document.getElementById("errorMessage").innerHTML = "Failed to Login";
document.getElementById("LoginButton").innerHTML = "Login";
}
}).checkLogin(username, password);
}
function filter(){
var filterStr = document.getElementById("filterYear").value;
var user = document.getElementById("currentUser").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(user,filterStr);
}
function displayTable(result) {
var ar = result.data;
var filterString = result.filter;
ar = ar.sort((a, b) => new Date(a).getTime() > new Date(b).getTime() ? -1 : 1).splice(-12); // <--- Added
var name = document.getElementById("currentUser").value; // CHANGE
if(ar.length > 0) {
var displayTable = '<table class=\"table\" id=\"mainTable\" >';
displayTable += "<tr>";
displayTable += "<th>Month</th>";
displayTable += "<th>House Number</th>";
displayTable += "<th>Street</th>";
displayTable += "<th>Payment Status</th>";
displayTable += "</tr>";
ar.forEach(function(item, index) {
displayTable += "<tr>";
displayTable += "<td>"+item[0]+"</td>";
displayTable += "<td>"+item[1]+"</td>";
displayTable += "<td>"+item[2]+"</td>";
displayTable += "<td>"+item[3]+"</td>";
displayTable += "</tr>";
});
displayTable += "</table>";
} else {
var displayTable = "<span style=\"font-weight: bold\" >No Records Found</span>";
}
var filter = '';
if(filterString.length > 0) {
filter += '<label for="years" style="font-size: 20px">Select the Year</label><br><select class="form-control form-control-sm" id="filterYear" name="years" required><option value="" selected>Choose...</option>';
filterString.filter(String).forEach(str => {
filter += '<option value="'+str+'">'+str+'</option>';
});
filter += '</select><button class="btn btn-primary" type="button" id="FilterButton" onclick="filter()" >Submit</button>';
}
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
if (!ar.some(([a,,,d]) => {
var t = new Date(a);
return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
})) {
document.getElementById("digitalgoods-030521182921-1").style.display = "block";
}
document.getElementById("displayRecords").innerHTML = displayTable;
document.getElementById("firstLastName").innerHTML = "USER: " + name;
document.getElementById("myFilter").innerHTML = filter;
document.getElementById("LoginButton").innerHTML = "Login";
document.getElementById("username").value = '';
document.getElementById("password").value = '';
}
//change the link according to ur webapp latest version
function LogOut(){
window.open("https://script.google.com/macros/s/AKfycbwKa4sQ441WUIqmU40laBP0mfiqNMiN-NghEvwUnJY/dev",'_top');
}
function changePassword(){
var result = confirm("Want to Change Password?");
if (result) {
var newPassword = document.getElementById("newPassword").value;
google.script.run.withSuccessHandler(() => alert('Password changed')).changePassword(username, newPassword);
}
}
</script>
</head>
<body>
<h2> Resident Payment Status Portal</h2>
<div id="loginDisplay" style="padding: 10px;" >
<div class="form-row">
<div class="form-group col-md-3">
<label>User Name</label>
<input type="text" id="username" class="form-control" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label>Password</label><br>
<input type="password" id="password" class="form-control" required/>
</div>
</div>
<button class="btn btn-primary" type="button" id="LoginButton" onclick="GetRecords()" >
Login
</button>
<span id="errorMessage" style="color: red" ></span>
</div>
<hr>
<div style="display:none" id="dataDisplay" >
<div>
<h2 id="firstLastName"></h2>
</div>
<input type="hidden" id="currentUser" value=""/>
<div id ="myFilter" class="form-group"></div>
<div id="displayRecords" style="padding: 10px;" ></div>
<!----Paypal Button-------->
<hr>
<div id="digitalgoods-030521182921-1" style="display: none;"></div>
<script>(function (div, currency) {var item_total = {currency_code: currency,value: '50.00',},tax_total = {currency_code: currency,value: '0.00' },render = function () {window.paypal.Buttons({createOrder: function (data, actions) {return actions.order.create({application_context: {brand_name: "",landing_page: "BILLING",shipping_preference: "NO_SHIPPING",payment_method: {payee_preferred: "UNRESTRICTED"}},purchase_units: [{description: "",soft_descriptor: "digitalgoods",amount: {breakdown: {item_total: item_total,tax_total: tax_total},value: '50.00' },items: [{name: "Monthly Fees",quantity: 1,description: "",sku: "1",unit_amount: item_total,tax: tax_total}]}]});},onApprove: function (data, actions) {return actions.order.capture().then(function (details) {div.innerHTML = "Order completed. You\x27ll receive an email shortly!";});},onCancel: function (data) {},onError: function (err) {div.innerHTML = "<pre>" + err.toString()}}).render("#digitalgoods-030521182921-1");},init = function () {window.digitalgoods = window.digitalgoods || [];window.digitalgoods.push(render);var file = "https://www.paypal.com/sdk/js?client-id=AS-86gVX_DfakSkq6YZDJRdKZb4SMIziOd5c9DIKy4extQrpb0VFEprDleB_duKI4BJQQRewUdfliZEf\x26currency=MYR";var script = document.createElement("script");script.type = "text/javascript";script.src = file;script.onload = function() {var i = window.digitalgoods.length;while (i--) {window.digitalgoods[i]();}};div.appendChild(script);};init();})(document.getElementById("digitalgoods-030521182921-1"), "MYR");</script>
<!-----Change Password----------->
<div>
<!--<button type="button" class="btn btn-primary btn-md" onclick="changePassword()">Change Password</button>-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Change Password
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Change Password</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter New Password</label><br>
<input type="password" id="newPassword" class="form-control" required/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="changePassword()">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<!-----Log Out----------->
<div>
<button type="button" class="btn btn-default btn-md" onclick="LogOut()">
<span class="glyphicon glyphicon-log-out"></span> Log out
</button>
</div>
</div>
</body>
</html>

When I saw your script, I noticed that var user = document.getElementById("currentUser").value; is used at filter() in Javascript side,. And, at GetRecords in GAS side, it seems that the user name used at the login is required to be used. In this case, I thought that user of var user = document.getElementById("currentUser").value; might be different from the user name, and this might be the reason of your issue. So, how about the following modification?
From:
function filter(){
var filterStr = document.getElementById("filterYear").value;
var user = document.getElementById("currentUser").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(user,filterStr);
}
To:
function filter(){
var filterStr = document.getElementById("filterYear").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(username, filterStr);
}
username has already been declared as the global variable. I thought that this value might be required to be used for GetRecords at GAS side.

Uncaught ReferenceError: Unable to process binding "visible: function (){return NeedPaging }" Message: NeedPaging is not defined

Uncaught ReferenceError: Unable to process binding "visible: function (){return NeedPaging }"
Message: NeedPaging is not defined
at visible (eval at parseBindingsString (knockout-3.4.2.js:68), :3:60)
at update (knockout-3.4.2.js:104)
at function.a.B.i (knockout-3.4.2.js:73)
at Function.Uc (knockout-3.4.2.js:52)
at Function.Vc (knockout-3.4.2.js:51)
at Function.U (knockout-3.4.2.js:51)
at Object.a.m.a.B (knockout-3.4.2.js:49)
at knockout-3.4.2.js:73
at Object.r (knockout-3.4.2.js:11)
at m (knockout-3.4.2.js:72)
I'm stuck any help would be great thank you in advance.
I'm only getting this error in production however in my local it is working just fine I'm not sure what I'm missing. It looks like the comment is being removed which is giving me the error.
$(function () {
"use strict";
var PagingVm = function (options) {
var self = this;
self.PageSize = ko.observable(options.pageSize);
self.CurrentPage = ko.observable(1);
self.TotalCount = ko.observable(options.totalCount);
self.PageCount = ko.pureComputed(function () {
return Math.ceil(self.TotalCount() / self.PageSize());
});
self.SetCurrentPage = function (page) {
if (page < self.FirstPage)
page = self.FirstPage;
if (page > self.LastPage())
page = self.LastPage();
self.CurrentPage(page);
};
self.FirstPage = 1;
self.LastPage = ko.pureComputed(function () {
return self.PageCount();
});
self.NextPage = ko.pureComputed(function () {
var next = self.CurrentPage() + 1;
if (next > self.LastPage())
return null;
return next;
});
self.PreviousPage = ko.pureComputed(function () {
var previous = self.CurrentPage() - 1;
if (previous < self.FirstPage)
return null;
return previous;
});
self.NeedPaging = ko.pureComputed(function () {
return self.PageCount() > 1;
});
self.NextPageActive = ko.pureComputed(function () {
return self.NextPage() != null;
});
self.PreviousPageActive = ko.pureComputed(function () {
return self.PreviousPage() != null;
});
self.LastPageActive = ko.pureComputed(function () {
return (self.LastPage() !== self.CurrentPage());
});
self.FirstPageActive = ko.pureComputed(function () {
return (self.FirstPage !== self.CurrentPage());
});
// this should be odd number always
var maxPageCount = 7;
self.generateAllPages = function () {
var pages = [];
for (var i = self.FirstPage; i <= self.LastPage(); i++)
pages.push(i);
return pages;
};
self.generateMaxPage = function () {
var current = self.CurrentPage();
var pageCount = self.PageCount();
var first = self.FirstPage;
var upperLimit = current + parseInt((maxPageCount - 1) / 2);
var downLimit = current - parseInt((maxPageCount - 1) / 2);
while (upperLimit > pageCount) {
upperLimit--;
if (downLimit > first)
downLimit--;
}
while (downLimit < first) {
downLimit++;
if (upperLimit < pageCount)
upperLimit++;
}
var pages = [];
for (var i = downLimit; i <= upperLimit; i++) {
pages.push(i);
}
return pages;
};
self.GetPages = ko.pureComputed(function () {
self.CurrentPage();
self.TotalCount();
if (self.PageCount() <= maxPageCount) {
return ko.observableArray(self.generateAllPages());
} else {
return ko.observableArray(self.generateMaxPage());
}
});
self.Update = function (e) {
self.TotalCount(e.TotalCount);
self.PageSize(e.PageSize);
self.SetCurrentPage(e.CurrentPage);
};
self.GoToPage = function (page) {
if (page >= self.FirstPage && page <= self.LastPage())
self.SetCurrentPage(page);
}
self.GoToFirst = function () {
self.SetCurrentPage(self.FirstPage);
};
self.GoToPrevious = function () {
var previous = self.PreviousPage();
if (previous != null)
self.SetCurrentPage(previous);
};
self.GoToNext = function () {
var next = self.NextPage();
if (next != null)
self.SetCurrentPage(next);
};
self.GoToLast = function () {
self.SetCurrentPage(self.LastPage());
};
}
var MainViewModel = function () {
var self = this;
self.PageSize = ko.observable(10);
self.AllData = ko.observableArray();
self.PagaData = ko.observableArray();
self.ActivePaging = ko.observable(false);
self.Paging = ko.observable(new PagingVm({
pageSize: self.PageSize(),
totalCount: self.AllData.length
}));
self.DeSelect = function (mainModel, event) {
if (event.target.value === self.SelectedSearchOption()) {
self.SelectedSearchOption(null);
event.target.checked = false;
}
return true;
};
self.pageSizeSubscription = self.PageSize.subscribe(function (newPageSize) {
self.Paging().Update({
PageSize: newPageSize,
TotalCount: self.AllData().length,
CurrentPage: self.Paging().CurrentPage()
});
self.RenderAgain();
});
self.currentPageSubscription = self.Paging().CurrentPage.subscribe(function () {
self.RenderAgain();
});
self.RenderAgain = function () {
var result = [];
var startIndex = (self.Paging().CurrentPage() - 1) * self.Paging().PageSize();
var endIndex = self.Paging().CurrentPage() * self.Paging().PageSize();
for (var i = startIndex; i < endIndex; i++) {
if (i < self.AllData().length)
result.push(self.AllData()[i]);
}
self.PagaData(result);
}
self.dispose = function () {
self.currentPageSubscription.dispose();
self.pageSizeSubscription.dispose();
}
}
var vm = new MainViewModel();
ko.applyBindings(vm);
vm.RenderAgain();
});
<div data-bind="visible: ActivePaging" class="row" style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 form-group">
<label>page size</label>
<input class="form-control" type="number" min="1" data-bind="textInput:PageSize" />
</div>
<div class="col-sm-6">
<div class="form-group marg-top-reports">
<!-- ko with:Paging()-->
<ul data-bind="visible: NeedPaging" class="pull-left pagination">
<li data-bind="css: { disabled: !FirstPageActive() }">
<a data-bind="click: GoToFirst">First</a>
</li>
<li data-bind="css: { disabled: !PreviousPageActive() }">
<a data-bind="click: GoToPrevious">Previous</a>
</li>
<!-- ko foreach: GetPages() -->
<li data-bind="css: { active: $parent.CurrentPage() === $data }">
<a data-bind="click: $parent.GoToPage, text: $data"></a>
</li>
<!-- /ko -->
<li data-bind="css: { disabled: !NextPageActive() }">
<a data-bind="click: GoToNext">Next</a>
</li>
<li data-bind="css: { disabled: !LastPageActive() }">
<a data-bind="click: GoToLast">Last</a>
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
</div>

How to display chats related to each friend in the friendlist getting from socket in angularjs?

Iam working on chat application.I have completed for displaying chat messages in the way sending messages are displayed on right side and receiving messages on left side.It is working well.But my problem is when I click another friend name,previous chat related to previous friend is displaying along with new friend chat messages.How can I solve this problem.Iam using same array for getting old chats and for receiving messages also.
Here is my code:
var grp = angular.module("grpApp", [])
.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{|');
$interpolateProvider.endSymbol('|}');
})
.controller("grpCtrl", function ($scope, $state, $http, ) {
$scope.msgFrom = $state.params.username;
$scope.userId = $state.params.userid;
$scope.isVisible = true;
$scope.room = true;
console.log("sajs" + $scope.msgFrom);
console.log("ashgxsh" + $scope.userId);
document.getElementById("frndName").innerHTML = "Group";
$scope.msgdata = [];
$scope.friendsList = [];
$scope.groupList = [];
$scope.arrData = [];
$scope.recData;
$scope.recArr = [];
$scope.setroom;
//Enter Option
document.getElementById("myMsg").addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
document.getElementById("sendBtn").click();
}
});
//socket............................................................................................................
var socket = io('http://colourssoftware.com:3000/chat');
var username = $scope.msgFrom;
var noChat = 0; //setting 0 if all chats histroy is not loaded. 1 if all chats loaded.
var msgCount = 0; //counting total number of messages displayed.
var oldInitDone = 0; //it is 0 when old-chats-init is not executed and 1 if executed.
var roomId; //variable for setting room.
var toUser;
//passing data on connection.
socket.on('connect', function () {
socket.emit('set-user-data', $scope.msgFrom);
console.log("emitted" + $scope.msgFrom);
}); //end of connect event.
//receiving onlineStack.
socket.on('onlineStack', function (stack) {
console.log("data" + JSON.stringify(stack));
$('#list').empty();
$('#list').append($('<li>').append($('<span id="ubtn" class="btn btn-primary btn btn-sm"></span>').text("Group").css({
"font-size": "15px",
// "border-radius": "2em"
})));
var totalOnline = 0;
for (var user in stack) {
//setting txt1. shows users button.
if (user != $scope.msgFrom) {
// var txt1 = $('<span style="display:none" ></span>').text(user).css({
// "font-size": "19px"
//
// });
// } else {
var txt1 = $('<a href="#" id="ubtn"> < /a>').text(user).css({
"font-size": "15px",
"text-decoration": "none"
});
}
//setting txt2. shows online status.
if (stack[user] == "Online") {
if (user != $scope.msgFrom) {
var txt2 = $('<span></span>').text("*" + stack[user]).css({
"float": "right",
"color": "#009933",
"font-size": "15px"
});
totalOnline++;
}
} else {
var txt2 = $('<span></span>').text(stack[user]).css({
"float": "right",
"color": "#a6a6a6",
"font-size": "15px"
});
}
//listing all users.
$('#list').append($('<li>').append(txt1, txt2));
$('#totalOnline').text(totalOnline);
} //end of for.
$('#scrl1').scrollTop($('#scrl1').prop("scrollHeight"));
}); //end of receiving onlineStack event.
//on button click function.
$(document).on("click", "#ubtn", function () {
//empty messages.
$('#messages').empty();
$('#typing').text("");
msgCount = 0;
noChat = 0;
oldInitDone = 0;
//assigning friends name to whom messages will send,(in case of group its value is Group).
toUser = $(this).text();
console.log("touser:" + toUser);
//showing and hiding relevant information.
$('#frndName').text(toUser);
$('#initMsg').hide();
$('#chatForm').show(); //showing chat form.
// $('#sendBtn').hide();//hiding send button to prevent sending of empty messages.
//assigning two names for room. which helps in one-to-one and also group chat.
if (toUser == "Group") {
var currentRoom = "Group-Group";
var reverseRoom = "Group-Group";
} else {
var currentRoom = username + "-" + toUser;
var reverseRoom = toUser + "-" + username;
}
//event to set room and join.
socket.emit('set-room', {
name1: currentRoom,
name2: reverseRoom
});
console.log("room" + currentRoom + " " + reverseRoom);
});
//event for setting roomId.
socket.on('set-room', function (room) {
//empty messages.
$('#messages').empty();
$('#typing').text("");
msgCount = 0;
noChat = 0;
oldInitDone = 0;
//assigning room id to roomId variable. which helps in one-to-one and group chat.
roomId = room;
$scope.setroom = roomId;
console.log("roomId : " + roomId);
//event to get chat history on button click or as room is set.
socket.emit('old-chats-init', {
room: roomId,
username: $scope.msgFrom,
msgCount: msgCount
});
}); //end of set-room event.
//on scroll load more old-chats.
$('#scrl2').scroll(function () {
if ($('#scrl2').scrollTop() == 0 && noChat == 0 && oldInitDone == 1) {
$('#loading').show();
socket.emit('old-chats', {
room: roomId,
username: username,
msgCount: msgCount
});
}
}); // end of scroll event.
//listening old-chats event.
socket.on('old-chats', function (data) {
msgCount = 0;
console.log("count" + JSON.stringify(data));
$scope.merid;
// if (data.msgTo != $scope.arrData.msgTo) {
if (data.room == roomId) {
oldInitDone = 1; //setting value to implies that old-chats first event is done.
$('#messages').empty();
$scope.arrData.length = 0;
if (data.result.length != 0) {
console.log("length" + data.result.length);
$scope.room = false;
$('#noChat').hide(); //hiding no more chats message.
for (var i = data.result.length - 1; i >= 0; i--) {
$scope.merid = new Date(data.result[i].createdOn).getHours();
// data.result[i].createdOn = moment(data.createdOn).format("MMMM Do YYYY, hh:mm:ss a");
if ($scope.merid > 11) {
$scope.val = new Date(data.result[i].createdOn).toLocaleString() + "pm";
data.result[i].createdOn = $scope.val;
} else {
$scope.val = new Date(data.result[i].createdOn).toLocaleString() + "am";
data.result[i].createdOn = $scope.val;
}
$scope.arrData.push(data.result[i]);
msgCount++;
}
$scope.$apply();
} else {
$scope.arrData.length = 0;
$('#noChat').show(); //displaying no more chats message.
noChat = 1; //to prevent unnecessary scroll event.
}
//hiding loading bar.
$('#loading').hide();
//setting scrollbar position while first 5 chats loads.
if (msgCount <= 5) {
$('#scrl2').scrollTop($('#scrl2').prop("scrollHeight"));
}
}
//end of outer if.
//clearing chat history
$scope.clearchat = function () {
$http({
url: 'http://colourssoftware.com:3000/Clear_Chat/' + roomId,
method: 'DELETE',
}).then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error);
});
}
}); // end of listening old-chats event
//receiving typing message.
socket.on('typing', function (msg) {
var setTime;
//clearing previous setTimeout function.
clearTimeout(setTime);
//showing typing message.
$('#typing').text(msg);
//showing typing message only for few seconds.
setTime = setTimeout(function () {
$('#typing').text("");
}, 3000);
}); //end of typing event.
//sending message.
$('form').submit(function () {
socket.emit('chat-msg', {
msg: $('#myMsg').val(),
msgTo: toUser,
date: Date.now()
});
$('#myMsg').val("");
// $('#sendBtn').hide();
return false;
});
//end of sending message.
//receiving messages.
socket.on('chat-msg', function (data) {
//styling of chat message.
console.log("received data" + JSON.stringify(data));
var hrs = new Date(data.date).getHours;
var dt = new Date(data.date);
if (hrs > 11) {
dt = dt.toLocaleString();
data.date = dt + "pm";
} else {
dt = dt.toLocaleString();
data.date = dt + "am";
}
$scope.arrData.push(data);
$scope.$apply();
msgCount++;
console.log(msgCount);
$('#typing').text("");
$('#scrl2').scrollTop($('#scrl2').prop("scrollHeight"));
//end of receiving messages.
});
//on disconnect event.
//passing data on connection.
socket.on('disconnect', function () {
//showing and hiding relevant information.
$('#list').empty();
$('#messages').empty();
$('#typing').text("");
$('#frndName').text("Disconnected..");
$('#loading').hide();
$('#noChat').hide();
$('#initMsg').show().text("...Please, Refresh Your Page...");
$('#chatForm').hide();
msgCount = 0;
noChat = 0;
}); //end of connect event.
//end of function.
//Functions................................................................................................
//Getting friend requests:
$scope.getFrndreq = function () {
$http.get("http://colourssoftware.com:3000/Friend_Requests/" + $scope.msgFrom)
.then(function (response) {
console.log("response", JSON.stringify(response));
$scope.groupList = response.data;
$scope.uname = $scope.groupList.username;
console.log("username" + $scope.uname);
}, function (response) {
console.log("error" + response);
});
}
$scope.getFrndreq();
//Accept Friends.................................................................................
$scope.accept = function (reqname, uname, userid, index) {
$scope.reqName = reqname;
$scope.userName = uname;
$scope.userid = userid;
//Requests Accepted(Friends List):
var data = {
"userId": $scope.userId,
"requestname": $scope.reqName,
"username": $scope.userName
}
var req = {
method: 'POST',
url: 'http://colourssoftware.com:3000/Accept_Requests',
data: data
}
$http(req).then(function (response) {
console.log("Frndslist" + JSON.stringify(response.data));
$http({
url: 'http://colourssoftware.com:3000/Delete_Requests/' + $scope.userid,
method: 'DELETE',
data: {
id: $scope.userid
},
}).then(function (response) {
console.log(response.data);
$scope.groupList.splice(index, 1);
}, function (error) {
console.log(error);
});
}, function (response) {
console.log(response);
});
}
//Ignore Friends.............................................................................................
$scope.ignore = function (userId, index) {
$scope.userid = userId;
console.log("ashgshd" + $scope.userid);
if (confirm("Are you sure to ignore the request?")) {
$http({
url: 'http://colourssoftware.com:3000/Delete_Requests/' + $scope.userid,
method: 'DELETE',
data: {
id: $scope.userid
},
}).then(function (response) {
console.log(response.data);
$scope.groupList.splice(index, 1);
}, function (error) {
console.log(error);
});
} else {
}
}
//Getting Friends list accepted by user:
$scope.acceptList = function () {
// $scope.requestname = reqname;
$http.get("http://colourssoftware.com:3000/Accept_Requests/" + $scope.userId)
.then(function (response) {
console.log("hi", JSON.stringify(response));
$scope.friends = response.data;
console.log("heloooo" + $scope.friends);
});
//Getting Friends list accepted by others:
$http.get("http://colourssoftware.com:3000/Accepted_By_Others/" + $scope.msgFrom)
.then(function (response) {
console.log("hi", JSON.stringify(response));
$scope.friends = response.data;
console.log("heloooo" + $scope.friends);
});
}
//Getting requests list:
$scope.addFrndFn = function () {
$http.get("http://colourssoftware.com:3000/Users_List")
.then(function (response) {
console.log("hi", JSON.stringify(response));
$scope.requests = response.data;
}, function (response) {
console.log("error" + response);
});
}
$scope.addfrnd = function (reqname, id) {
console.log("shgsgh" + reqname);
var data = {
userId: id,
requestname: reqname,
username: $scope.username
}
var req = {
method: 'POST',
url: 'http://colourssoftware.com:3000/Send_Requests',
data: data
}
$http(req).then(function (response) {
console.log("saghdha" + JSON.stringify(response.data));
//Representing added friend requests
$http.get("http://colourssoftware.com:3000/Users_List")
.then(function (response) {
console.log("hi", JSON.stringify(response));
$scope.requests = response.data;
//..........................................................................................
//Getting added list
$http.get("http://colourssoftware.com:3000/Get_Sent_Requests/" + $scope.username)
.then(function (response) {
$scope.addedList = response.data;
for (var i = 0; i < $scope.requests.length; i++) {
for (var j = 0; j < $scope.addedList.length; j++) {
if ($scope.requests[i].username == $scope.addedList[j].requestname) {
document.getElementById("changeValue").value = "Request Sent";
}
}
}
}, function (response) {
console.log("error" + response);
});
//..........................................................................................
}, function (response) {
console.log("error" + response);
});
}, function (response) {
console.log(response);
});
}
//Delete requests:
$scope.unfriend = function (userId) {
$scope.userid = userId;
console.log("ashgshd" + $scope.userid);
$http({
url: 'http://colourssoftware.com:3000/Delete_Friends/' + $scope.userid,
method: 'DELETE',
data: {
id: $scope.userid
},
}).then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error);
});
}
//Logout Function...................................................................................
$scope.logoutFn = function () {
$http.get("http://colourssoftware.com:3000/user/Logout_User")
.then(function (response) {
console.log("hi" + response);
$state.go("login");
}, function (response) {
console.log("error" + response);
});
}
});
<!-- chat box using socket........................................................................-->
<main>
<div class="container-fluid">
<input type="hidden" id="user" value="<%= user.username %>" />
<div class="row">
<div class="col-sm-4" style="border:1px solid #eee;height:645px;overflow:scroll">
<div style="background-color:#eee;height:60px;">
<a><img src="images/image.jpg" class="img-circle" width="40" height="40" ng-click="imgFn()" ng-src="{|imageSource|}" style="margin-top:2%"></a>
<input type="file" accept="image/*" ng-model="imageSrc" onchange="angular.element(this).scope().fileNameChaged(this)" style="font-size:15px; position: absolute;" ng-hide="isVisible">
<span ng-bind="msgFrom" style="font-size:15px;color:black;margin-top:4%"></span>
<!--Modal...........................................................................-->
<div data-toggle="modal" data-target="#myModal" style="float:right;margin-top:4.5%;margin-right:3%">
<a style="text-decoration:none;" ng-click="addFrndFn()">
<span class="glyphicon glyphicon-user" style="color:black"></span>
</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Users List</h4>
</div>
<div class="modal-body">
<span>Click add button to send friend requests</span>
<ul class="list-group">
<li class="list-group-item" ng-repeat="list in requests track by $index">
<span ng-bind="list.username">
</span>
Add
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!--..................................Modal close.............................................................-->
<div class="dropdown" style="float:right;margin-top:4.5%;margin-right:2%">
<a data-toggle="dropdown" style="text-decoration:none">
<span class="glyphicon glyphicon-option-vertical" title="logout" style="color:black"></span>
</a>
<ul class="dropdown-menu">
<li>
<a ng-click="logoutFn()">Logout</a>
</li>
</ul>
</div>
</div>
<h4 align="center"><b>Friend Requests</b></h4>
<ul class="list-group" ng-repeat="frnd in groupList track by $index">
<li class="list-group-item">
<span ng-bind="frnd.username"> </span>
<button class="btn btn-danger btn btn-sm" style="width:20%;float:right;margin-top:-1.5%;margin-right:-2%" ng-click="ignore(frnd._id,$index)">Ignore</button>
<button class="btn btn-success btn btn-sm" style="width:20%;float:right;margin-top:-1.5%;margin-right:2%" ng-click="accept(frnd.requestname,frnd.username,frnd._id,$index)">Accept</button>
</li>
</ul>
<h4 align="center"><b>Friends</b></h4>
<div clid="scrl1">
<a id="list" style="text-decoration:none"></a>
</div>
</div>
<div class=".space"></div>
<div class="col-sm-8 " style="border:1px solid #eee;background-image:url('images/paper2.jpg')">
<div class="panel-warning">
<header style="background-color:#eee;height:60px">
<div class="panel-heading ">
<h4 id="frndName" style="color:black"><b></b></h4> <span id="typing" style="color:black"></span>
<a ng-click="clearchat()">
<span class="glyphicon glyphicon-trash btn" title="clear chat" style="float:right;margin-top:-5.5%;color:black"></span>
</a>
</div>
</header>
<div class="panel-body" id="scrl2" style="height:530px;overflow:scroll">
<p id="loading" align="center">Loading.....</p>
<p id="noChat" align="center">No More Chats To Display.....</p>
<p id="initMsg" align="center">!!...Click On User Or Group Button To Start Chat...!!</p>
<div class="chat" ng-hide="room">
<!-- <ul id="messages" style="float:left"></ul>-->
<section class="module">
<ol class="discussion" ng-repeat="message in arrData track by $index">
<li ng-class="message.msgFrom == msgFrom?'self':'other'">
<div class="messages" ng-style="message.msgFrom == msgFrom?{'background-color':'#66B2FF','border-radius':'20px 20px 0px 20px'}:{'background-color':'#fff','border-radius':'20px 20px 20px 0px'}">
<p class="paratext" id="messages" ng-style="message.msgFrom == msgFrom?{'background-color':'#66B2FF','color':'#fff'}:{'background-color':'#fff'}">
<span id="uname" ng-bind="(message.msgFrom)+(' ')+(message.createdOn)"></span>
<br><span id="userMsg" ng-bind="(message.msg)"></span>
</p>
</div>
</li>
</ol>
<ol class="discussion" ng-repeat="umsg in arrData track by $index">
<li ng-class="umsg.msgFrom == msgFrom?'self':'other'">
<div class="messages" ng-style="umsg.msgFrom == msgFrom?{'background-color':'#66B2FF','border-radius':'20px 20px 0px 20px'}:{'background-color':'#fff','border-radius':'20px 20px 20px 0px'}">
<p class="paratext" id="messages" ng-style="umsg.msgFrom == msgFrom?{'background-color':'#66B2FF','color':'#fff','float':'right'}:{'background-color':'#fff'}">
<span id="uname" ng-bind="(umsg.msgFrom)+(' ')+(umsg.date)"></span>
<br><span id="userMsg" ng-bind="(umsg.msg)"></span>
</p>
</div>
</li>
</ol>
</section>
</div>
</div>
<div class="panel-footer input-group" style="width:102%;margin-left:-2%">
<form id="chatForm" action="" onsubmit="return false">
<textarea id="myMsg" ng-keyup="do_resize(this);" cols="20" rows="1" name="description_name" class="input-box-send form-control" ng-model="message" autocomplete="off" style="width:80%;" placeholder="Write Message Here.." />
<button type="submit" id="sendBtn" class=" btn btn-primary " ng-disabled="!message" name="btn" style="font-size:13px"><span class="glyphicon glyphicon-send"></span></button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>

A black modal fade prevents me from typing in the text field

I've tried to create a modal that pops up when you click a link. I want the background to get faded but it seems like the whole page is getting blocked by the fade which prevents me from typing into the text field.
This is how it looks like: https://gyazo.com/d87f5beae17209d912169fde18bcdeb9
This is my code:
<div class="modal fade" id="new-item-modal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>Submit a New Item Ticket</h4>
</div>
<div class="modal-body">
<form id="new-item-form">
<div class="form-group">
<label for="new-item-name">Item Name</label>
<input class="form-control" id="new-item-name" placeholder="item name">
</div>
<div class="form-group">
<label for="new-item-price">Item Price</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" id="new-item-price" placeholder="item price">
</div>
</div>
<div class="form-group">
<label for="new-item-link">Item Link</label>
<input class="form-control" id="new-item-link" placeholder="item link">
</div>
<input type="submit" value="Submit" class="btn btn-lg btn-success">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
<script>
$(function () {
var mAllItems = [];
$('#search').on('keypress', function (e) {
if (e.which === 13) {
var query = this.value;
var str = '<tr><th>Item Name</th><th>Item Price</th></tr>';
if (query.length > 0) {
$.getJSON('php/search-items.php', {query: query}, function (jsonObj) {
$('#results').html(str);
handleJsonResponse(jsonObj, function (data) {
var allItems = data['allItems'];
allItems.sort(function (a, b) {
var keyA = a['price'], keyB = b['price'];
return keyB - keyA;
});
mAllItems = [];
for (var i1 = 0; i1 < allItems.length; i1++) {
var item = allItems[i1];
var name = item['name'], price = getFormattedPrice(item['price']);
mAllItems.push({id: i1, name: name});
str += '<tr><td>' + name + '</td><td>' + price + ' <span class="item-price-change-btn" id="' + i1 + '">?</span></td></tr>';
}
$('#results').html(str);
$('.item-price-change-btn').on('click', itemPriceChangeHandler);
});
});
}
}
});
$('#new-item-form').on('submit', function () {
var itemName = $('#new-item-name').val(),
itemPrice = $('#new-item-price').val(),
itemLink = $('#new-item-link').val();
if (itemName.length === 0 || itemPrice.length === 0 || itemLink.length === 0) {
return false;
}
$.post('php/new-item-ticket.php', {name: itemName, price: itemPrice, link: itemLink}, function (jsonObj) {
handleJsonResponse(jsonObj, function (data) {
var message = data['message'];
successMsg(message);
$('#new-item-modal').modal('hide');
});
}, 'json');
return false;
});
function itemPriceChangeHandler () {
var id = parseInt(this.id);
var item = null;
for (var i1 = 0; i1 < mAllItems.length; i1++) {
var i = mAllItems[i1];
if (i['id'] === id) {
item = i;
}
}
$('#item-price-change-modal').modal('show');
$('#item-price-change-name').val(item['name']);
}
$('#item-price-change-form').on('submit', function () {
var name = $('#item-price-change-name').val(),
price = $('#item-price-change-price').val();
if (name.length === 0 || price.length === 0) {
return false;
}
$.post('php/item-price-change-ticket.php', {name: name, price: price}, function (jsonObj) {
handleJsonResponse(jsonObj, function (data) {
var message = data['message'];
successMsg(message);
$('#item-price-change-modal').modal('hide');
});
}, 'json');
return false;
});
});
</script>

try giving the inner element a higher z-index than the outer element.

Try applying
pointer-events: none;
To your overlay.