Plone 3 : Overriding the default Javascript files - javascript

I am using Plone 3 and currently trying to override one of the default javascript files i.e. table_sorter.js.
Under the browser directory of my product, I created a directory "javascripts" (just to keep things organized), then registered the directory as a ressource, in configure.zcml:
<browser:resourceDirectory
name="myproduct.javascripts"
directory="javascripts"
layer=".interfaces.IThemeSpecific" />
Where "myproduct" is self explanatory.
Then in jssregistry.xml, I registered and ordered the javascript files:
<javascript id="++resource++myproduct.javascripts/table_sorter.js"
enabled="True"
cookable="False"
inline="False"
insert-after="jquery.js" />
Where table_sorter.js is the name of the javascript file that I need to override.
The reason I need to override the file is because the default has no way of telling the user whether a table is sortable or not until it is clicked on. I need to include icons on the table header by default.
I have followed the above steps but it does not seem to work. I have no idea where I'm going wrong. Any help will be highly appreciated.

You are missing the generic setup import step. Add a file skins.xml to your gs profile with this code:
<?xml version="1.0"?>
<object name="portal_skins" allow_any="False" cookie_persistence="False">
<object name="plonetheme_mytheme_js"
meta_type="Filesystem Directory View"
directory="your.product:skins/plonetheme_mytheme_js"/>
<skin-path name="*">
<layer name="plonetheme_mytheme_js"
insert-after="custom"/>
</skin-path>
</object>
After that, rembember to reinstall your product in order to apply your new gs step
Note: I'm giving another answer simply because code in comments isn't readable. Look at the #Martijn Pierters 's answer (and comments) for the initial part.

You are not overriding the original JavaScript file, only adding a new one.
You can do two different things here:
Remove the original table_sorter.js from portal_javascript:
<javascript id="table_sorter.js" remove="true" />
Because the original table_sorter.js file is server through a skin layer, you can put a new file with the same name in your own skin layer to override the original.

Considering that you have already placed your customised javascript file into your static directory, do as follows.
In file "your/app/profiles/default/jsregistry.xml"
<?xml version="1.0"?>
<object name="portal_javascripts">
<javascript id="table_sorter.js" remove="True" enabled="False" />
<javascript cacheable="True" compression="none" cookable="True"
enabled="True" expression=""
id="++resource++your.app/path/to/customised/script/table_sorter.js" inline="False"/>
</object>
Modify the attributes as you wish. :)

Related

Passing/exposing VXML Application root document variables to JSP

I need to have variables that are defined in my VXML application root document, which other documents modify, available to the JSP/EL pages. The idea here is that based on the value of these variable I can add logic to the JSP to render different blocks of VXML back to the IVR browser.
What I have tried so far does not generate any errors. It simply does not render the expected block of VXML code within the EL. My guess is that I am not de-referencing them correctly in EL.
Below is some of what I have tried.
root.vxml doc has
..
<var name="promptRetries" expr="''" />
...
start.jsp:
<vxml version="2.1" xmlns="http://www.w3.org/2001/vxml" application="/root.vxml" >
....
<assign name="application.promptRetries" expr="'3'" />
.....
<block>
<submit next="${pageContext.request.contextPath}/nextdoc.jsp" />
</block>
nextdoc.jsp
<vxml version="2.1" xmlns="http://www.w3.org/2001/vxml" application="/root.xml" >
....
<!-- at this point I can print and see the value of 3 for promptRetries -->
<!-- How can I expose this to JSP to accomplish something like the code below
I have used .equals() and other forms in the EL expression with no luck.
-->
<c:if test="${(application.promptRetries eq 1)} ">
<!-- Setting prompts for 1 retry -->
<catch event="noinput undefined" count="1" >
<audio expr="curPrompt2"/>
<log expr="buildLogStr(ibmCallId, documentName,frmName ,blkName,
'event=noinput count=1 reprompt', '')" />
</catch>
</c:if>
...
....
When developing VoiceXML applications in JSP, you need to be aware that there are two execution spaces. First, the Java server that generates the VoiceXML. Second, the VoiceXML Browser that executes it.
You already have an example of passing data from JSP to VoiceXML with the ${variable_name} syntax. To pass data from VoiceXML to JSP, you need to explicitly list the variables to send in the submit element:
<submit next="${pageContext.request.contextPath}/nextdoc.jsp" namelist="promptRetries"/>
And then in your second JSP page, use
request.getParameter("promptRetries")
to access the variable sent from the browser.

How can I adjust the .init event for TinyMCE in EpiServer 8.0?

We need to get to the .init event for TinyMCE in the CMS to be able to adjust some of the settings. How can we do this? Here is an example of something we'd like to be able to perform.
tinymce.init({
some_property : 'do something'
});
This is so we can adjust content filtering in TinyMCE. My understanding is that this version of EpiServer uses TinyMCE 3.9.3. Thanks for your help.
You could have your custom JavaScript execute whenever the CMS UI is loaded by adding something like the following to your module.config file in the site root:
<?xml version="1.0" encoding="utf-8"?>
<module>
<clientResources>
<add name="tinymce.custominit" path="/Path/To/Script/YourScriptFile.js" resourceType="Script" />
</clientResources>
<clientModule>
<moduleDependencies>
<add dependency="CMS" type="RunAfter" />
</moduleDependencies>
<requiredResources>
<add name="tinymce.custominit" />
</requiredResources>
</clientModule>
</module>
In YourScriptFile.js you can put whatever script you need to wire up TinyMCE events.
Your other option would be to create a plugin for TinyMCE, to allow your custom initialization code to be enabled/disabled for different Episerver properties.
There is a section about creating an implementation of IDynamicConfigurationOptions in the EPiServer documentation specific for TinyMCE. You have to create a class that implements IDynamicConfigurationOptions and in the GetConfigurationOptions() method you can return your data in the dictionary.

How to pass a value in src="#url.content" using javascript or jquery

<script>
var Details = function (Id, username, Empname, UserType, Address, Gender, Mob, image) {
$("#hiddenEmployeeId").val(Id);
$("#EditModal").modal("show");
$("#susertype").html(UserType);
$("#saddress").html(Address);
$("#sgender").html(Gender);
$("#smob").html(Mob);
$("#suname").html(Empname);
$("#sename").html(username);
}
</script>
Getting value from from a image variable form above that script
<img src="#Url.content("")" />
i have to place in this img
give class or Id to img as below
<img class="img" src="#Url.content("")" />
and than set attribute value using class or ID as below
$(".img").attr("src","xyz");
For this example i have used class you can also use ID for the same
you can not use javascript variable directly. so you have to manage your image path like below.
<script>
var Details = function (Id, username, Empname, UserType, Address, Gender, Mob, image) {
$("#hiddenEmployeeId").val(Id);
$("#EditModal").modal("show");
$("#susertype").html(UserType);
$("#saddress").html(Address);
$("#sgender").html(Gender);
$("#smob").html(Mob);
$("#suname").html(Empname);
$("#sename").html(username);
$("#image").attr("src",#Url.content("~/")image);
}
</script>
<img id="image" />
I kind of have the similar problem you're facing: I have JavaScript code that runs after page loads to bring a list of items, and each might have a thumbnail which is stored under wwwroot (asp.net core 2.0 speaking).
I can't just build <a href="THE_PATH" download /> whose path is coming from the JavaScript code because for security reasons on some modern browsers, i.e, you will get an error Not allowed to load local resource.
Ideally you (wish you) can use <a href="#Url.Content("THE_PATH")" /> to get the content from the Server and the problem solved. But you can't inject the PATH into #Url.Content() because #Url.Content() executes first on the server side and it would be too late when you inject the path from the JavaScript code.
Option 1
Store the image/thumbnail as a record in the database with an identifier (GUID works the best), and on the page build a link that corresponds an Controller and an Action that fetches the image by id and returns its content as file result, i.e., return File();.
Option 2 (with ASP.NET Core 2.0)
Store the image/thumbnail physically in your web root folder, i.e., wwwroot/images and enable static file by putting app.UseStaticFiles() on the Configure() method in Startup.cs.
Then you can build your image with your JavaScript variable like
<img src="{{ SOME_JS_VARIABLE_THAT_HOLDS_RELATIVE_PATH }}" />
The relative path might look like something like /uploads/2018/1/1/pic1.jpg, without the content root.

Linking to javascript & CSS using client resource Management API

I am looking to integrate ”lightbox2” (http://lokeshdhakar.com/projects/ligh...) into a DNN module I am developing, this involves using 4x js and css files in the dnn project which come with Lightbox2.
I have followed the resource client management API guide found here (http://www.dotnetnuke.com/Resources/Wiki/Page/Client-Resource-Management-API.aspx) to try and set this up in my module. Unfortunately when I run the module on my local machine I keep getting an error:
Error: TestModule is currently unavailable. DotNetNuke.Services.Exceptions.ModuleLoadException: The server tag is not well formed. ---> System.Web.HttpParseException: The server tag is not well formed. ---> System.Web.HttpException: The server tag is not well formed. at System.Web.UI.TemplateParser.ProcessError(String message) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) --- End of inner exception stack trace --- at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseFile(String physicalPath, VirtualPath virtualPath) at System.Web.UI.TemplateParser.Parse() at System.Web.Compilation.BaseTemplateBuildProvider.get_CodeCompilerType() at System.Web.Compilation.BuildProvider.GetCompilerTypeFromBuildProvider(BuildProvider buildProvider) at System.Web.Compilation.BuildProvidersCompiler.ProcessBuildProviders() at System.Web.Compilation.BuildProvidersCompiler.PerformBuild() at System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath) at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResult(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean ensureIsUpToDate) at System.Web.UI.TemplateControl.LoadControl(VirtualPath virtualPath) at DotNetNuke.UI.Modules.WebFormsModuleControlFactory.CreateModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleControlFactory.LoadModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleHost.LoadModuleControl() --- End of inner exception stack trace ---
I am working in the ascx page (not the code) and my script so far is:
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:DnnJsInclude runat="server" FilePath="FilePath="~/DesktopModules/TestModule/js/jquery-1.7.2.min.js" PathNameAlias="SkinPath" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/TestModule/js/jquery-1.7.2.min.js" PathNameAlias="SkinPath" />
<dnn:DnncssInclude runat="server" FilePath="~/DesktopModules/TestModule/css/lightbox.css" PathNameAlias="SkinPath" />
<dnn:DnncssInclude runat="server" FilePath="~/DesktopModules/TestModule/css/screen.css" PathNameAlias="SkinPath" />
I have had a search around a few forums for an answer but there isnt much help available around this. One similar question is here (How to add a Lightbox to a custom DotNetNuke module) but doesn't go into much detail for a javascript novice such as myself
Would be very grateful if someone could point me in the right direction here
Many Thanks
Your first include line repeats: FilePath="FilePath="~
Delete the second FilePath="
Edits after your comment:
You're loading jQuery twice so I'm assuming one of those is supposed to be loading your lightbox plugin (these are your first two lines once the first one is corrected):
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/TestModule/js/jquery-1.7.2.min.js" PathNameAlias="SkinPath" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/TestModule/js/jquery-1.7.2.min.js" PathNameAlias="SkinPath" />
Also, I've not tried loading it that way but I have a feeling loading jQuery like this might load it twice (and likely two different versions). Try using:
DotNetNuke.Framework.jQuery.RequestRegistration();
instead.
I use this stuff in my current project and it works fine. The only thing that I can see that's different between yours and mine is that I don't use the PathNameAlias="SkinPath" attribute.
A good way of cross checking is to open the source code for a page that contains your module, and search for the javascript file or css file by name. If it's there, check that the path is right, if it's not there, then you have a problem.
When I write my own scripts, I generally start with alert('here') just to make sure that they are being included. You could temporarily add that to the start of your lightbox js file.
Mark

Register/Include javascript within RenderingTemplate

Problem description
Is it possible to register (include) javascript within RenderingTemplate? (RenderingTemplates are used to render list forms or fields)
By using
<SharePoint:RenderingTemplate ID="NewRelatedListItem" runat="server">
<Template>
<span id="part1">
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" />
...
</span>
...
</Template>
</SharePoint:RenderingTemplate>
it couldn't be done - it didn't include script at HEAD area, but...:
Source http://img62.imageshack.us/img62/9826/ss20100324092808.png
Is something wrong with my code? Althought script IS at Layouts folder and I checked with Reflector that it uses Layouts folder if Localizable='False'.
I don't want this script to be loaded with every page, but only for forms.
Any ideas on how this could be achieved?
My idea that is not working...
My first idea was to add script programmatically with <% this.Page.ClientScript.RegisterClientScriptInclude("spffa", "/_layouts/SPFormFieldAssistant.js") %>, but it is not working, as that code evaluation is happening in Render method and i read somwhere that you cannot register client scripts within Render method, but usually is done within PreRender method. Pity
My second idea that is still not working
I thought i would create custom UserControl named RegisterClientScript and there within overriden PreRender method i would add scripts i need with client script manager (this.Page.ClientScript...) but, as with SharePoint:ScriptLink, my control also is rendered as text!
my control as text http://img693.imageshack.us/img693/3738/ss20100324115826.png
How do i overcome this and where's the catch?
Looks like you are missing the runat. Try this:
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" runat="server" />
It turns out that you can directly add <script> tags to template!
<script src="/_layouts/SPFormFieldAssistant.js" type="text/javascript"></script>
Thank you for the notes however.
Sometime back I had a Similar requirement. For which I have included the script Register in the CreateChildControls method of the Field Control class.

Categories

Resources