Linking to javascript & CSS using client resource Management API - javascript

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

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.

Use multiple transfer numbers in JavaScript and vxml

I have an interesting task that I am trying to accomplish. While using VoiceXML, I'd like to have a caller call into a number, and then be transferred to number #1. If the caller is not connected (no answer) then the destination number is changed and the caller is then attempted to be connected to the second number.
I was given a little information by the support tech that stated:
The best option would be define a list of numbers in JavaScript, if the transfer is unsuccessful, pop the next of the list, and repeat the transfer (which means the 'dest' for the transfer would be a variable).
But I am not sure how to go about this, and so far, I'm unable to find any reference points to use for this. Could this be achieved by using PHP, maybe?
How can I add JavaScript to VoiceXML that would allow me to set a timeout variable on the transfer tag, and then cycle through the numbers if the caller isn't connected?
Assuming that you use a VoiceXML 2.1 compliant platform, you must use something like <transfer type="consultation" destexpr="myDestinationVariable" connecttimeout="20s" />.
However, the connecttimeout attribute cannot be a JavaScript expression, it must be a time literal. So you need to generate VoiceXML on the fly (with PHP or something else) if the time-out is not a constant.
If you can have a constant timeout, you could do something like (not tested):
<?xml version="1.0" encoding="utf-8"?>
<vxml version="2.1" xml:lang="en-US" xmlns="http://www.w3.org/2001/vxml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<var name="destinations" expr="['5555551111', '5555551112', '5555551113']" />
<var name="currentDestination" expr="destinations.shift()" />
<form id="myForm">
<transfer name="transferResult" type="consultation" cond="currentDestination!=undefined" destexpr="currentDestination"
connecttimeout="20s">
<filled>
<if cond="transferResult=='noanswer'">
<assign name="currentDestination" expr="destinations.shift()" />
<clear />
</if>
</filled>
<catch event="connection.disconnect.transfer">
<!-- transfer OK -->
</catch>
</transfer>
<block>
<!-- No more numbers to try -->
</block>
</form>
</vxml>

Change image inside web user control (setting up onmouseover programmatically)

Okay, so I'm fairly new to web development (but not programming), and am trying to figure out the best way to implement a mouse over image swap inside a user control.
I've tried several solutions to similar problems on SO already, but my problem appears to be unique to User Controls. I have a (user control) NavigationNenu with 4 (user control) NavigationItems on them, and essentially the NavigationItem is this:
<div class="div_navImage">
<asp:Image ID="navImage" runat="server" ImageUrl="<%this.DefaultImageUrl %>" CssClass="image_navImage" />
<div id="divIconText" runat="server"/>
</div>
with this code behind:
Private ReadOnly Property NavImageElementId As String
Get
Return navImage.GetUniqueIDRelativeTo(Me.Parent.Parent).ToString().Replace("$"c, "_"c)
End Get
End Property
<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property DefaultImageUrl As String
<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property HoverImageUrl As String
<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property IconText As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
navImage.Attributes.Add("onmouseover", "updateImageToHover(" + NavImageElementId + ")")
navImage.Attributes.Add("onmouseout", "updateImageToDefault(" + NavImageElementId + ")")
navImage.ImageUrl = "~\" & DefaultImageUrl
divIconText.InnerText = IconText
End Sub
and the html for the nav menu:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="NavigationMenu.ascx.vb" Inherits="[internal stuff]" %>
<%# Register Src="~/UserControls/Common/NavigationItem.ascx" TagName="navItem" TagPrefix="ucNavItem" %>
<ucNavItem:navItem ID="home" DefaultImageUrl="Resources/home_default.png" HoverImageUrl="Resources/home_hover.png" IconText="home" runat="server" />
<ucNavItem:navItem ID="ideas" DefaultImageUrl="Resources/ideas_default.png" HoverImageUrl="Resources/ideas_hover.png" IconText="ideas" runat="server" />
<ucNavItem:navItem ID="data" DefaultImageUrl="Resources/data_default.png" HoverImageUrl="Resources/data_hover.png" IconText="data" runat="server" />
<ucNavItem:navItem ID="solutions" DefaultImageUrl="Resources/solutions_default.png" HoverImageUrl="Resources/solutions_hover.png" IconText="solutions" runat="server" />
The javascript has fluctuated a bit and I don't really have a working copy right now, but the best result I was able to achieve so far was on mouse over the icon would change to the proper image, but only of the last item in the navigation menu (ie item 1 would change to the hover over icon for item 4 when moused over), so it feels like some kind of scoping or instance issue (though I'm not entirely sure that those kind of issues exist in asp.net/JS/html land).
So, is there something different that needs done when working with JS and a repeated user control? Is there some other way I should be going about what I'm attempting to achieve? I've tried a bit of jquery also, but the samples I've worked with haven't really done anything, so I'm probably setting something up incorrectly there.
Any advice to point me in the right direction?
Thanks in advance.
EDIT:
forgot to point out - the reason I'm not doing a simple swap in the page load on:
navImage.Attributes.Add("onmouseover", "updateImageToHover(" + NavImageElementId + ")")
is because I want the image to change when the text is rolled over as well, and after I implement the JS swap, I will apply the solution to the text as well (but a solution which applies to the outer div would be most welcome as well).
EDIT 2:
JS that produces bad results:
function updateImageToHover(fullName) {
var hoverImageUrl = '<%= HoverImageUrl%>';
var navImage = document.getElementById(fullName.id);
navImage.src = hoverImageUrl;
}

Plone 3 : Overriding the default Javascript files

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. :)

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