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,386 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
convert html to string 6 22
Message not shown 5 34
How useful is the free version of Selenium? 3 16
Crystal reports vb.net 2 23
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

863 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

23 Experts available now in Live!

Get 1:1 Help Now