I found the following topic in the forums hoping it might help but the 'fix' or
corrective action given there wasn't applicable because, as you can see from the
included code further below, the method call is spelled with the correct case.
http://paramquery.com/forum/index.php?topic=869.0I too took the initial code from a jsfiddle although different from the link identified
in the above listed forum post. In fact, this modified code works correctly in jsfiddle
but it refuses to work in Visual Studio 2010, 2013, and now 2015.
A portion of the problematic code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Ticket Quality Tool</title>
<!--jQuery dependencies-->
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>
<link rel="stylesheet" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="
http://paramquery.com/Content/css/pqgrid.min.css" />
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"> </script>
<script src="
http://paramquery.com/Content/js/pqgrid.min.js"> </script>
<script>
$(function () {
var data = [{
ID: 1,
ticketNumber: 'IM281636',
errorOwner: 'Service Desk',
errorType: 'Do Not Support',
errorDescription: 'Blah, Blah, Blah, Blah',
status: 'Submitted',
}, {
ID: 2,
ticketNumber: 'IM281671',
errorOwner: 'Service Desk',
errorType: 'Misrouted Assigned to Incorrect Site Code',
errorDescription: 'Blah, Blah, Blah, Blah',
status: 'Submitted',
}, {
ID: 3,
ticketNumber: 'C159822',
errorOwner: 'Service Desk',
errorType: 'Missing or Incorrect Information',
errorDescription: 'Blah, Blah, Blah, Blah',
status: 'Under Review',
}, {
ID: 4,
ticketNumber: 'C159393',
errorOwner: 'Service Desk',
errorType: 'Missing or Incorrect Information',
errorDescription: 'Blah, Blah, Blah, Blah',
status: 'Under Review',
}];
var obj = {
width: 1040,
height: 666,
title: "Grid From JSON data",
flexHeight: true,
flexWidth: true
};
obj.colModel = [{
title: "Ticket Number",
width: 75,
dataType: "string",
dataIndx: "ticketNumber"
}, {
title: "Error Owner",
width: 100,
dataType: "string",
dataIndx: "errorOwner"
}, {
title: "Error Type",
width: 250,
dataType: "string",
align: "left",
dataIndx: "errorType"
}, {
title: "Error Description",
width: 200,
dataType: "string",
align: "left",
dataIndx: "errorDescription"
}, {
title: "Status",
width: 100,
dataType: "string",
align: "left",
dataIndx: "status"
}];
obj.dataModel = {
data: data,
location: "local",
// dataType: "JSON", Only used once converted over to remote
sorting: "local",
sortIndx: "status",
sortDir: "down"
};
obj.pageModel = {
type: 'local',
rPP: 30,
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
};
var $grid = $("#grid_json").pqGrid(obj);
$("#grid_json").on("dblclick", ".pq-grid-row", function(evt){
//alert("double left click") pq-row-indx is 0 based;
var rowIndx = parseInt($(this).attr("pq-row-indx"));
rowIndx = rowIndx + 1
console.log(rowIndx);
alert(data[rowIndx][0]);
return false;
});
});
</script>
<!-- PageData["title"] = "Ticket Quality Tool";-->
<style type="">
div {
}
.class1 {
width: 60px;
text-align: right;
padding-right: 10px;
}
.class2 {
width: 140px;
text-align: right;
padding-right: 10px;
}
.field_class {
width: 325px;
text-align: left;
padding-right: 10px;
margin-bottom: 12px;
}
.pd_field_class option {
height: 50px;
}
.area_class1 {
width: 325px;
height: 100px;
text-align: left;
padding-right: 10px;
margin-bottom: 12px;
}
.area_class2 {
width: 325px;
height: 80px;
text-align: left;
padding-right: 10px;
margin-bottom: 12px;
}
</style>
<style> .main-form {
width: 2420px;
}
.column1of2 {
float: left;
width: 520px;
}
.column2of2 {
float: left;
width: 1890px;
column-span: all;
}
</style>
<style>
.fieldset_details_view {
width: 520px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: right;
}
.fieldset_legend {
width: auto;
border: 0px;
padding: 0px;
text-align: left;
}
.fieldset_details_view_buttons {
width: 520px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: justify;
}
.fieldset_data_grid {
width: 1040px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: left;
}
.fieldset_nav_buttons {
width: 1040px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: justify;
}
</style>
<style>
.left-btn {
margin-right: 4px;
width: 110px;
}
.center-left-btn {
margin-left: 4px;
margin-right: 4px;
width: 120px;
}
.center-right-btn {
margin-left: 4px;
margin-right: 4px;
width: 110px;
}
.right-btn {
margin-left: 4px;
width: 110px;
}
</style>
</head>
<body>
<!-- <form name="Ticket Quality Tool" class="main-form" ng-submit="ctrl.submitData()"> -->
<form name="Ticket Quality Tool" class="main-form">
<div class="column1of2">
<fieldset class="fieldset_details_view">
<legend class="fieldset_legend">Ticket Details</legend>
<div>
<label for="ticket_num_entry" class="class2">Ticket Number: </label>
<input type="text" class="field_class" required title="Please enter the original NETS ticket's number." id="ticket_num_entry" pattern="^[CTIM0-9]+$" ng-model="MTTItem.TicketNumber" />
</div>
<div>
<label for="error_owner_entry" class="class2">Error Owner: </label>
<select name="error_owner" class="field_class" required title="Please select the appropriate owner's UIC.'" id="error_owner_entry" ng-model="MTTItem.ErrorOwner">
<optgroup label="err_own_grp">
<option></option>
<option>Service Desk</option>
<option>A11</option>
<option>Change Mgmt</option>
<option>Incident Mgmt</option>
<option>Service Center Voice/Video</option>
</optgroup>
</select>
</div>
<div>
<label for="error_type_entry" class="class2">Error Type: </label>
<select name="error_type" class="field_class" required title="Please select the appropriate Error Type." id="error_type_entry" ng-model="MTTItem.ErrorType">
<optgroup label="err_typ_grp">
<option></option>
<option>Should be Change</option>
<option>Should be Incident</option>
<option>Do Not Support</option>
</optgroup>
</select>
</div>
<div>
<label for="error_descrip_entry" class=" class2">Error Description: </label>
<textarea type="text" class="area_class1" title="Please enter the NETS ticket's description."
required pattern="^[A-Za-z0-9.,\b \b]+$" id="error_descrip_entry" ng-model="MTTItem.ErrorDescription"></textarea>
</div>
<div>
<label for="status_entry" class="class2">Status: </label>
<select name="status" class="field_class" title="Please select this MTT ticket's status."
required id="status_entry" ng-model="MTTItem.Status">
<optgroup label="stat_grp">
<option></option>
<option>Submitted</option>
<option>Under Review</option>
<option>Response Provided</option>
<option>Completed</option>
<option>Rejected</option>
<option>Deleted</option>
</optgroup>
</select>
</div>
</fieldset>
<fieldset class="fieldset_details_view_buttons">
<div>
<table id="entry_btns_table">
<tr>
<td>
<button id="save_btn" type="submit" class="left-btn">Save Record</button>
</td>
<td>
<button id="del_btn" type="submit" class="center-left-btn">Delete Record</button>
</td>
<td>
<button id="clr_btn" type="reset" class="center-right-btn">Clear Fields</button>
</td>
<td>
<button id="cancel_btn" type="button" class="right-btn">Cancel</button>
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div class="column2of2">
<fieldset class="fieldset_data_grid">
<legend class="fieldset_legend">Ticket Listings</legend>
<div id="grid_json" style="margin:auto;"></div>
</fieldset>
</div>
</form>
</body>
</html>
The following is the consistant error returned upon execution:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'pqGrid'
The above error dialog appears when the execution reaches the following line:
var $grid = $("#grid_json").pqGrid(obj);
I have made any and all of the javascript files local in various project and tool directories and
adjusted the "include" statements accordingly and it has made no difference at all. VS is acting
like it cannot find the method call. I have verified that pqGrid with one argument is a valid
method call and yet it still complains that it cannot find it. And that usually means one of two
things. It is a red herring message disguising the fact that it cannot find the file or that the
method doesn't exist or has the wrong number of arguments. I've addressed all those scenarios and
am no wiser as to the cause. A number of people with more familiarity with VS than I have have
looked at this issue and some have even recreated the file from scratch and all of us have ended up
at the same place.
Any insight would be appreciated. Thank you in advance.
Show Posts
You can only bang your head against the wall for so long before it really starts to hurt and Visual Studio was seriously making my head hurt. I still have no idea what Visual Studio's issue with pqGrid and its dependencies and it is obvious that no one here on the forums has seen this same problem so I'm dropping Visual Studio for this part of the effort. However, I guess I'm stuck using this Visual Studio 'tool' for the ASP.NET and C# server-side work but I will be avoiding it like the plague for any of the web client work. JetBrains' IntelliJ is the editor integrated into Android Studio and I like that a lot so I was hoping there would be similarities between it and WebStorm and I was right.