jqGrid table off of DOM - asp.net-mvc-2

I am trying to get jqGrid to work off a DOM table that already exists. I am a little confused with some of the instructions to do this however... For instance, I read this on one particular help site...
http://www.secondpersonplural.ca/jqgriddocs/_2h30t8wte.htm
When he says this:
"the new release of jquery.jqGrid.js defaults to this module being enabled, so ensure that grid.tbltogrid.js and grid.tbltogrid-min.js are copied to the appropriate folder. If you do not wish to include this function, make the appropriate change to jquery.jqGrid.js."
What is he talking about?
Also, the Jquery grid download site gave me this set of instructions:
"In order to use this module you should mark the Table to Grid (in Other modules) when you download the grid. For more information refer to Download.
For Developers - this is the grid.tbltogrid.js in the src directory."
Now I had the Table to Grid module marked when I downloaded.
What would I should be doing to get this done?
What function should I be calling, currently I am calling...
(function () {
tableToGrid(".table1", {});
});
That seems a little bit wrong.
UPDATE: Added what I reference
Here are the scripts that I reference... Ignore the DataTable scripts... I will soon be removing them once I can confirm that this works.
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="~/Content/jqUIcss/jquery-ui-1.8.14.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="~/Content/jqGrid/ui.jqgrid.css" />
<script type="text/javascript" src="<%=ResolveClientUrl("~/Scripts/jquery-1.5.1.min.js")%>"></script>
<link href="../../Content/dataTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=ResolveClientUrl("~/Scripts/jqUI/jquery-ui-1.8.14.custom.min.js")%>"></script>
<script src="<%=ResolveClientUrl("~/Scripts/lib/jquery.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/lib/jquery.metadata.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/jquery.validate.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/jquery.jqGrid.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/grid.locale-en.js")%>" type="text/javascript"></script>

Assuming you did download the components correctly and included them in your application through <script> tags, all you seem to have to do is:
tableToGrid('#table_name')
where the table name is the id of the table you're trying to convert.
Edit: Note the #, whereas you used . and what seems to be a table ID. . signifies a class name.

<script src="<%=ResolveClientUrl("~/Scripts/grid.base.js")%>" type="text/javascript"> </script>
<script src="<%=ResolveClientUrl("~/Scripts/grid.tbltogrid.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/jqDnR.js")%>" type="text/javascript"></script>
Added these scripts and things seem to be fine.

Related

How to add plugin to Ionic 2 Plunker

Hi I have the following Plunker for Ionic 2.
Ionic 2 Environment
I would like to add the Angular 2 Flex Layout(link below) to this plunker so that I have access to it on the home.html. How would I go about this?
Angular Flex Layout
Many thanks in advance.
My index looks like:
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.ios.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
This specific plunker is actually pretty out of date for both angular and ionic. Unfortunately there doesn't seem to be one since 2.0 went stable let alone the 4.0 current branch.
You may get it to work with that somehow but I don't think it would be a good testing/example tool.
Update: I went ahead and got one working with blank settings. You can see it here: http://plnkr.co/edit/y8R0MF?p=info
And Here it is with Flex-Layout running
To add plugins you have to add them to the systemJs config with the path to the umd like:
'#angular/compiler': 'npm:#angular/compiler#4.1.2/bundles/compiler.umd.js',
which is a path to the unpacked version
Hope that helps!

Use Bootstrap on Vapor

I am new to web development and couldn't find a clear answer.
Is it possible to use Bootstrap in Vapor with Swift 3?
Yes, you can use Bootstrap. You will either:
Add the CDN links to your template files, i.e. .leaf files, which are in the Resources/Views/ folder, or
Download the Bootstrap files and add the CSS, JS, fonts, etc. to the Public/ folder which can be accessed by all the pages.
For the first suggestion, you could add the CDN links to your base.leaf, like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
For the second suggestion, you would place the files in here:
Then access the files like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/{CSS-FILE-NAME}">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="/{JS-FILE-NAME}"></script>
</html>

Getting a 404 when trying to run a qunit test

I'm using the trial webide and trying to run myqunittest.qunit.html from the /test-resources folder. by using the url /test-resources/myqunittest.qunit.html. However it simply returns a 404 error whenever I attempt to run it.
Is this a problem with defining the resources? I don't understand how, for example, view/Main.view.xml can be found but not anything in the test-resources folder (I've tried just creating a simple js or html file containing a single line and it still 404'd).
I've copied the page directly from the qunit help page, QUnit Testing Fundamentals, this code seems to imply it should just work without any reference to the rest of the app.
I've tried various combinations of sap.ui.localResources and data-sap-ui-resourceroots in both html files to no avail.
My folder structure is as follows:
myapp
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
myqunittest.qunit.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-noConflict="true">
</script>
<link rel="stylesheet" href="resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/sap/ui/thirdparty/qunit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/qunit-junit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/QUnitUtils.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"myapp": "./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idMain"});
var page = sap.ui.view({id:"idMain", viewName:"myapp.view.Main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In your index.html you are loading ui5 relatively to the index.html in a resources folder
so on your server there is another folder
myapp
resources
sap-ui-core.js
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
The problem is, that you are loading the core also relatively to your test-resources. You probably need to go 1 directory up.
so in myqunittest.qunit.html
change the bootstrap to
<script src="../resources/sap-ui-core.js"
Best regards,
Tobias
The SAP WebIDE adds neo-app.json to a project you create. It contains this entry:
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
This is interfering with creating my own test-resources folder (one doesn't already exist in the project), and was causing the 404 error. Removing this entry has fixed my problem.

Uploadify in Zend Framework

I use uplodify to upload files in zend.
<link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/uploadify/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '/uploadify/uploadify.swf',
'script': '/upload/upload',
'cancelImg': '/uploadify/cancel.png',
'folder': '/uploadify/uploads',
'auto': true
});
});
</script>
<input id="file_upload" name="file_upload" type="file" />
This code is in view part index.phtml.
But when i run my web application i see in my web devloper tool it shows in console
NetworkError: 404 Not Found - http://localhost/upload/uploadify.swf?preventswfcaching=1317192234400
Help me to solv this problem....
"Some of the option names have changed in v3 to be more intuitive. The 'uploader' option should now point to the php script. The 'swf' option will point to the flash file. "
http://www.uploadify.com/forums/discussion/7296/uploader-being-rewritten-in-v3.0.0/p1
part of code:
$("#gallery").uploadify({
id : jQuery(this).attr('id'),
langFile : 'http://www.static-xxx.nu/uploader/uploadifyLang_en.js',
swf : 'http://www.static-xxx.nu/uploader/uploadify.swf',
uploader : '/uploadify/galleri.php',
The path specified is wrong somewhere.
In jquery function, it is given as;
'uploader': '/uploadify/uploadify.swf',
Check from where request is going for "upload/uploadify.swf" to get a 404 error.
also, if you are using a .htaccess file, make sure the request for these files are not denied.

Relative url automatic rewrite in asp.net MVC 2

ASP.net MVC 2 does rewrite all your relative urls in the <link> tag to the full relative path, which is good but it only works for URLs written in the <link> tag only, not <script> tags or any other elements.
Create an MVC 2 web application
create any controller and a view for it
inside the view create a <link> tag like this <link href="test.xml" type="text/css"/>
run your application, navigate to the view you created and then view source
you will find that MVC has rewritten your url in tag to full url like:
<link href="../Views/Home/Text.xml" type="text/css" />
i know that this file is in the Views folder and can't be viewed due to the web.config file that blocks any requests to files there, but thats not my problem
How can i get MVC to rewrite all urls not only in the <link> tage ?
Any help would be appreciated.
This happens because your <head> tag has a runat="server" attribute (a nasty heritage from WebForms). Remove it and no rewrites will happen. Also instead of:
<link href="test.css" type="text/css" />
you should always use Url helpers when dealing with urls:
<link href="<%= Url.Content("~/test.css") %>" type="text/css" />
You should not leave automatic rewrites to happen, always use Url.Content for linking static resources.
perhaps you have already tried something like this
<head runat="server">
<link href="test.xml" type="text/css"/>
<script src="<%= ((WebFormView)this.ViewContext.View).ViewPath.Substring(1,
((WebFormView)this.ViewContext.View).ViewPath.LastIndexOf('/')) %>test1.xml" type="text/javascript"></script>
</head>
renders html as
<head>
<link href="Views/Shared/test.xml" type="text/css" />
<script src="/Views/Home/test1.xml" type="text/javascript"></script>
</head>