Develop Reference

Asp.net - Bootstrap confirmation - FullCalendar => singleton weird behavior

I' trying to implement Bootstrap confirmation
on top of FullCalendar
the code posted below works for basically everything
except when I set "singleton" to "true"
<script src="~/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/bootstrap.bundle.js"></script>
<script src="~/Scripts/bootstrap-confirmation.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>
<script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
<script src="~/Scripts/fullcalendar/locale-all.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
hub = $.connection.planningHub;
hub.client.update = function (v, s, e, is, ie) {
fc.fullCalendar('refetchEvents');
};
$.connection.hub.start().done(function () {
fc = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
...
},
´
events: {
...
};
}
},
eventClick: function (calEvent, jsEvent, view) {
jsEvent.preventDefault();
var fcId = calEvent.id;
var eventTarget = jsEvent.target;
$(eventTarget).confirmation({
// MAYBE HERE!
rootSelector: eventTarget,
// MAYBE HERE!
placement: 'left',
title: 'do you want to delete?',
// HERE!
singleton: true,
// HERE!
popout: false,
onConfirm: function () {
$.post('#Url.Action("DeletePlanning")', { id: fcId}, function (r) {
switch ( r.status) {
case 'success':
fc.fullCalendar('refetchEvents');
break;
case 'error':
console.error(r.message);
rv();
break;
}
}
);
},
oncancel: function () { },
});
$(eventTarget).confirmation('show');
}
});
});
});
at that point it keep creating multiple popover,
with the difference that they close all at once when one closes.
Any Idea?
I really need it to be singleton!
(be forgiving, I'm really new in js and asp.net)
thanks in advance for the help

Merging two json file and using it in autocoplete plugin

I am trying to merge two JSON file and using it in autocompleteplugin.
But I do get an error TypeError: $(...).easyAutocomplete is not a function even I have added js library for both auto complete and jquery.
My code look like this:
<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>
<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>

I made a working example based on your code.
Please check you have the correct paths when you include the script files. And also check if jQuery is included.
Hope will help you:
$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
$.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
var final = [];
final.push(data1.employees1);
final.push(data2.employees2);
var new_final = final[0].concat(final[1]);
var options = {
data: new_final,
getValue: "firstName",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<div class='easy-autocomplete'>
<input id="KUNDE"/>
</div>
You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.

Creating a jQuery container to hold other functions

I am trying to create a simple class or a container to hold few JavaScript methods as shown below.
var Core = (function () {
var Error = {
alert: function() {
alert('Error => alert called');
},
display: function() {
alert('Error => display called');
}
};
var ajax = {
view: function(){
alert('Ajax => view called');
},
update: function(){
alert('Ajax => update called');
}
};
var call = function(){
Error.alert();
Error.display();
ajax.view();
ajax.update();
};
$(document).ready(function(){
call(); // This works fine.
}());
But for some reason I am not able to call these methods outside the container. For instance calling functions as shown below throws error.
$(document).ready(function(){
Core.Error.alert(); // This doesn't work.
Core.Call(); // This doesn't work.
});
Error: Uncaught TypeError: Cannot read property 'Error' of undefined
I can call the functions from within the container. I am new to the concept of jQuery plugins and would appreciate if someone can help me with this.

You can export these methods (read more about Module Pattern), like so
var Core = (function () {
...
return {
Error: Error,
Ajax: ajax,
Call: call
};
})();
Core.Error.alert();
Core.Call();
Example

Change it in:
var Core = {
error: {
alert: function () {
alert('Error => alert called');
},
display: function () {
alert('Error => display called');
}
},
ajax: {
view: function () {
alert('Ajax => view called');
},
update: function () {
alert('Ajax => update called');
}
},
call: function () {
Core.error.alert();
Core.error.display();
Core.ajax.view();
Core.ajax.update();
}
}
$(document).ready(function () {
Core.call(); // This works
}());
Working fiddle

Angularjs and jquery html5Loader

In my app i try to create a preloader with jquery.html5loader like this :
$.html5Loader({
filesToLoad: 'load.json', // this could be a JSON or simply a javascript object
onBeforeLoad: function () {
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function () {
$('#load').hide();
console.log('Complete Loaded');
},
onElementLoaded: function ( obj, elm) { },
onUpdate: function ( percentage ) {
// sleep(100000);
console.log(percentage);
$("#load").text(' '+percentage);
}
});
the script correctly work and i get Complete loaded log in console when all script loaded but i get another error on angular
Uncaught object angular.js:36
in my json file i load all script except jquery,angular.js,angular-route.js . i think the problem is because i have a this code in my html :
<html ng-app="myApp">

Probably you are doing something wrong. I've created this simple jsfiddle embedding angularjs in the page and everything seems to work.
$.html5Loader({
filesToLoad: {
files: [{
"type": "SCRIPT",
"source": "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js",
"size": 4.096,
}]
},
onBeforeLoad: function() {
console.log('Before load');
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function() {
$('#load').hide();
console.log('Complete Loaded');
},
onUpdate: function(percentage) {
// sleep(100000);
console.log(percentage);
$("#load").text(' ' + percentage);
}
});

Getting a json from collection to view in backbone.js

I am new to backbone.js and is having some problem with my app. I have a collection which relies on a json data source. I am able to console.log the json in my parse method. Is that enough to bind the collection to my view? I don't understand the use of fetch method.
My collection looks like as follows,
(function (collections,model) {
collections.Directory = Backbone.Collection.extend({
initialize : function(){
console.log('we are here');
},
model:model.item,
url:'collections/json/data.json',
parse:function(response){
console.log(response);
return response;
}
});
})(app.collections,app.models);
And my master view looks like this,
(function(views,collections){
views.masterView = Backbone.View.extend({
el : $("#contacts"),
initialize : function(){
console.log('view initialize inside render');
this.render();
this.$el.find("#filter").append(this.createSelect());
this.on("change:filterType", this.filterByType, this);
this.collection.on("reset", this.render, this);
this.collection.on("add", this.renderContact, this);
//console.log('we are here'+app.collections.CollectionItems.fetch());
console.log('view initialize');
},
render : function(){
this.$el.find("article").remove();
_.each(this.collection.models,function(item){
this.renderContact(item);
},this);
},
renderContact: function (item) {
views.contactView = new app.views.ContactView({
model: item
});
this.$el.append(contactView.render().el);
},
getTypes : function () {
return _.uniq(this.collection.pluck("Qno"));
},
createSelect : function () {
var select = $("<select/>", {
html: "<option value='all'>All</option>"
});
_.each(this.getTypes(), function (item) {
var option = $("<option/>", {
value: item.toLowerCase(),
text: item.toLowerCase()
}).appendTo(select);
});
return select;
},
events: {
"change #filter select": "setFilter",
"click #add": "addContact",
"click #showForm": "showForm"
},
setFilter : function(e){
this.filterType = e.currentTarget.value;
this.trigger("change:filterType");
},
filterByType: function () {
if (this.filterType === "all") {
this.collection.reset(contacts);
routerURL.navigate("filter/all");
} else {
this.collection.reset(contacts, { silent: true });
var filterType = this.filterType,
filtered = _.filter(this.collection.models, function (item) {
return item.get("type").toLowerCase() === filterType;
});
this.collection.reset(filtered);
routerURL.navigate("filter/"+filterType);
}
},
addContact : function(e){
e.preventDefault();
var contModel = {};
$("#addContact").children("input").each(function(i, el){
if($(el).val() !== "")
contModel[el.id] = $(el).val();
});
contacts.push(contModel);
if (_.indexOf(this.getTypes(), contModel.type) === -1) {
this.collection.add(new Contact(contModel));
this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
} else {
this.collection.add(new Contact(contModel));
}
},
showForm : function(){
this.$el.find("#addContact").slideToggle();
}
});
})(app.views,app.collections);
my model is very simple and looks like this,
(function ( models ) {
models.Item = Backbone.Model.extend({
defaults :{Qno:'1',Desc:'hello'}
});
})( app.models );
ihave one js file instantiatin viewsand collections
(function () {
window.app = {};
app.collections = {};
app.models = {};
app.views = {};
app.mixins = {};
$(function(){
app.collections.CollectionItems = new app.collections.Directory();
//app.collections.CollectionItems.fetch();
//console.log(app.collections.CollectionItems.fetch());
app.collections.CollectionItems.fetch({
success: function (collection,response) {
console.log(response);
}
});
//console.log(app.collections.CollectionItems.toJSON());
console.log('coll started');
app.views.app = new app.views.masterView({collection: app.collections.CollectionItems});
console.log('view is jus about fine!!');
//app.views.pagination = new app.views.PaginatedView({collection:app.collections.paginatedItems});
});
var ContactsRouter = Backbone.Router.extend({
routes: {
"filter/:type": "urlFilter"
},
urlFilter: function (type) {
master.filterType = type;
master.trigger("change:filterType");
}
});
var routerURL = new ContactsRouter();
Backbone.history.start();
})();
my landing page looks like this with a template in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Backbone.js Web App</title>
<link rel="stylesheet" href="css/screen.css" />
</head>
<body>
<div id="contacts">
</div>
<script id="contactTemplate" type="text/template">
<h1><%= Qno %></h1>
</script>
<script src="js/jquery.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="app.js"></script>
<script src="collections/Directory.js"></script>
<script src="models/item.js"></script>
<script src="views/masterView.js"></script>
<script src="views/simpleView.js"></script>
<!--<script src="js/backbone.paginator.js"></script>-->
</body>
</html>
I just can't get my head around this. The view is not rendered with the collection data. Please help!

I think it's because the fetch method on your collection is executed asynchronously and has therefore not completed when you create your view (if you look at the console I would expect the log statement in the success callback to display after the log statements underneath). This means that your view render method is called before the collection is populated and the reset event (which you're binding to in your view) is never triggered.
Try updating the code which instantiates everything as follows:
$(function(){
app.collections.CollectionItems = new app.collections.Directory();
//app.collections.CollectionItems.fetch();
//console.log(app.collections.CollectionItems.fetch());
app.collections.CollectionItems.fetch({
success: function (collection,response) {
console.log(response);
app.views.app = new app.views.masterView({collection: app.collections.CollectionItems});
}
});
});