How to move Jquery code from a cshtml file to it's own .js file
I'm new to jQuery and have been working with a plug-in called jTable. The plug-in works fine as long as the scripting code is in my .cshtml file loaded by the view that retrieves its table data form a database. When I move the code to its own somename.js file I'm receiving an error stating "An error occurred while communicating to the server" when the page tries to fill the table.
The script is loading into the browser fine but I'm missing something that's causing the browser to throw an exception when it tries to load the table.
I'm working on a MVC3 project if that matters any, and would appreciate any help that anyone can provide!
The View has a <div> tag with the id
PropertyTable thats used by jTable to create the table list of items:
- @using System.Text
- <script type="text/javascript" src="/Scripts/ui/propertylisting.js"></script>
- @{
- ViewBag.Title = "Property Listing";
- }
- @* div container for Jtable plugin *@
- <div id="PropertyTable" style="width: auto; margin: auto;"></div>
This is my
propertylisting.js file that I copied form the working cshtml file:
- $(document).ready(function () {
- $('#PropertyTable').jtable(
- {
- title: 'Property Listing',
- paging: true,
- pageSize: 5, // This is the default value
- sorting: true, //Enable sorting
- defaultSorting: 'PropName ASC', //Sort by Name by default
- dialogShowEffect: 'blind',
- actions: {
- ...list of actions
- },
- fields: {
- PropertyId: {
- key: true,
- create: false,
- edit: false,
- list: false
- },
- PropName: {
- title: 'Name',
- width: '15%',
- inputClass: 'validate[required]'
- }
- ...Continued field list
- });
- //Load property listings into view
- $('#PropertyTable').jtable('load');
- });