Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 - javascript

I was working on Knockoutjs in ASP.NET MVC. I m getting this error "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 "...any idea?? thnx.
In my _Layout.cshtml file these are my scripts..
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
<script src="../../Scripts/ajax-util.js" type="text/javascript"></script>
<script src="../../Scripts/bp-index.js" type="text/javascript"></script>
<script src="../../Scripts/ko-execute-on-enter.js" type="text/javascript"></script>
<script src="../../Scripts/ko-protected-observable.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
this is my template....
<ul data-bind="foreach: tags">
<li class="tagItem" data-bind="click: $parent.selectTag">
<div>
<span data-bind="text: Name"></span>
Edit
Delete
</div>
</li>
</ul>
and this is my js file(with knockout)
$(function () {
var data = [
// data
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
selectedTag: ko.observable(null),
addTag: function () {
this.tags.push({ Name: this.tagToAdd() });
//var newTag = { Name: viewModel.tagToAdd() };
this.tagToAdd("");
},
selectTag: function () {
console.log("inside selectTag");
viewModel.selectedTag
}
};
$(document).on("click", ".tag-delete", function () {
var itemToRemove = ko.dataFor(this);
viewModel.tags.remove(itemToRemove);
});
ko.applyBindings(viewModel);
});

This bit of your code could weel be the source of the error:
selectTag: function () {
console.log("inside selectTag");
viewModel.selectedTag
}
I think you need something more along the lines of:
selectTag: function (tag) {
console.log("inside selectTag");
viewModel.selectedTag(tag);
}
If it is not this, then basically the error is because some of your JS or HTML is invalid. I would try commenting out lin by line until you find the source of the error.

Related

angularfire not working with me , I don't know why?

the html code - which call the required libraries
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script type="text/javascript" src="JS/app.js"></script>
</head>
<body ng-app="seworko">
<div ng-controller="users">
{{ 4+4 }}
</div>
</body>
</html>
the Javascript code
var app = angular.module("seworko", ["firebase"]);
var config = {
apiKey:"myKey",
authDomain:"myDomain.firebaseio.com",
databaseURL:"https://myUrl.firebaseio.com",
storageBucket:"myBucket.com"};
firebase.initializeApp(config);
app.controller("users", function($scope, $firebaseObject) {
try
{
const rootRef = firebase.database().ref().child('system');
const ref = rootRef.child('global');
this.global = $firebaseObject(ref);
}
catch(e)
{
alert(e);//type error a.ref is not a function
}
});
I am getting this error ->
type error a.ref is not a function !!
I don't know the reason for the error
I followed too many tutorials , and can't connect firebase with angularJS using angularfire

Angularjs summernote: $scope.editor.insertImage is not a function

I want to upload an image to the server and place it as an image inside my text.
Editor:
<summernote ng-model="answer.value" id="answerValue" config="options" on-image-upload="imageUpload(files)" editable="editable" editor="editor"></summernote>
JS Code:
$scope.options = {
height: 400
};
$scope.imageUpload = function(files) {
answer.uploadImage(files[0]).then(function(result) {
console.log('image upload\'s editor:', $scope.editor);
console.log('image upload\'s editable:', $scope.editable);
$scope.editor.insertImage($scope.editable, result.data.url);
}, function(result) {
});
};
Libraries:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/summernote/dist/summernote.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
$scope.editor and $scope.editable are defined, but it says:
$scope.editor.insertImage is not a function
Does anyone know what I am doing wrong?
Change the code
$scope.editor.insertImage($scope.editable, result.data.url);
to
$scope.editor.summernote('insertImage', result.data.url, 'filename');
it works in summernote 0.7.0 with angular-summernote

Jquery autocomplete is not a function

I am trying to implement JQuery's autocomplete function into an input field on a website. The inspector is giving me an error that says:
"Uncaught TypeError: $(...).autocomplete is not a function".
I believe the problem might have to do with the order of my script tags but so far everything I have tried has not worked. Here is my content:
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
</script>
</body>
You haven't define any element with school id. Check below working code to compare with your own.
var schools = ['abc', 'xyz'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label for="school">Tags:</label>
<input id="school">
</body>
In the code above doesn't look like you are closing the ready function correctly.
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
</script>
</body>
The code seems to work but you need to initialize your array of schools. See running example below.
Also remember, you need to type at least two letters for the drop down to appear.
var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
Search school
<input id="school" type="text">
<br/><br/>School selected
<input type="text" id="schoolValue" />
Looks like it could be a race condition, meaning that the jquery script hasn't finished loading by the time you start trying to use it. You have document ready, which is good, but that only checks that the DOM is ready, not that asynchronously loaded scripts are done loading.
There are some answers to this here and elsewhere : How to make script execution wait until jquery is loaded
But in short, you can defer your method execution until window.jQuery returns true, try $( window ).load or you can use something like require.js to do it for you. You should also touch up your script tags:
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

jQuery UI Autocomplete in ASP.NET MVC 4 does not work

I'm deploying autocomplete jQueryUI in ASP.NET MVC 4 but it wasn't working perfectly. When I typed a name of Bike, it displays an error like this parsererror. Here's my simply code:
public JsonResult GetAutoComplete(string modelname)
{
var result = db.Products;
var search = result.Where(p => p.Name.ToLower().Contains(modelname.ToLower())).ToList();
return this.Json(result, JsonRequestBehavior.AllowGet);
}
Index.cshtml:
<script type="text/javascript">
//Javascript function to provide AutoComplete and Intellisense feature for finding Users.
$(document).ready(function () {
$("#Name").autocomplete({
source: '#Url.Action("", "StoreManager")'
});
});
</script>
<p>
Search the Name of Bikes #Html.TextBox("Name")
<input type="submit" value="Submit" id="GetName" />
</p>
Does anyone can tell me where I'm doing something wrong ? I just updated my code.
try this it may helpful to you.
<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Name').autocomplete({
source: '#Url.Action("GetAutoComplete")',
minLength: 3,
select: function (evt, ui) {
}
});
});
</script>

How to use a javascript file in options.html

I have trouble adding a personal javascript file in my option.html for my google-chrome extension.
I've added this line to my options.html:
<script type="text/javasctipt" src="/js/content/toto.js"></script>
And the object $.toto, described in this file is unreachable.
I would like to know if it's possible to add a personal js file and how or if you have to do everything in the options.js ?
Thank in advance for your answers.
Here is a part of the code as the project is already large:
options.html:
<!DOCTYPE html>
<html lang="fr">
<body>
<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/lib/sprintf-0.6.js"></script>
<script type="text/javascript" src="/js/lib/bootstrap/bootstrap-modal.js"></script>
<script type="text/javascript" src="/js/shared/constant.js"></script>
<script type="text/javascript" src="/js/shared/storage.js"></script>
<script type="text/javasctipt" src="/js/content/toto.js"></script>
<script type="text/javascript" src="/js/content/messages.js"></script>
<script type="text/javascript" src="/js/content/debug.js"></script>
<script type="text/javascript" src="/js/content/form.js"></script>
<script type="text/javascript" src="/js/content/base.js"></script>
<script type="text/javascript" src="/js/content/options.js"></script>
</body>
</html>
options.js:
$.options = $.extend({}, $.base, {
ready: function() {
// onMessage
chrome.extension.onMessage.addListener(this.onMessage);
// init events
$("#logout_btn").live("click",function() {
$.options.logout();
});
// init ui
$.toto.initialize();
this.displayCorrectContext();
this.initMailPrescrip();
}
});
toto.js:
$.toto = $.extend({}, $.base, {
TAG: "MESSAGES",
ready: function() {
$("[title-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("title-message"));
$(this).attr('title', txt);
});
$("[data-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("data-message"));
$(this).html(txt);
});
},
log: function(message) {
$.base.log($.messages.TAG,message);
}
});
Use .ready event like this.
jQuery(document).ready(function(){
// jquery function code
});
In the manifest.json, try adding it in the "scripts" line, like so:
"app": {
"background": {
"scripts": ["exampleReference1.js", "exampleReference2.js", "toto.js"],
"transient": true
}
},
Hope it works.

Categories

Resources