I've been trying to define a function that calls a jquery plugin that works without a selector
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.7/bootstrap-notify.min.js"></script>
<script>
$.notify({
// options
message: 'Hello World'
}, {
// settings
type: 'danger'
});
</script>
This first one works as intended,
but when trying this next setup
<script>
function sendNotification() {
$.notify({
// options
message: 'Hello World'
}, {
// settings
type: 'danger'
});
}
</script>
it throws a $.notify not defined
Related
I'm using selectize.js for remote search and get options against that search for my select input.
I've seen example code in their demo
<script type="application/javascript">
$(function () {
$('#workers_paid').selectize({
placeholder: "No worker Is selected",
valueField: "name",
labelfield : "name",
searchField: 'name',
render: {
option: function (item,escape) {
console.log(item);
}
},
onLoad : function (data) {
}
,
load: function (query, callback) {
alert(query);
let data = JSON.parse('{"users" : [{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"}]}');
callback(data.users);
}
});
});
</script>
This is my code that i've written for loading a static data but still render is not logging any data in console .... Onload function is also working just render is not calling anything or any options is not being created.
Sorry for bad english and thanks in advance
index.cshtml
<!doctype html>
<html data-ng-app="ui.bootstrap.demo">
<head>
<script src="~/Scripts/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="~/Scripts/example.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div data-ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$timeout(function () {
$scope.alerts.splice($scope.alerts.indexOf(alert), 1);
}, 3000); // maybe '}, 3000, false);' to avoid calling apply
unable to close the alert after 3 sec interval, anything wrong ?
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo')
.controller('AlertDemoCtrl', function ($scope, $timeout) { //here I've just injected the $timeout service to your controller. if your other codes are ok then this $timeout will work
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$timeout(function () {
$scope.alerts.splice($scope.alerts.indexOf(alert), 1); // you are using 'alert' to get the specific alert in alerts array of object, but you haven't passed/defined 'alert' anywhere. so how can you get this alert? and how can it be removed. Please pass/define 'alert', which is the portion you would know better. Then your code will work.
}, 3000); // maybe '}, 3000, false);' to avoid calling apply
You need to include "$timeout" dependency in your controller.
As mentioned by #Mahbubul Haque, "alert" is undefined inside your timeout.
Your $timeout instance should be destroyed on $destroy of scope
If you requirement is to close one alert after every 3 secs, you can do something like this:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope, $timeout) {
var timeoutInstance;
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.index = 0;
timeoutIntance = $timeout(function () {
$scope.alerts.splice(index, 1);
++$scope.index;
}, 3000);
$scope.$on("$destroy", function(){
if(angular.isDefined(timeoutInstance)){
$timeout.cancel(timeoutInstance);
timeoutInstance = null;
}
});
I'm using https://github.com/nervetattoo/jquery-autosave plugin to add autosave functionality to my forms. I try to bind the events offered by the plugin. But they are not fired or I get the error: Uncaught TypeError: undefined is not a function. Where is my mistake?
Form:
<form id="myform">
<input id="inputtext" type="text" value="test">
</form>
Script:
jQuery(function($) {
$('#myform').autosave({
namespace: "myform",
callbacks: {
data: 'serialize',
scope: 'all',
save: {
method: 'ajax',
options: {
url: '#',
type: 'post'
}
}
}
}).bind('changed.myform', function(event, input){
alert('changed');
},
'saved.myform', function (event) {
alert('saved');
});
});
A example is here: http://jsfiddle.net/smsn95cw/3/
Chaining of event triggers does not work here..
If it's bound in a single call it works,
$('#myform').bind('saved', function() {
console.log("saved"); // not works
});
$('#myform').bind('saved.autosave', function() {
console.log("saved.autosave"); //works
});
$('#myform').bind('save', function() {
console.log("save"); // not works
});
$('#myform').bind('save.autosave', function() {
console.log("save.autosave"); //works
});
$('#myform').bind('changed', function() {
console.log("changed"); // not works
});
$('#myform').bind('changed.autosave', function() {
console.log("changed.autosave"); //works
});
Using JQuery UI widget to try and call in this js file of string data but getting 'no results found'. No console errors. I simply don't think I'm referencing this correctly as I'm not very proficient with jquery/js. If someone could point me in a direction, I'd appreciate it.
<input type="text" id="test" />
scripts
<script src='js/jquery-1.11.0.min.js'></script>
<script src="js/autocomplete/jquery-ui-1.10.3.custom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Providers.js" type="text/javascript" charset="utf-8"></script>
formatted in file
var providerdata=[{"ProviderID":"1","NAME":"name1"},{"ProviderID":"2","NAME":"name2"},{"ProviderID":"3","NAME":"name3"}];
calling
$('#test').autocomplete({
source: providerdata,
success: function(data) {
var cat_data = $.map(data.Providers, function(item) {
return {
value: item.NAME,
label: item.NAME,
};
});
$("#test").autocomplete({
minlength:3,
delay: 500,
source: cat_data
});
}
});
uhm... i'm not sure, but i don't think that autocomplete has success property because its a property of an ajax call... maybe you use it inside an ajax call to get back the source, but in your case you already has surce providerdata, true?
Assuming that your $.map works fine, you can do something like:
var cat_data = $.map(providerdata, function(item) {
return {
value: item.NAME,
label: item.NAME,
}
});
$('#test').autocomplete({
source: cat_data,
minlength:3,
delay: 500,
});
[edit] - i see doc and i think you can do also:
$('#test').autocomplete({
source: function(){
return $.map(providerdata, function(item) {
return {
value: item.NAME,
label: item.NAME,
};
})
},
minlength:3,
delay: 500,
});
is it works?
I get these error messages upon loading the page:
Assertion failed: The value that #each loops over must be an Array.
You passed (generated snippets.index controller) ember-1.0.0.js:394
Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'
Here is my template code:
<script type="text/x-handlebars" data-template-name="snippets/index">
{{#each}}
{{title}}
{{/each}}
</script>
My 'Snippet' model is quite simple:
TSLibrary.Snippet = DS.Model.extend({
title: DS.attr('string')
});
TSLibrary.Snippet.FIXTURES = [{id: 1, title: 'Learn Ember.js'}];
My app and my router:
window.TSLibrary = Ember.Application.create();
TSLibrary.ApplicationAdapter = DS.FixtureAdapter.extend();
// ---
TSLibrary.Router.map(function () {
this.resource('snippets', { path: '/' }, function () {
});
});
TSLibrary.SnippetsRoute = Ember.Route.extend({
model: function () {
// My guess is that this does not return the expected array
//
// This logs 'Class {toString: function, constructor: function, reason: null, isPending: undefined, isSettled: undefined…}'
console.log(this.store.find('snippet'));
return this.store.find('snippet');
}
});
So my guess is that this.store.find('snippet') is not returning the right data.
I've also installed the Ember debug extension in Chrome and it shows me all the right data in my model.
Ember version: 1.0.0
Ember Data version: v1.0.0-beta.1-140-ga51f29c a51f29c (2013-09-07 16:34:55 -0700)
Handlebars version: 1.0.0
jQuery version: 1.10.2
TSLibrary.Router.map(function () {
this.resource('snippets', { path: '/' }, function () {
});
});
This way creates the 'snippets.index' path, which requires a Route called SnippetsIndexRoute.
TSLibrary.Router.map(function () {
this.resource('snippets', { path: '/' });
});
This one is just 'snippets', which correctly uses the SnippetsRoute that you have defined.
I found the solution by accident, now:
TSLibrary.Router.map(function () {
this.resource('snippets', { path: '/' }, function () {
});
});
has to be
TSLibrary.Router.map(function () {
this.resource('snippets', { path: '/' });
});