Author Topic: Object doesn't support property or method 'pqGrid' (Read 6758 times)

mepiazza · « **on:** December 23, 2015, 09:49:14 pm »

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.0

I 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>

<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>


<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">

<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.

paramvir · « **Reply #1 on:** December 28, 2015, 12:14:56 pm »

It has little to do with VS or any other IDE, the error indicates that one or more required dependencies are missing.

Please check the browser developer console for any 404 or other errors.

Also try to narrow down the issue by creating any jQueryUI control first of all on the web page.

mepiazza · « **Reply #2 on:** December 30, 2015, 05:06:27 am »

Um....I understand perfectly well what the error "appears" to be telling me. That is why the dependency statements are set to their web equivalents and taken EXACTLY as setup in jsfiddle. As I already stated above, "In fact, this modified code works correctly in jsfiddle but it refuses to work in Visual Studio 2010, 2013, and now 2015." Based on what you state the pqGrid dependencies are here on your website I set up the dependencies in jsfiddle and things work perfectly. Again, once this code is moved to VS it no longer functions. The listed error is a red-herring masking the real issue. It is that "real issue" that I am looking for help on. I have not run into these ridiculous mis-direction problems when using Borland's/Embarcadero's IDE's or Eclipse or NetBeans or Android Studio/IntelliJ, only when using Microsoft products. They over-complicate the build process and over the years their products have consistently stunk when it comes to their error processing and exceptions.

When the code has not changed nor have the dependency statements changed logic dictates that the problem is directly related to what has changed. In this case it is the 'execution' environment that has changed. If you need further proof I have already taken at least one of YOUR working demo programs from this website and loaded it into fiddle as is and it works. However, take that same code and load it into VS and guess what? It does not work either. I believe it is some kind of configuration issue hidden somewhere in VS that I have missed and that is what I am hoping that someone else may have also experienced and figured out because I am fed up with going around in circles trying to sort this and getting nowhere.

With regard to your last statement, I will look into putting some bogus jQuery control out there but again, it works fine in jsfiddle without it. Maybe it will spit out something useful.

Thank you in advance.

paramvir · « **Reply #3 on:** December 30, 2015, 10:11:44 pm »

If you have created a project/web application in VS using its templates there is a chance that VS has included its own older version of jQuery which could cause compatibility issues with the included versions of jQueryUI and pqGrid.

So follow these suggestions in addition to previous ones:

1. Try to create empty ASP.NET web site.

2. Open the web developer console in Chrome and check the versions of included files in Sources tab.

As a side note please don't link the pqGrid files directly from paramquery.com. Rather add them locally.

mepiazza · « **Reply #4 on:** December 30, 2015, 10:30:17 pm »

Thanks for the additional suggestions.

I watched a different output window when the project loaded this time and got the following:

11:30:43.0388: Downloading referenced file 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'...
11:30:43.0413: Downloading referenced file 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'...
11:30:43.0438: Downloading referenced file 'http://paramquery.com/Content/js/pqgrid.min.js'...
11:30:56.7721: 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' download completed.
11:30:56.7721: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js' download completed.
11:30:59.6502: 'http://paramquery.com/Content/js/pqgrid.min.js' download completed.

This is telling me that VS knows about the referenced JavaScript files and so it should have access to them wherever it downloaded them to so it should be able to reference and access any available classes and methods contained therein.

In answer to your suggestion about not referencing the files from the websites themselves directly like I have done, I originally did not. I have placed them in numerous different directories from the local project script directories to VS common project directories all with the correct references in the code. It doesn't matter where I put them as the error and lack of functionality remain identical. If I don't get the reference correct then I do get a different error stating that the referenced file cannot be found or something to that effect.

I fell back to referencing the files directly from the respective websites because that was how they were referenced within jsfiddle which allows the code to work. I have been trying to minimize the number of any environment differences to aid in troubleshooting. Once I can sort out what the actual problem is, if ever, the intent is to localize those referenced files as the full version of this will also be destined to run on a closed network that has no outside internet access. But for the time being the intent is to reduce variances in development/execution environments.

mepiazza · « **Reply #5 on:** January 13, 2016, 10:20:43 pm »

Just for S&G's I downloaded JetBrain's WebStorm 11, loaded my code as is, and the chart came right up. Hmmm...jsFiddle and WebStorm 11 work fine but this big dollar Visual Studio doesn't work. Micro$oft YOU SUCK!

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.

peterchaim · « **Reply #6 on:** June 20, 2017, 12:04:00 am »

I was getting this error working with ASP.NET MVC. It turned out that the layout cshtml file was including jquery twice -- once at the top where I added the ParamQuery includes, and once near the bottom as:

@Scripts.Render("~/bundles/jquery")

The second loading of jquery clobbered the first, so it appeared as if pqGrid wasn't defined.

Author Topic: Object doesn't support property or method 'pqGrid' (Read 6758 times)

mepiazza

Object doesn't support property or method 'pqGrid'

paramvir

Re: Object doesn't support property or method 'pqGrid'

mepiazza

Re: Object doesn't support property or method 'pqGrid'

paramvir

Re: Object doesn't support property or method 'pqGrid'

mepiazza

Re: Object doesn't support property or method 'pqGrid'

mepiazza

Re: Object doesn't support property or method 'pqGrid'

peterchaim

Re: Object doesn't support property or method 'pqGrid'