Event firing twice in kendo collapsible - javascript

I have an app the uses the Progress JSDO to load data and, using the foreach method of the jsdo, append the data to three different lists in kendo collapsible panels depending on the status of one of the fields. For some reason, the lists are being appended twice in the code and I can't figure out why. I would appreciate another set of eyes on my code to help me get to the bottom of this mystery.
Here is the controller for the view (this is all wrapped in an IIFE with some other code, but this is the relevant section.):
app.scanBarcode = {
viewModel: new ScanViewModel(),
onShow: function () {
app.JSDOSession.addCatalog(app.JSDOSettings.catalogURIs);
app.locJSDO.fill();
$("#list-button").unbind().click(function () {
app.goToScanFail();
});
app.scanBarcode.getCurrentReport();
},
onHide: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
reportJSDO.unsubscribe('afterFill', writeOutReport);
},
getCurrentReport: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
//Fill the JSDO from db and call function to display the data
reportJSDO.subscribe('afterFill', writeOutReport);
reportJSDO.fill();
},
writeOutReport: function (jsdo, success, request) {
var date = app.getDate();
jsdo.foreach(function (report) {
var reportDate = report.data.STAMP_DT,
completed = "<span class='glyphicon glyphicon-ok'></span>",
notCompleted = "",
span;
if (reportDate == date) {
if (report.data.STAMP_TM == null) {
span = notCompleted;
$("#uncompleted-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
} else {
span = completed;
$("#completed-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
$("#all-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
});
}
}
This is the html for my view:
<div data-role="view" data-title="Scan Location" data-reload="true" data-layout="views-layout" data-model="app.scanBarcode.viewModel" data-show="app.scanBarcode.onShow" data-hide="app.scanBarcode.onHide">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<h3 class="hassubtitle">Begin Scan:</h3>
<button class="btn btn-xlg btn-primary btn-block" data-bind="click: scan">Scan</button>
<button id="list-button" class="btn btn-lg btn-default btn-block">Skip</button>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div data-role="collapsible" id="completed-collapsible">
<h2>
Completed
</h2>
<div data-role="scroller" id="completed-list"></div>
</div>
<div data-role="collapsible" id="uncompleted-collapsible">
<h2>
Uncompleted
</h2>
<div data-role="scroller" id="uncompleted-list"></div>
</div>
<div data-role="collapsible" id="all-collapsible">
<h2>
All
</h2>
<div data-role="scroller" id="all-list"></div>
</div>
</div>
I'm the only web developer at my work and I have no one to ask here, so I really appreciate you all!

Related

Displaying appropriate error message when data from JSON doesn't get fetched in HTML

I've a sample JSON:
[
{
"componentid": 4,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "theme",
"shortdesc": "to set theme for different applications"
},
{
"componentid": 7,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "preferences",
"shortdesc": "preferences screen for apps"
}
]
I've a JavaScript code that goes through above JSON and fetches the data
function prepareTopComponentList(data) {
try {
var preparedHtml = "";
for (var count = 0; count < data.length; count++) {
preparedHtml += "<div class=\"col-lg-4\" style=\"margin-top: 20px\">\n" +
" <div class=\"card wow fadeIn\" data-wow-delay=\"0.2s\">\n" +
" <img class=\"img-fluid\" src=\"";
preparedHtml += data[count].displayImageUrl;
preparedHtml += "\" alt=\"N/A\">\n" +
" <div class=\"card-body\">\n" +
" <h4 class=\"card-title\">";
preparedHtml += data[count].title;
preparedHtml += "</h4>\n" +
" <p class=\"card-text\">";
preparedHtml += data[count].shortdesc;
preparedHtml += "</p>\n" +
" <a onclick='Redirect(this)' href='#' class=\"btn btn-info\" id=\"";
preparedHtml += "component_desc_=" + data[count].componentid;
preparedHtml += "\">Learn more</a>\n" +
" </div>\n" +
"\n" +
" </div>\n" +
" </div>";
}
$("#div_top_component").append(preparedHtml);
} catch (err) {
}
}
function Redirect(element) {
try {
window.location = "http://localhost:9090/Reusable%20Components/pages/homepage.php?" + element.id;
} catch (err) {
}
}
I also have a HTML code for displaying error:
<!--Error/Warning Modal-->
<div class="modal fade" id="modal_show_error" 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" id="modal_error_title"></h4>
</div>
<div class="modal-body">
<p id="modal_error_description"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
I'm fetching componentid from JSON. But if it is NULL, then I want a bootstrap error pop up saying that componentid is NULL. Catch block of above JavaScript code is empty, I'm not getting what code I should put there to get bootstrap error pop up.
If you want no string to be appened at all if one of the items is invalid, you can use the following (I did it in es6, but you get the id)
If you want only the valid items to be appened, you can just replace the throw statement by return memo;
try {
const preparedHtml = data.reduce((memo, item) => {
if(typeof(item.componentid) === typeof(null))
throw new Error(`All items must have a componentid`);
const htmlChunk = `<div class="col-lg-4" style="margin-top: 20px">\n
<div class="col-lg-4" style="margin-top: 20px">\n
<div class="card wow fadeIn" data-wow-delay="0.2s">\n
<img class="img-fluid" src="${item.displayImageUrl} alt="N/A">\n
<div class="card-body">\n
<h4 class="card-title">${item.title}</h4>\n
<p class="card-text">${item.shortdesc}</p>\n
<a onclick='Redirect(this)'
href='#' class=\"btn btn-info\" id=\""
component_desc_="${item.componentid}">Learn more</a>\n
</div>\n\n
</div>\n
</div>`;
return memo.concat(htmlChunk);
}, '');
$('#div_top_component').append(preparedHtml);
} catch (err) {
//bootstrap modal code
}
The === is used to check the quality of the value and the type of variable....
You can do something like this...
if(data[count].componentid === undefined || data[count].componentid === null){
//Use your modal code
}
else{
//preparedHTML code
}

jquery: read inside each div, span and input

I'm creating a project in ASP.NET MVC and jQuery. When a user click on addSentence button, I want to duplicate a div called copythis with all events and insert it in another div called myform.
in copythis I have two div: in the first there is a span called sentence where I insert the text in the input in the second the user can add more then one field with different text.
When the user clicks the button called save I want to read all copythis in myform and create a structure to send to a webapi.
I have a problem is the javascript because I can read properly each div.
$("#addSentence").on("click", function (event) {
if ($("#inputSentence").val() == "")
alert("Sentence must have a value");
else {
event.preventDefault();
var theContainer = $("#copythis");
if (theContainer != null) {
var clonedSection = $(theContainer).clone(true);
if (clonedSection != null) {
$(clonedSection).find("#sentence")
.text($("#inputSentence").val());
$(clonedSection).appendTo("#myform");
}
}
}
});
$("#save").on("click", function (event) {
$("#myform #copythis").children().each(function (index, element) {
var elm = $(this);
var sentence = elm.find('.row span#sentence').val();
if (sentence != '') {
console.log('Sentence: ' + sentence);
$("input").children().each(function (m, l) {
var txt = $(this).val();
if (txt != '') {
console.log('Example: ' + txt);
}
});
}
});
});
function makeRepeater(sectionsSelector, addClass, removeClass, AYSMsg) {
$(sectionsSelector + " " + addClass + "," + sectionsSelector +
" " + removeClass).on("click", function (event) {
// Avoiding the link to do the default behavior.
event.preventDefault();
// Get the container to be removed/cloned
var theContainer = $(this).parents(sectionsSelector);
if ($(this).is(addClass)) {
// Cloning the container with events
var clonedSection = $(theContainer).clone(true);
// And appending it just after the current container
$(clonedSection).insertAfter(theContainer);
} else {
// If the user confirm the "Are You Sure" message
// we can remove the current container
if (confirm(AYSMsg)) {
// Making fade out, hide and remove element a sequence
// to provide a nice UX when removing element.
$(theContainer).fadeOut('normal',
function () {
$(this).hide('fast',
function () { $(this).remove(); }
);
}
);
}
}
});
}
makeRepeater(
'.my-repeated-section-form', /* The container selector */
'.addform', /* The add action selector */
'.removeform', /* The remove action selector */
'Are you sure you want to remove this section?' /* The AYS message. */
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="row">
<div class="col-lg-10">
<div class="input-group">
<input id="inputSentence" type="text"
class="form-control" placeholder="Sentence...">
<span class="input-group-btn">
<button class="btn btn-secondary"
type="button" id="addSentence">Add</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div style="display: inline;">
<div class="group-of-repeated-sections" style="display: none;">
<div class="my-repeated-section">
<div id="copythis">
<div class="row">
<div class="col-lg-10">
<span id="sentence"></span>
</div>
<div class="col-lg-2">
<span>
+
-
</span>
</div>
</div>
<div class="my-repeated-section-form">
<div class="row">
<div class="col-lg-12">
<input type="text" />
<span>
+
-
</span>
</div>
</div>
</div>
<div style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myform"></div>
<button id="save">Save</button>

Sorting dynamic elements in isotope

I'm building a list of ships, using jQuery's $.each loop and a JSON file created in Google Sheets (Tabletop.js), and trying to sort them with Isotope.js.
jQuery creates the list without any issues. However, when I click on my button to sort the elements via Isotope, nothing happens.
When I hardcode the elements into my HTML page, Isotope sorts everything no problem.
I've looked all over the Internet and couldn't find an answer.
The loop with a callback to another function that fetches my data from a spreadsheet. #port is a div in my HTML where everything is going.
Here's the code I'm working with.
function showInfo(data, tabletop) {
var shipData = tabletop.sheets('data').all();
var items=[];
$.each(shipData, function(i) {
//Put each ship in the port ^__-
var ship = "<div class=\"ship\"><div class=\"row\"><p class=\"name font-lg\">" + shipData[i].name + "</p><p class=\"cruise-line font-xs\">" + shipData[i].line +"</p><div class=\"ship-photo col-md-9 col-sm-9\"><img src=\"img/" + shipData[i].img + "\" class=\"img-responsive\"></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-4 col-xs-4\">Launched</div><div class=\"header font-xs col-sm-4 col-xs-4\">Length</div><div class=\"header font-xs col-sm-4 col-xs-4\">Tonnage</div></div><div class=\"row\"><div class=\"year font-lg col-sm-4 col-xs-4\">" + shipData[i].launchYear +"</div><div class=\"length font-lg col-sm-4 col-xs-4\">" + shipData[i].length + "'</div><div class=\"weight font-lg col-sm-4 col-xs-4\">" + shipData[i].tonnage + "</div></div></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-6 col-xs-6\">Max capacity</div><div class=\"header font-xs col-sm-6 col-xs-6\">Crew</div></div><div class=\"row\"><div class=\"max-passenger font-lg col-sm-6 col-xs-6\">" + shipData[i].maxCapacity + "</div><div class=\"crew font-lg col-sm-6 col-xs-6\">" + shipData[i].crewCapacity + "</div></div></div></div>";
items.push(ship);
});
$port.append(items)
}
Here's my Isotope sorting code:
// init Isotope
$('#port').isotope({
itemSelector: ".ship",
layoutMode: 'vertical',
getSortData: {
name: '.ship'
}
})
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var $this = $(this);
var sortValue = $this.attr('data-sort-value');
$('#port').isotope({
sortBy: sortValue
});
});
Here's my HTML:
<div class="compare">
<h3>How the ships compare</h3>
<div id="sorts" class="button-group">
<button class="button" data-sort-value="name">name</button>
<button class="button" data-sort-value="length">length</button>
<button class="button" data-sort-value="weight">weight</button>
<button class="button" data-sort-value="passengers">passenger</button>
<button class="button" data-sort-value="original-order">clear</button>
</div>
</div>
<div id="port"></div>
JSFiddle demo. One list is generated in JS while the other is made in HTML.
Two issues to fix.
Change #sorts to this:
<button id="sort" data-sort-value="name">Click to sort</button>
and your data function to this:
$.each(data, function (i) {
$('.port').append("<li><div class='name'>" + data[i] + "</div></li>");
});

jquery append() is creating two div elements

I am adding div elements dynamically to the DOM using jquery append(). I have made a controller that takes json data using $http.get() and calls a function create_mission to add the divs to DOM. I have to create a div for every object of the json, so i have done it using a loop and iterating it for json.length times. But here two div elements gets created at every iteration.
Here is my controller
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
create_mission();
});
var create_mission = function () {
var i;
for (i = 0; i < $scope.missions.length; i++) {
$("#missionstart").append("<div id='" + $scope.missions[i].id + "' class='" + $scope.missioncount[$scope.missions.length] + "'></div>");
$("#missionstart").find("#" + $scope.missions[i].id + "").append("<div class='dashboard-div-wrapper " + $scope.bkclr[i] + "'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<div class='progress progress-striped active'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").find("div").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
}
}
}]);
The HTML file
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
</div>
</div>
The json file
[{"id":1,"missionInfo":"mission"},{"id":2,"missionInfo":"mission1"},{"id":3,"missionInfo":"mission2"},{"id":4,"missionInfo":"mission3"}]
Since you have used angularjs, use a angularjs solution
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div id="{{mission.id}}" ng-class="missioncount[missions.length]" ng-repeat="mission in missions">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1>{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar" ng-class="progressbar[$index]" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
</div>
<ul class="unorderedlist"></ul>
</div>
</div>
</div>
</div>
</div>
then
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
});
$scope.missions = data;
$scope.len = data.length;
}]);
Firstly, I found a possible typo in your javascript code.
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
I believe what you want is $scope.missions[i].missionInfo. Other than this, your code should be fine.
Secondly, in angular world, the normal way to iterate is to use ng-repeat (please see Arun's answer). Your view and controller shouldn't know each other, and they should communicate through your model.
Inside Loop try this code:
var div2=$("div></div>").addClass("dashboard-div-wrapper "+$scope.bkclr[i]);
div2.append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
div2.append($("<div></div>").addClass("progress progress-striped active").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>"));
div2.find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
var div1=$("<div></div>").id($scope.missions[i].id).addClass($scope.missioncount[$scope.missions.length]).append(div2);
$("#missionstart").append(div1);
Code not tested. Test it and let me know.

Show Post Title on Header

each time I click on a Post link I want the Title of the Post to appear on the Header page. See screen shot
As seen, I would like the 'Devotional Message' replaced by the Post Title...
HTML Code:
<div id="devotionpost" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Devotional Message</h1>
Devotion
</div><!-- header-->
<div data-role="content">
<div id="mypost"> </div>
</div><!-- content -->
</div><!-- page -->
JS Code:
function showPost(id) {
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
function showPost(id) {
$("#devotionpost h1").html("");// to empty previous title
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
$("#devotionpost h1").html(data.post.title);// by this 'Devotional Message' replaced by the Post Title..
});

Categories