I need to use Kendo MVC helper Razor code in template as listed below:
<script id="some-reusable-control" type="text/x-kendo-template">
#(Html.Kendo().Window()
.Name("details-window"))
</script>
But the problem is rendered HTML+JS contains a # (sharp symbol) that is rendered as part of #= # syntax inside template. So I getting 'parse error'.
<div id="details-window" style="display:none"></div><script>
jQuery(function(){jQuery("#details-window
").kendoWindow({animation:false,modal:true,draggable:true /*, etc */ });});
</script>
Could anyone please provide me a solution of how to use Kendo helpers in templates.
To use Kendo UI Widgets as content for a template you could use the ToClientTemplate method.
e.g.
<script id="some-reusable-control" type="text/x-kendo-template">
#(Html.Kendo().Window()
.Name("details-window")
.ToClientTemplate())
</script>
Related
Thank you in advance
I am generating PDF with barryvdh/laravel-dompdf laravel library, i am able to add dynamic code to add in PDF but how to add javascript or jquery code
I tried like this
$pdf = PDF::loadView('invoice', compact('invoiceDetails'));
$pdf->setOptions(['enable_javascript', true])->setOptions(['javascript-delay', 13500])->save(public_path('invoice.pdf'));
invoice.blade.php looks like this (Just adding small code)
<h2 class="h2">Summary<span id="demo_span"></span> </h2>
<script type="text/javascript">
document.getElementById('demo_span').innerHTML ='THIS IS FOR AN EXAMPLE';
</script>
So the output would add text "THIS IS FOR AN EXAMPLE" where ID is demo_span
Firstly,
You have to set it in the package settings. Publish the config and change
it there.
To make it work, you need to use this JS bloc inside your PDF Blade :
<script type="text/javascript"> try { this.print(); } catch (e) { window.onload = window.print; } </script>
My Scenerios:
I am using grails remoteFunction which is rendering template. I have a slider on the render template which is using some Jquery methods. Previously I have kept js within this template but the problem is with performance. Everytime the ajax loads the jquery classes which is causing the performance issues.
Is there a way to get the parent resource by templates after rendering thru Ajax ?
Inside index.gsp page:
<g:if test="${action=="individual"}">
<g:render template="individual" />
</g:if>
<g:if test="${action=="project"}">
<g:render template="project" />
</g:if>
<asset:javascript src="bootstrap/jquery-1.10.2.js"></asset:javascript>
<asset:javascript src="bootstrap/bootstrap-slider.js"></asset:javascript>
<asset:javascript src="resource_utilization/slider.js"></asset:javascript>
<asset:javascript src="resource_utilization/resource-utilization.js"></asset:javascript>
<asset:javascript src="jquery.blockUI.js"></asset:javascript>
In controller:
render template:"individual"
Please read this link. When you render template inside parent then your jquery will not work. For that to work you have to reactivate the js resource.
I have done the following. In parent gsp load all the resources and add one method to initialize your slider.
<script type="text/javascript">
function refreshUI () {
// your slider initialization code goes here
};
</script>
In template at the end just call the parent function.
<script>
refreshUI();
</script>
This will refresh your UI and everything will work fine.
I want to implement ckeditor in laravel 5. I have already installed IvoryCKEditorBundle. but for implementation the docs says to register a new form field type called ckeditor that extends the textarea.
How should I do that?
You shouldn't need a bundle to use CKEditor - you can download the whole package of js files from the ckeditor website. Once you have it, place the folder containing all the downloaded files inside of your js folder
In your view you can now reference the ckeditor.js file:
{{ HTML::script('assets/js/plugins/ckeditor/ckeditor.js') }}
Next include a short ckeditor script, which can include custom configuration (edit config in the js/plugins/ckeditor folder):
<script type="text/javascript">
CKEDITOR.replace( 'messageArea',
{
customConfig : 'config.js',
toolbar : 'simple'
})
</script>
add .ckeditor as a class in your textarea:
<textarea id="messageArea" name="messageArea" rows="7" class="form-control ckeditor" placeholder="Write your message.."></textarea>
if you are posting your content using ajax, use something like this to get the textarea value:
var message = CKEDITOR.instances.messageArea.getData();
Follow this you can do it by 1 minute.
https://github.com/UniSharp/laravel-ckeditor
Thanks.
You can get resources from //cdn.ckeditor.com/4.14.0/standard/ckeditor.js
Download from here and put /public/ckeditor/
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
or If you want to use CDN then above code would be as follow:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
I am trying to implement an MVC3 DatePicker but having trouble. I have the following code:
<script type="text/javascript">
/// <reference path="jquery-1.5.1.js" />/// <reference path="jquery-ui-1.8.11.js" />
$(document).ready(function () { $('.date').datepicker({dateFormat: "dd/mm/yy"});});
</script>
<div>
#Html.TextBox("SRRDate", Model.SRRDate.ToString(), new { #class = "date" })
Start Date
</div>
However, I am getting an "Microsoft JScript runtime error: Object doesn't support this property or method" in jquery-1.5.1-min.js
Any ideas?
Are you referencing the jQuery script and a jQuery UI script that contains the datepicker plugin? Both script references should appear before your block of code.
The /// <reference path="jquery-1.5.1.js" /> lines are references for providing intellisense for JavaScript and should go in the relevant script i.e. in this case, this should reference the .vsdoc version of the jQuery script and go at the top of the jQuery script file.
In summary, the layout should be
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.11.js"></script>
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({dateFormat: "dd/mm/yy"});});
</script>
#Russ....thanks for the assistance. I found the issue. I had a Telerik scritp Registrar which was included in the _Layout.cshtml. That was causing the error. I imagine the Telerik js files are old. When I look at their documentation, their code is using MVC2 style
I'm using tinymce jquery plugin and trying to access the api after initializing an instance of tinymce over a textarea.
In this example, I have a hide button, which when clicked on is supposed to hide the tinymce editor, but instead I get an error.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div><textarea id="textEditor" class="tinymce" disabled="disabled"></textarea></div>
<input type ="button" id="hide" value="Hide tinymce">
</body>
</html>
$(document).ready(function(){
//textEditor
$("#textEditor")
.tinymce({
// Location of TinyMCE script
script_url : 'js/tinymce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,",
theme_advanced_resizing : false
})
//... see below ...//
});
Update: I have 2 versions now, one that works by wrapping the $("#textEditor").tinymce().hide(); line in a click function, and one that gives me tinyMCE not defined with just the line itself.
Works:
$("#hide").click(function(){
$("#textEditor").tinymce().hide();
})
Doesn't work:
$("#textEditor").tinymce().hide(); //error tinyMCE is not defined
You could try
tinymce.get("textEditor").hide();
To verify if you are useing the correct tinymce id can alert all tinymce ids present at your page using
for (var i = 0; i < tinymce.editors.length; i++) {
alert(tinymce.editors[i].id);
}
EDIT:
This:
/** Option Block A error **/
// $("#textEditor").tinymce().hide(); //error tinyMCE is not defined
/** Option Block A error **/
does not work because it will get called before the tinymce editor is initialized. At this point there is no tinymce.get("textEditor").
I think that the path to your jquery plugin is not correct, because, the $.tinymce() method is provided there. If the file is not to be found, so is this method.
Also you should ensure that the path specified inside the *script_url* field is valid, as the plugin will try to load it on the fly.