I want to add below codes in editor.
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").selectbox();
});
</script>
When will I include this file in my editor?
From volition forum.
you can add some Javascript into your template_###.htm file (via the
Design > File Editor page), typically on a new line immediately
following the tag.
Take a look on this video, for more detail info.
Related
I want to add some additional option to my ReDoc. For current implementation I am using json file that is generated from Swagger, and this is added in html page. Example how this is done:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
I use this as referent documentation: https://github.com/Rebilly/ReDoc
How can I add option object in tag and not use ReDoc object? And how can I use vendor extension e.g. x-logo?
In documentation this is set via json file, but my json file is auto generate from Swagger.
You just place the options after the spec-url in the redoc tag like this:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json' YOUR_OPTIONS_HERE></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
in this example on ReDoc repository you can verify it (line 22 at this moment):
https://github.com/Rebilly/ReDoc/blob/master/config/docker/index.tpl.html#L22
Important:
Remember to "kebab-casing the ReDoc options", as an example if your options are:
hideDownloadButton noAutoAuth disableSearch
YOUR_OPTIONS_HERE
should be (after kebab-casing them):
hide-download-button no-auto-auth disable-search
Your body with those options becomes like this:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json' hide-download-button no-auto-auth disable-search></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
Hope it will be usefull to you.
ReDoc has advanced initialization via Redoc.init so you can download the spec manually and add some postprocessing (e.g. add an x-logo).
You can pass ReDoc options as the second argument to Redoc.init:
<body>
<div id="redoc"></div>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
<script>
fetch('http://petstore.swagger.io/v2/swagger.json')
.then(res => res.json())
.then(spec => {
spec.info['x-logo'] = { url: "link/to/image.png" };
Redoc.init(spec, {
// options go here (e.g. pathInMiddlePanel)
}, document.getElementById('redoc'));
});
</body>
NOTE: This requires Fetch API to be available in browsers so it won't work in IE11.
You can place your options next to spec-url.
Be sure that the version of Redoc you are using, have options you want to use, you can check it by going to the specific version. github.com/Redocly/redoc/tree/vx.x.x.
As a side note features lazy-rendering in available till v1.22.3.
https://github.com/Redocly/redoc#redoc-options-object
You can use all of the following options with standalone version on tag by kebab-casing them, e.g. scrollYOffset becomes scroll-y-offset and expandResponses becomes expand-responses.
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
In Bower, how do I get and continue to update a custom build of jQuery UI? Let's say I only need components for Core, Widget, Mouse, Position, Sortable, and Accordion in jQuery UI? I rather not download the entire jQuery UI library.
To give a practical example of a possible approach and to answer to Egg's comment here's a way to do it.
Just bower install the whole thing as suggested by Sindre and include only the scripts that you need in the html.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
This will already work and reduce significantly the file size of the libraries downloaded by the user when using your app or website. Here is a post about this straight from the horse's mouth.
To further increase download speed you can then create your own bundle in your preferred way, maybe using Grunt usemin or whatever else method you fancy to get to this kind of html:
<script src="scripts/bundle.min.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
You could have your own fork, but then you would need to keep that up to date too. Just let it download the whole thing and only use the pieces you need, I don't see the problem with that.
I want to include a javascript reference like:
<script src="#Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>
If I have a Razor View, what is the proper way to include this without having to add it to the Layout (I only need it in a single specific View, not all of them)
In aspx, we could use content place holders.. I found older examples using aspx in mvc but not Razor view..
Depending how you want to implement it (if there was a specific location you wanted the scripts) you could implement a #section within your _Layout which would enable you to add additional scripts from the view itself, while still retaining structure. e.g.
_Layout
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts",false/*required*/)
</head>
<body>
#RenderBody()
</body>
</html>
View
#model MyNamespace.ViewModels.WhateverViewModel
#section Scripts
{
<script src="#Url.Content("~/Scripts/jqueryFoo.js")"></script>
}
Otherwise, what you have is fine. If you don't mind it being "inline" with the view that was output, you can place the <script> declaration within the view.
If you are using Razor view engine then edit the _Layout.cshtml file. Move the #Scripts.Render("~/bundles/jquery") present in footer to the header section and write the javascript / jquery code as you want:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
var divLength = $('div').length;
alert(divLength);
});
</script>
You can add the script tags like how we use in the asp.net while doing client side validations like below.
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
//Your code
});
</script>
You should add datatable.js script on defer="defer"
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" defer="defer"></script>
The problem is that placing a C# variable within a JS function within a #Section produces incorrect javascript (in MVC 4 only).
In a JS function in MVC 3, everything executes as expected.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
Take this exact same code and place it in an MVC4 app and you will get malformed JS.
The HTML on the page will actually render the following:
<script type="text/javascript">
$(function () {
alert(12/27/2011 11:04:04 AM);
and the html will emit
); }
Note the closing script tag is not produced.
It appears the closing curly brace in the JS function is confused the be the closing curly brace in Razor.
Note that I am also declaring a RenderSection("test",false") in my _Layout.cshtml file.
Slightly old reply, but I was experiencing the same issue, soI have submitted a feedback report on Microsoft.Connect hopefully it should get sorted before full release.
https://connect.microsoft.com/VisualStudio/feedback/details/720079/mvc-4-javascript-in-section-issue
I know have been a wile since the question was asked, but you can also try something like this.
#section test {
<script type="text/javascript">
$(function () {
alert(#(DateTime.Now));
});
</script>
}
Note the "()" after the #.
Hope this help.
Sorry, I just couldn't help but chime in here... I don't see how the syntax in the initial question would actually work. When I try it in MVC3, in VS2010, it puts a green squiggly line under the "DateTime", and when you hover over that, it says "Conditional compilation is turned off". But if I surround it in quotes, it does work, as in:
#section test {
<script type="text/javascript">
$(function () {
alert("#DateTime.Now");
});
</script>
}
And then when I run it (F5) it displays the JavaScript alert as expected, and when I view source it renders:
<script type="text/javascript">
$(function () {
alert("07/09/2012 10:41:26");
});
</script>
What I ended up doing for now was emitting the closing JS func in #Html.Raw().
Since this is so easy to recreate, I'm going to submit this as a bug to Microsoft.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
#(Html.Raw("});"))
</script>
}
I've seen problems like this. Wrap your alert statement in <text></text> tags
Definitely a bug. I prefer this workaround over the one you posted. For some reason, other razor elements seem to interpret the brackets correctly, so I simply wrap the script content in another set of braces.
#section test {
if (true) {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
}