Solved

Failure using JQGrid with Asp.Net MVC 4 Razor due to "Object Required" error in $(Document).ready

Posted on 2014-01-30
8
2,368 Views
Last Modified: 2014-02-05
I am trying to build a jqGrid for the first time using Asp.Net MVC 4 Razor. I built a view with the "list" table and the "pager" div. I then built a $(document).ready function calling the grid. I at first used the text found on various sites and finally used the text from the jqGridwiki page. On each occasion when running the app when the process hits the $(document).ready function it crashes with the error "Object Required". See code below; As far as I can tell this is the same code that exists in all of the example apps including that on the jqGrid site itself.  Can anyone see what I am doing wrong?

$(document).ready(
    function ()
    {
        $("#list").jqGrid(
            {
             colNames: ['Int', 'String', 'Date'],
             colModel:
                 [
                    { name: 'IntProperty', index: 'IntProperty' },
                    { name: 'StringProperty', index: 'StringProperty' },
                    { name: 'DateProperty', index: 'DateProperty' },
                ],
            pager: "#pager",
            sortname: 'IntProperty',
            rowNum: 10,
            rowList: [10, 20, 50],
            sortorder: "asc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            url: "/Home/GridDemoData"
            }
        )
    }
);

Open in new window


I've asked for help in the jqGrid Forums but have gotten no reply.  Meanwhile my dealine keeps ticking closer.

In addition, if no one has a solution for this, perhaps some one else knows of another type of JQuery Gridview I can use in this project.  (It needs to be able to sort each column, embed links and datepickers within the cells, and allow paging.  A search feature would be a nice to have but not essential.)
0
Comment
Question by:Edward Joell
  • 4
  • 2
  • 2
8 Comments
 
LVL 21

Accepted Solution

by:
Craig Wagner earned 300 total points
ID: 39822011
Are you including jQuery itself prior to the $(document).ready function in your page?
0
 

Author Comment

by:Edward Joell
ID: 39822094
I had been running by adding the scripts bundle to the _Layout.cshtml view at the bottom of the view.

Then I thought of that so I added this directly on the view.

@Scripts.Render("~/Scripts/jquery-1.8.2.min.js")
@Scripts.Render("~/Scripts/Home.GridDemo.js")
@Scripts.Render("~/Scripts/jquery.jqGrid.min.js")

Open in new window



And I put back in the code from the original poster for the search filter so that it looked like this.
$(document).ready(
    function ()
    {
        $("#list").jqGrid(
            {
                colNames: ['Int', 'String', 'Date'],
                colModel:
                    [
                       { name: 'IntProperty', index: 'IntProperty' },
                       { name: 'StringProperty', index: 'StringProperty' },
                       { name: 'DateProperty', index: 'DateProperty' },
                    ],
                pager: "#pager",
                sortname: 'IntProperty',
                rowNum: 10,
                rowList: [10, 20, 50],
                sortorder: "asc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                url: "/Home/GridDemoData"
            }).navGrid(pager, { edit: false, add: false, del: false, search: false });        
        search.filterGrid("#list".attr("id"), {
            gridModel: false,
            filterModel: [{
                label: 'Search',
                name: 'search',
                stype: 'text'
            }]
        });
    }
    );

Open in new window



Then I got  an error
Unhandled exception at line 24, column 9 in http://localhost:56856/Scripts/Home.GridDemo.js

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Open in new window


Then I changed the reference to
@Scripts.Render("~/Scripts/jquery-1.8.2.min.js")
@Scripts.Render("~/Scripts/jquery.jqGrid.min.js")
@Scripts.Render("~/Scripts/Home.GridDemo.js")

Open in new window


Same error.

Then I again commented out that part, using the code I originally posted above.

It ran through without an issue, but when it rendered, it did not render a grid at all; just empty space.



It is interesting as I got a the same set of errors using dataTables after I got frustrated with jqQuery, in a document.ready function on another test project.

$(document).ready(function ()
{
    $('#RequirementsView').dataTable();
});

Open in new window


Before I put Scripts Render directly on the partial view I got the Object Required error

 Then when I put Scripts Render directly on the partial view

@Scripts.Render("~/Scripts/jquery-1.8.2.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.8.24.min.js")
@Scripts.Render("~/Scripts/DoRequirementGrid.js")

Open in new window


I got the error
Unhandled exception at line 3, column 5 in http://localhost:51715/Scripts/DoRequirementGrid.js

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39823314
Hi mate,
I'm shooting a bit in the dark here because I never used this @Scripts.Render but from what I see it doesn't work like that...

@Scripts.Render is used to create bundles, combining and compressing resources.
So the idea is to create a bundle, add all the needed scripts into it and render the bundle:

In the APP_Start folder, add this to the BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/mybundle").Include(
     "~/Scripts/jquery-1.8.2.min.js",
     "~/Scripts/jquery-ui-1.8.24.min.js",
     "~/Scripts/DoRequirementGrid.js"
));

Open in new window


Then on the view:
@Scripts.Render("~/bundles/mybundle")

Open in new window



As a side note... this is too much magic for me :)
The idea is cool and I believe it works but I still prefer a bare to the metal approach where I have direct control over what's going on and what exactly goes to the page.
As a rule of thumb, if you're having trouble with these kind of helpers, get rid of them and add normal <script> tags :)

Web development is stupidly simple but there's this huge effort of making it complicated by using "Helpers" :)
0
 

Author Comment

by:Edward Joell
ID: 39823948
Actually from what I've seen during the past few weeks of looking into this, it appears that while scripts.Render can be used for Bundles and usually is on _Layout.cshtml page, it is also able to be used to add single scripts.  In stepping through the the code  from a breakpoint on the view, I step into the document.ready function that then steps into the Jquery function.  The failure comes when it tries to process the datatable function.

As verification, I commented out all of the Scripts.Render helpers and replaced them with script tags.  The behavior was exactly the same.

For some reason it is acting as though it does not see the
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

Open in new window

I just had a thought I am going to try to replace the dataTables.min script with the full dataTables script and see if the behavior is different.

No No difference.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39824112
This is wrong:
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

Open in new window


~ on the path represents a relative pointer to the root which is a ASP.net thing.

If your Scrpts folder is in the root of the site you must replace it by:
<script type="text/javascript" src="/Scripts/jquery.dataTables.min.js"></script>

Open in new window

0
 

Assisted Solution

by:Edward Joell
Edward Joell earned 0 total points
ID: 39824238
Went back to scripts.render  Turns out Craig is right.  After I made the change, it was rendering a grid with no data.  That was because it was making a database call to get data instead of using the hard coded data that was originally placed in there.  Thanks Craig.

Regards the second project, Turns out Jquery was being added both in the layout view bundles and the partial view so that the layout view's call to JQuery was overwriting the call to the DataTable.js file.  So I moved the Jquery Bundles to the top of the layout view and removed the JQuery script calls from the partial view and voila.

Oh and Alexandre see quote below from Pluralsoft's "Building Applications with ASP.NET MVC 4"
"And while I'm looking at it, a tilde is something we've seen before but I'm not sure I explained it. A tilde represents the root of the application so tilde slash Views would mean go to the view folder from the root of this application. It's common to use a tilde everywhere you specify a path because without the tilde you need to be careful of your app that gets deployed into a subdirectory. You have to know the name of the directory where the app is deployed in order to hand out correct links. And that gets very messy. So anytime you need to point to something in the application whether it's a JavaScript file or an image or another view, using the tilde is a safe and easy approach."

This has been the case at least since they started using Master pages in ASP.Net 2.0.
0
 
LVL 21

Expert Comment

by:Craig Wagner
ID: 39824463
re: using tilde

Actually Alexandre is correct, the following won't work.

<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

Open in new window

The quote you posted leaves out a critical bit of information. The tilde only gets processed on the server side. The browser doesn't know what to do with the tilde, it'll try to load the JavaScript resource using the src attribute exactly as it is.

If you want the tilde to be expanded to the fully-qualified path in the above example you need to do something to get it processed server-side. The most common way of doing that in ASP.NET MVC is to wrap it in a call to Url.Content, i.e.

<script type="text/javascript" src="@Url.Content( "~/Scripts/jquery.dataTables.min.js" )"></script>

Open in new window

0
 

Author Closing Comment

by:Edward Joell
ID: 39835079
I got the full answer from other sources and my comment is providing that resolution to the thread so that others will have access to that information.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now