Develop Reference

calling ajax function show error tUncaught TypeError: $ is not a function using jquery

Hello I am using jqgrid and other function call using ajax when I use these two scripts then one script is working and one is not working.
and show this error in the browser console.
Screen shot
I try a lot of to remove this error but still, I am not able to remove to this error. kindly any expert tells me what is the problem and how can I resolved this error.
<script type="text/javascript" src="~/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/assets/jqgrid/js/jquery.jqgrid.min.js"></script>
<link href="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script type="text/javascript">
$.noConflict();
var rowsToColor = [];
jQuery(document).ready(function ($) {
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '#Url.Action("Ownsership")',
datatype: 'json',
postData: { Membership_ID: function () { return $("#mID").val(); } },
jsonReader: {},
colModel: [
{ name: 'FileID', index: 'FileID', label: 'FILE ID', width: 3 },
{ name: 'UnitNo', index: 'UnitNo', label: 'UNIT NO', width: 7 },
{ name: 'TransDate', index: 'TransDate', label: 'TRANS DATE', width: 8 },
{ name: 'Category', index: 'Category', label: 'FILE CATEGORY', width: 10 },
{ name: 'Project', index: 'Project', label: 'PROJECT', width: 20 }
],
additionalProperties: [],
loadonce: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
viewrecords: true,
height: 'auto',
autowidth: true,
rowNum: 100,
rowList: [10, 20, 30, 50, 100, 500],
rownumbers: true,
sortname: "Name",
sortorder: "desc"
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
TotalFilesM();
$("#Projectlist").change(function () {
TotalFilesM();
});
});
function TotalFilesM() {
$.ajax({
type: 'GET',
url: '#Url.Action("mTotalFilesMember")',
dataType: 'json',
data: { PhaseID: $("#Projectlist").val() },
success: function (mTotalMemberFiles) {
$('#TotalFilesMember').html(mTotalMemberFiles);
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});
return false;
}
</script>

You're using $.noConflict(), which removes the definition of $. After that, you need to use jQuery() instead of $().
You can still use $ inside jQuery(document).ready(function($) { ... }). But your second <script> tag doesn't do it this way, it tries to use $(document).ready() at top-level.

In you console it is showing that
~/bower_components/jquery/dist
in the above path you don't have jquery.min.js check the path where you saved your jquery
and if you ever got the error of $ is not a function using jquery
try to add the online link of Jquery if online link of Jquery works then (70%) times it is the issue of your Jquery path

Remove selected option from select2 multiselect on change.

I have the following code. The aim is to style a select2 box with textbox as the searchbox. So I have implemented it as multiselect , but I only want one option to be selected.
One option is to restrict using maximumSelectionLength: 1. But in this case the limit message will be shown which i do not want to happen. (Even if i hide it some space will be taken up ).
Other option is to hide everything other than last-child , in that case multiple values will be send to backend when form is submitted.
So is there a way to remove the currently selected value when the new value is selected in multiselect ?
I'm using select2 version 3.5.2
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

You can only keep the last selected item and remove all other. Like this way :
$('#placeSelect').click(function () {
var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1);
$("#placeSelect").val(t).trigger("change");
});
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: false,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

You are using a multi option select, I suggest you to do the following:
multiple: false,

just add the following code in your query and it will work as you need it
$('ul.select2-choices').on("click", function() {
$("ul.select2-choices li .select2-search-choice-close").click();
});

Kendo Scheduler Won't Take dataSource

I have a JSON array that looks something like this:
var mockArr = [
{activity: "That One Activity", due_date: "07/22/2016", address: "22 Jump Ln", id: "42"},
{activity: "That Other Activity", due_date: "07/25/2015", address: "123 Fake St", id: "43"}
];
and I'm trying to bind it to a kendo Scheduler widget, which is configured like this:
$("#scheduler").kendoScheduler({
date: new Date(),
height: 100,
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
mobile: "phone",
timezone: "Etc/UTC",
allDaySlot:true,
editable: false,
dataSource: {
data: mockArr,
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: {type: "date", from: "due_date"},
description: { from: "address" }
}
}
}
}
});
When I run the web applet the console spits out "TypeError: e is null", and I get a page that looks like this
But I get a working scheduler when I replace mockArr and the referencing model with a static SchedulerEvent such as:
var event = new kendo.data.SchedulerEvent({
id: 1,
title: "test event",
start: new Date("2016/7/22"),
end: new Date("2016/7/22")
});
Why doesn't the scheduler like my dataSource?

There are few reasons you are facing this issue.
The reason why page look like in the image you provided is because you specified height: 100 .Remove this line kendo framework handle it automatically and you can specify it later based on your need.
Your Json Array need to be formatted correctly. see the snippet in the code provided
The data Parameter in datasource expect a javascript object you need to parse it using this data:JSON.parse(mockArr),
I noticed that kendo does not allow to bind start/end parameter in the fields to same name like you used due_date so it need to be changed to
start:{ type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
Other than this Your code work fine I have tested it.
The console error "web applet the console spits out "TypeError: e is null" sounds to be specific to java , i assume you are using java and that might be related to java framework.
Here is your live version of working code .
Navigate to Kendo UI online Editor and delete the pre-populated code and paste the code snippet provided below.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">
<div id="scheduler"></div>
</div>
<script>
var mockArr ='[{"activity":"That One Activity","due_date":"07/22/2016","due_date1":"07/22/2016","address":"22 Jump Ln","id":"42"},{"activity": "That Other Activity", "due_date": "07/25/2016","due_date1":"07/25/2016","address": "123 Fake St", "id": "43"}]';
$("#scheduler").kendoScheduler({
date: new Date(),
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
allDaySlot:true,
editable: true,
dataSource: {
data:JSON.parse(mockArr),
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
description: { from: "address" }
}
}
}
}
});
</script>
</body>
</html>

Dojo - Input fields are not Appending to the grid

I Created a grid using dojo.I 'm having a form with input fields while i entered the values and click the "Add Row" button the input fields are not appending to the grid. Delete Option is working fine but add row is not working. I have attached the link of jsfiddle kindly refer for more.
form = new Form({
onSubmit: function(evt) {
evt.preventDefault();
var formValue = this.get("value");
dataStore.newItem(formValue);
}
}, "formContainer");
form.startup();
});
jsfiddle

Fully agree with #Himanshu.
You HTML is strange.
If you want to use a submit button, you must put it inside the <form> element.
Also, still like #Himanshu said, you must provide an id in order to user newItem
See the following working jsfiddle example:
https://jsfiddle.net/xzkc7hbs/8/
For better records, here is a working snippets.
(ignore the script error, those are security warnings, and run it in full page. Otherwise the script errors are over the textboxes)
require([
'dojo/_base/lang',
'dojox/grid/DataGrid',
'dojo/data/ItemFileWriteStore',
'dojo/dom',
'dijit/form/Button',
'dojo/dom-class',
"dojo/dom-construct",
"dojo/on",
"dijit/form/Form",
"dijit/form/TextBox",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dijit/registry",
'dojo/domReady!',
'dojox/grid/_CheckBoxSelector'
], function(lang, DataGrid, ItemFileWriteStore, dom, Button, domClass, domConstruct, on, Form, TextBox, Memory, ObjectStore, request, registry) {
var data = {
identifier: 'id',
items: []
};
var data_list = [{
fname: "Boy",
lname: "Mayer",
email: "boy#mayer.com",
num: 54526
}, {
fname: "Paul",
lname: "Taucker",
email: "paul#taucker.com",
num: 12345
}, {
fname: "Steven",
lname: "Spil",
email: "steven#spil.com",
num: 87654
}, {
fname: "computer",
lname: "Tech",
email: "comp#tech.com",
num: 45158
}, {
fname: "User",
lname: "Interface",
email: "user#inter.in",
num: 94979
}];
var rows = data_list.length;
for (i = 0, l = rows; i < rows; i++) {
data.items.push(lang.mixin({
id: i + 1
}, data_list[i % l]));
}
var dataStore = new dojo.data.ItemFileWriteStore({
data: data
});
var layout = [{
type: "dojox.grid._CheckBoxSelector",
width: '30px'
},
[{
'name': 'Sl',
'field': 'id',
'width': '20px',
'editable': 'false'
}, {
'name': 'Firstname',
'field': 'fname',
'width': '140px',
'editable': 'true'
}, {
'name': 'Lastname',
'field': 'lname',
'width': '130px',
'editable': 'true'
}, {
'name': 'Email',
'field': 'email',
'width': '140px',
'editable': 'true'
}, {
'name': 'Number',
'field': 'num',
'width': '80px',
'editable': 'true'
}]
];
var grid = new DataGrid({
store: dataStore,
query: {
id: "*"
},
queryOptions: {},
structure: layout
});
grid.placeAt("gridDiv");
grid.startup();
var button = new Button({
label: "Add Row",
}, "addRow");
button.startup();
var button = new Button({
label: "Delete",
}, "deleteBtn");
button.startup();
dojo.connect(deleteBtn, "onclick", function() {
var items = grid.selection.getSelected();
if (items.length) {
dojo.forEach(items, function(selectedItem) {
if (selectedItem !== null) {
dataStore.deleteItem(selectedItem);
}
});
}
});
var form = new Form({
onSubmit: function(evt) {
evt.preventDefault();
var formValue = form.get("value");
console.debug(formValue);
dataStore.fetch({
onComplete: function(allItems) {
var newId = allItems.length + 1;
dataStore.newItem({
id: newId,
fname: formValue.first,
lname: formValue.last,
email: formValue.dob,
num: formValue.mobile
});
}
})
}
}, "myForm");
form.startup();
});
*,
th {
font: 14px'verdana', sans-serif;
}
td {
font: 13px'verdana', sans-serif;
}
#gridDiv {
height: 14em;
margin-bottom: 15px;
width: 42em;
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css">
<div class="claro">
<div id="gridDiv"></div>
<button id="deleteBtn"></button>
<form id="myForm">
<div id="formContainer">
<input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="" placeholder="Firstname" required/>
<input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="" placeholder="Lastname" required />
<input type="text" id="email" name="dob" data-dojo-type="dijit/form/TextBox" value="" placeholder="Email" required />
<input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="" placeholder="Mobile Number" required />
</div>
<button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Add Row</button>
</form>
</div>

There are some problems with your HTML code. There is no need for the form element. You just need a div and place your dijit.form.Form in the div element. And, the submit button needs to be inside that div. It will automatically get triggered.
See the updated fiddle: JSFiddle
There is one more thing, to add data to the store, you have to provide an id to the newItem. Store will not accept an element without an id.

kendo ui treelist - lock a column

I am trying to create a lock on a column on treelist in kendo UI. If user clicks on a button it will lock a column in the treelist, I tried like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
$("button").click(function(){
var treelist = $("#treelist").data("kendoTreeList");
treelist.lockColumn("LastName");
});
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type: "number", nullable: false },
parentId: { field: "ReportsTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
reorderable: true,
resizable: true,
sortable: true,
filterable: true,
columnMenu: true,
columns: [
{
field: "FirstName",
expandable: true,
title: "First Name",
lockable: true,
width: 250
},
{
field: "LastName",
title: "Last Name",
lockable: true,
width: 200
},
{
field: "Position",
width: 400,
lockable: true
},
{
field: "Extension",
title: "Ext",
format: "{0:#}",
width: 150,
}
]
});
});
</script>
<style>
#treelist {
width: 950px;
}
</style>
</div>
</body>
</html>
lockColumn function gives the error on console and its not producing any lock on treelist :
TypeError: d is undefined kendo.all.min.js:53:29331
http://dojo.telerik.com/elipA
lockColumn API : http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist

Telerik Kendo UIs TreeList has a limitation in the column locking, which is that at least one column must be locked in the initialization phase for the programmatical column locking to work as per the documentation: "In order to use this method, the treelist must be initialized with at least one locked column, and should have unlocked columns left after the target column is locked.", source http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn.
See corrected Dojo example here: http://dojo.telerik.com/#mrtaunus/iYeGI.