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

How to set grid post param dynamically and trigger reload with the new URL?

I have the following jQgrid Free (version: 4.15.2) definition:
$(document).ready(function () {
var $load_form = $("#load_form"),
$form_id = sessionStorage.getItem('form_id') === null ? 1 : sessionStorage.form_id,
$questions_grid = $("#questions");
$(document).on("click", $load_form, function (ev) {
// get the new form_id value and reload the grid by passing
// the new form_id as post parameter for the AJAX request
});
$questions_grid.jqGrid({
url: '/ajax/questions/get/' + $form_id,
datatype: "json",
colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
colModel: [
{name: 'field_id', index: 'id', width: 100, editable: false, editoptions: {readonly: true, size: 10}},
{name: 'grid_id', index: 'grid_id', width: 50, editable: false, editoptions: {readonly: true, size: 10}},
{name: 'field_seq', index: 'seq', width: 45, editable: true, editoptions: {size: 10}},
{name: 'type', index: 'type', width: 125, editable: false, editoptions: {readonly: true, size: 10}},
{
name: 'field_name',
index: 'text',
width: 585,
editable: true,
edittype: "textarea",
editoptions: {rows: "5", cols: "45"}
}
],
autowidth: true,
iconSet: "fontAwesome",
rowNum: 100,
guiStyle: "bootstrap",
pager: 'questions_pager',
pgbuttons: false,
pginput: false,
sortname: 'seq',
viewrecords: true,
caption: "Questions",
width: 100,
height: "auto",
editurl: 'ajax/questions/edit',
multiselect: true,
subGrid: false,
subGridUrl: 'ajax/questions/get_options',
subGridModel: [{name: ['id', 'text', 'is required'], width: [55, 200, 20]}],
gridComplete: function () {
// Don't need the +1 because it includes ".jqgfirstrow"
var seq_number = this.rows.length;
$("#next_seq_num").val(seq_number);
$("#field_seq").empty();
$("#grid_field_seq").empty();
for (var i = 1; i <= seq_number; i++) {
var sel = (i == seq_number) ? 'selected' : null;
$("#field_seq").append("<option " + sel + ">" + i + "</option>");
$("#grid_field_seq").append("<option " + sel + ">" + i + "</option>");
}
$(window).trigger('resize');
},
onSelectRow: function (ids) {
if (ids !== null) {
$("#option_field_id").val(ids);
$(".field_seq_section").hide();
$.ajax({
type: "POST",
url: "ajax/questions/get_grid_example/" + ids,
success: function (msg) {
if (msg !== "") {
jQuery('#options_ids').empty();
}
jQuery('#grid_cells_example').html(msg);
}
});
edit_question("<?php echo site_url('ajax/questions/get_by_id') ?>/" + ids, false);
}
}
}).jqGrid('hideCol', 'cb');
});
At some point and dynamically I am setting the value of the property data-formid for $("#load_form"). Since $("#load_form") is a button (see definition below) I would like to trigger the reloadGrid event using the new $formid value so I get a new fresh data from the DB.
<button type="submit" class="btn btn-default" data-formid="" id="load_form">
Load form
</button>
In a few logical steps:
Set the value for data-formid
Click on the button
Trigger reloadGrid with $("#load_form").data("formid")
I have found this: how to set postData in jqgrid AFTER it has been constructed? but I am not sure how to apply on my scenerio.
How I can achieve this?

If I understand you correctly you want to change url parameter. The code of the click-event handler could be close to the following:
$(document).on("click", $load_form, function (ev) {
var p = $questions_grid.jqGrid("getGridParam");
p.url = "/ajax/questions/get/" + $("#load_form").data("formid");
$questions_grid.trigger("reloadGrid");
});

Jquery datepicker icon position is incorrect

My calendar image is positioned below the text box of my datepicker. How can I solve this misalignment.
This is a screenshot of my screen: ! 1: http://i.stack.imgur.com/3uifN.jpg
See the jsfiddle here: jsfiddle.net/njiterry/yNw3C/8477
This is my jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Country Visibility</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mydata = [
{ Sel: true, Country : "Germany", Capital : "Berlin", Date: "05-09-2014"},
{ Sel: true, Country : "France", Capital : "Paris", Date: "05-09-2014" },
{ Sel: true, Country : "Cameroon", Capital : "Yaounde", Date: "06-09-2014" },
{ Sel: true, Country : "Gabon", Capital : "Libreville", Date: "06-09-2014" },
{ Sel: true, Country : "Holland", Capital : "Amsterdam", Date: "07-09-2014" },
{ Sel: true, Country : "Japan", Capital : "Tokyo", Date: "08-09-2014" },
{ Sel: true, Country : "Italy", Capital : "Rome" , Date: "09-09-2014"},
{ Sel: true, Country : "Spain", Capital : "Madrid" , Date: "09-09-2014"},
{ Sel: true, Country : "England", Capital : "London" , Date: "10-09-2014"},
{ Sel: true, Country : "US", Capital : "Washington D.C." , Date: "12-09-2014"}
];
var grid = jQuery("#pays_grid");
var initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
buttonText: "Select date",
onSelect: function (dateText, inst) {
if (inst.id.substr(0, 3) === "gs_") {
grid[0].triggerToolbar();
}
else {
// to refresh the filter
$(inst).trigger("change");
}
}
});
$(".ui-datepicker-trigger").css({
position: "relative",
marginLeft: "1px",
marginTop: "0px",
});
}, 100);
};
grid.jqGrid({ //set your grid id
data: mydata, //insert data from the data object we created above
datatype: 'local',
height: 230,
autoheight: true,
width: 800,
rowNum: 10,
rowList: [1, 5, 10],
colNames:['Sel.','Id','Name', 'Date'], //define column names
colModel:[
{name: 'Sel', align: 'center', sortable: false, width: 25, search: false, editable: true, edittype: 'checkbox',
editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{name:'Country', index:'Country', key: true, width:50, align:'center'},
{name:'Capital', index:'Capital', width:100, align:'center'},
{name: 'Date', index: 'Date', align: 'center', width: 100}
], //define column models
pager: '#pager', //set your pager div id
sortname: 'Country', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
sortname: 'Country',
shrinkToFit: true,
forceFit: true,
caption: "Country Overview", //title of grid
loadComplete: function() {
grid.jqGrid('setColProp', 'Date', {
sorttype: 'date', editable: true,
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
// size: 8, // for the advanced searching dialog
// attr: {size: 8} // for the searching toolbar
}
});
grid.jqGrid('filterToolbar', {autoSearch: true});
}
}).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});
});
</script>
</head>
<body>
<table id="pays_grid"></table>
<div id="pager"></div>
</body>
</html>
I've tried looking at similar questions here on Stack Overflow but I can't get the trigger image to appear inline with the input.

It seems to me that you should use
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
vertical-align: middle;
display: inline-block;
}
See http://jsfiddle.net/yNw3C/8486/

add display inline style to your text box that contains date
then adjust the margin-top of your date picker image to make it look nice and aligned with your text box.
check here: http://jsfiddle.net/saxenaabhi6/yNw3C/8479/
#gs_Date{
display:inline
}

Instead of setting
position='relative'
set
position='absolute'
and adjust top and left accordingly. Here's a fiddle:
http://jsfiddle.net/ey170t1z/1/

in the CSS:
.ui-datepicker-trigger {
vertical-align: top;
height: 24px; /* the same of textbox */
}

Uncaught TypeError : cannot read property 'replace' of undefined In Grid

I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error
Uncaught TypeError: Cannot read property 'replace' of undefined
This is my Code on my KendoGrid
$("#Grid").kendoGrid({
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
dataSource: {
transport: {
read: {
url: '/Info/InfoList?search=' + search,
dataType: "json",
type: "POST"
}
},
pageSize: 10
},
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#rowTemplate").html())
});
Line that Causes the Error
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
HTML of rowTemplate
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class='k-alt'>
<td>
${ FirstName } ${ LastName }
</td>
</tr>
</script>

I think jQuery cannot find the element.
First of all find the element
var rowTemplate= document.getElementsByName("rowTemplate");
or
var rowTemplate = document.getElementById("rowTemplate");
or
var rowTemplate = $('#rowTemplate');
Then try your code again
rowTemplate.html().replace(....)

It could be because of the property pageable -> pageSizes: true.
Remove this and check again.

Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script>
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).find('tr').removeClass('k-alt');
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
dataBound: onDataBound,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
I have implemented same thing with different way.

In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "#section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.

It is important to define an id in the model
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)

Javascript variable into postdata of jqGrid

Right now I have this postData: { search: function() { return $("#search").val(); },},
I then have jQuery function above the jqGrid function that performs some logic and produces a string variable. Right now I am just taking that variable and setting the value of the search element like this:
$("#startSearch").click(function() {
$("#search").val(searchVal);
$("#grid").trigger("reloadGrid");
});
This works but I was hopping to do this differently. I want to just pass the seachVal variable that my jQuery function produces right into the postdata.
I tried it like this but its not working postData: { search: function() { return searchVal; },},
I'm getting an error that says searchVal is not defined. I made sure that the searchVal variable is global but it is still not working.
Is this possible or am I just looking at this wrong?
Any help would be great.
Thanks
UPDATE:
Here is a stripped down version of the page:
<fieldset>
<input type='text' id='search' />
<button type='button' id='startSearch'>Search</button>
</fieldset>
<script type="text/javascript">
$(function(){
$("#startSearch").click(function() {
serchVal = 'transID > "5"';
$("#search").val(serchVal);
$("#grid").trigger("reloadGrid");
});
$("#list").jqGrid({
url:'data.cfc?method=gridData',
datatype: 'json',
mtype: 'POST',
jsonReader : {
root: "rows",
page: "currentpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0",
},
postData: { search: function() { return $("#search").val(); },},
colModel :[
{name:'transid', label:'Trans ID', width:60},
{name:'companyname', label:'Company Name', width:245},
{name:'companycode', label:'Company Code', width:245},
{name:'datasource', label:'Datasource', width:245}
],
pager: '#pager',
rowList:[10,50,100],
rowNum:'10',
height:221,
sortname: 'transid',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Get Trans',
altRows: false,
autowidth: true,
forceFit: true,
rownumbers: true,
scroll: false,
sortable: true
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,view:true});
});
</script>
<table id="grid"></table>
<div id="pager"></div>

I suppose the problem exist just because you didn't declared the variable serchVal (you means probably searchVal). You can try to modify the code to the following
$(function () {
var searchVal = '';
$("#startSearch").click(function () {
searchVal = 'transID > "5"';
$("#grid").trigger("reloadGrid");
});
$("#list").jqGrid({
url: 'data.cfc?method=gridData',
datatype: 'json',
mtype: 'POST',
jsonReader : {
page: "currentpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
postData: { search: function () { return searchVal; }},
colModel: [
{name: 'transid', label: 'Trans ID', width: 60},
{name: 'companyname', label: 'Company Name', width: 245},
{name: 'companycode', label: 'Company Code', width: 245},
{name: 'datasource', label: 'Datasource', width: 245}
],
pager: '#pager',
rowList: [10, 50, 100],
rowNum: 10,
height: 221,
sortname: 'transid',
viewrecords: true,
gridview: true,
caption: 'Get Trans',
autowidth: true,
rownumbers: true,
sortable: true
}).jqGrid('navGrid', '#pager',
{edit: false, add: false, del: false, search: false, view: true});
});
After that you can remove <input type='text' id='search' />.

Why don't you just wrap your logic in a function
function SomeLogic() {
return("some logic here!");
}
which is going to be called like this:
postData: { search: function() { return SomeLogic() } },
so you just have to reload the grid
$("#startSearch").click(function() {
$("#grid").trigger("reloadGrid");
});
obviously your function SomeLogic can just return searchVal
function SomeLogic() {
return(searchVal);
}