1) the below code i could write in my view to download any js or cs file at client side
<script type="text/javascript" src="~/Scripts/myScriptFile.js"></script>
OR
#Scripts.Render("~/Scripts/myScriptFile.js")
OR
<script type="text/javascript" src="#Url.Content("~/Scripts/myScriptFile.js")"></script>
then why we need to write my js code inside script section like below one?
#section Scripts{
<script type="text/javascript">
$(function () {
$("#submit1").click(function () {
alert("button");
});
});
</script>
}
2) what is the difference between the below two way to include js/css file in view ?
#Scripts.Render("~/Scripts/myScriptFile.js")
OR
<script type="text/javascript" src="#Url.Content("~/Scripts/myScriptFile.js")"></script>
Each approach will get you the same end result. In my experience, I find the approach to be more flexible and scalable as far as code maintenance goes. I'm not a fan of rendering HTML code through helpers for this reason. I hope this helps.
Related
I'm generating an input tag with Java to upload videos directly from the browser, with the Cloudinary API, which works fine with small videos, but it doesn't work with a 50 MB one.
This is the code generating the input tag:
String html = cloudinary.uploader().imageUploadTag("file", options, htmlOptions);
Map options = ObjectUtils.asMap("resource_type", "video");
options.put("callback", "/cloudinary_cors.html");
options.put("eager", eager);
options.put("eager_async", true);
options.put("tags", videoTags);
options.put("use_filename", true);
Map htmlOptions = ObjectUtils.asMap();
htmlOptions.put("id", "videoInput");
htmlOptions.put("class", "upload");
That's an example of the input tag generated:
<input type="file" name="file"
data-url="https://api.cloudinary.com/v1_1/rentalwebs/video/upload"
data-form-data="{"eager":"c_scale,h_720,w_1280","signature":"xxxfb0c461dxxx",
"api_key":"xxx1647231xxx","eager_async":true,
"callback":"/cloudinary_cors.html","tags":"Demo Website,1,Villa Demo 2",
"use_filename":true,"timestamp":"1548357724"}"
data-cloudinary-field="file" class="cloudinary-fileupload upload" id="videoInput">
And finally, those are the .js scripts attached to the page with the input tag:
<script th:src="#{/js/jquery.ui.widget.js}" type='text/javascript'></script>
<script th:src="#{/js/load-image.all.min.js}" type='text/javascript'></script>
<script th:src="#{/js/canvas-to-blob.min.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.iframe-transport.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.fileupload.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.fileupload-process.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.fileupload-image.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.fileupload-validate.js}" type='text/javascript'></script>
<script th:src="#{/js/jquery.cloudinary.js}" type='text/javascript'></script>
$(document).ready(function() {
if($.fn.cloudinary_fileupload !== undefined) {
$("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();
}
});
I may be missing something, which I've been unable to find. There is some more code, dealing with the uploading process and the result, but I guess the problem occurs before, among the code I have attached at this question.
It looks like you just need to add the parameter chunk_size to your options map in Java. This should pass the chunk_size to blueimp which the javascript cloudinary_fileupload is built on.
I would add a chunk size of 20 MB, e.g. options.put("chunk_size", 20000000);
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
In my shared layout I would like to have a "scripts" section to stuff it with all the scripts needed for page functionality.
Layout.cshtml
<html>
<head>
<title>Test</title>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.js")" type="text/javascript"> </script>
#RenderSection("Scripts", required: false)
</head>
<body>
#RenderBody()
</body>
</html>
So, my view loads a specific javascript, and I want it to be in "scripts" section, and it's working.
Index.cshtml
#model PlatformaPu.Areas.Inventura.Models.Home.Index
#section Scripts {
<script src="#Url.Content("~/Areas/Inventura/Scripts/Home/Index.js")" type="text/javascript"></script>
}
{CONTENT REMOVED FOR BREVITY}
#section Footer {
#Html.Partial("~/Views/Shared/_AppSelector.cshtml", Model.AppSelector)
}
Finally, my view renders a partial and I have a javascript that this partial loads.
_AppSelector.cshtml
#model PlatformaPu.Models.Shared._AppSelector
#section Scripts {
<script src="#Url.Content("~/Scripts/Shared/_AppSelector.js")" type="text/javascript"></script>
}
{CONTENT REMOVED FOR BREVITY}
...and this is NOT working - javascript tag is NOT rendered in "scripts" section
How can I do this?
As discussed in this question, it is not possible to use sections in a partial view:
Sections don't work in partial views and that's by design. You may use some custom helpers to achieve similar behavior, but honestly it's the view's responsibility to include the necessary scripts, not the partial's responsibility. I would recommend you using the #scripts section of the main view to do that and not have the partials worry about scripts.
You should add the script reference to the main view that references the partial.
This is my first answer!
I've being working with webforms for years and now i'm dealing with MVC 5. Bit hard.
Perhaps is the wrong solution, but works :)
In Layout.cshtml. add second "ScriptsPartial" section
#RenderSection("ScriptsPartial", required: false)
In Index.cshtml, add ", new ViewDataDictionary(ViewData) { { "ViewPage", this } }"
#section Footer {
#Html.Partial("~/Views/Shared/_AppSelector.cshtml", Model.AppSelector, new ViewDataDictionary(ViewData) { { "ViewPage", this } })
}
In _AppSelector.cshtml, remove this
#section Scripts {
<script src="#Url.Content("~/Scripts/Shared/_AppSelector.js")" type="text/javascript"></script>
}
In _AppSelector.cshtml, add this in any place
#{
if (ViewData.ContainsKey("ViewPage"))
{
System.Web.Mvc.WebViewPage viewPage = (System.Web.Mvc.WebViewPage)ViewData["ViewPage"];
viewPage.DefineSection("ScriptsPartial", () =>
{
// viewPage.Write(Scripts.Render("~/AppSelector/Scripts")); // If you use a Bundle
viewPage.WriteLiteral("<script src=\"" + Url.Content("~/Scripts/Shared/_AppSelector.js") + "\" type=\"text/javascript\"></script>");
});
}
}
Just "send" the View to the PartialView (no Parent property like in WebForms?) and use it to add content to "ScriptsPartial" section.
"ScriptsPartial" is needed because DefineSection throws an error "section already defined: Scripts"
So, no more than one PartialView can use "ScriptsPartial" section... not so good solution.
Best regards,
Paco Ferre
I want to use a simple Sencha Touch keypad plugin.
The plugin code can be found over here.
The keypad can be created in an html file under tags as follows:
<script>
Ext.setup({
onReady: function () {
var basic = new Ext.ux.Keypad();
basic.render('keypad');
}
});
</script>
<div id="keypad"/>
Alternatively, it can be used in a Sencha container as follows too:
...
items:[
{
xtype: 'keypad'
}
]
However, I am not able to get it to work the latter way. I'm new to Sencha and I think I'm not placing the files at the right places or not including them properly. I have already included the following in my index.html:
<script type="text/javascript" charset="utf-8" src="js/sencha-touch-1.1.1/sencha-touch.js"></script>
<link rel="stylesheet" type="text/css" href="js/sencha-touch-1.1.1/resources/css/sencha-touch.css">
<script src="js/Keypad.js" type="text/javascript" charset="utf-8"></script>
Can someone let me know what modifications are necessary in which files so that I can use the keypad plugin directly in a container?
in your app.js file you need to set path for the plugin folder in the loader...
put the ux (plugin)folder where your app.js is located...
in app.js set the following
Ext.Loader.setPath('Ext.ux', 'ux');
On the view where you are using the numpad you need to specify a
requires: ['Ext.ux.NumPad' ...] //All plugin related files
Also ensure that the CSS files are in the proper location...
Hope it helps...
I have a website that is rendering a prototype based calender on 90% of the pages. I'm also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don't play nicely and a lot of the solutions I've tried such as NoConflict hasn't worked for me I still get the "not defined" errors in firebug all over the place. I'm wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I've considered switching my Prototype code with JQuery but I've yet to see a better JQuery solution for this particular calendar plugin that I'm using.
Use a proper structure for noConflict.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("#someelement").uploadify();
});
</script>
If this doesn't answer your question, please provide more(some) code.
Edit for comments:
Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
</script>
sample js file:
(function($){
// since we passed a reference to jQuery to this anonymous
// function and accepted it as a parameter named "$", we can
// safely use "$"
$("#target").uploadify();
})(jQuery);
If you need a document ready, you can do it this way:
jQuery(document).ready(function($) {
$("#target").uploadify();
});