How do I add a serverSide Javascript to a theme? - xpages

According to the book "Mastering Xpages" the most powerful feature for resources in themes is to use the tag <resources> and load both clientside and serverSide stuff.
I have tried to load serverSide Javascripts but they do not load.
I can only get clientSide Javascript to load.
My theme:
<resources>
<script
target="xsp"
src="/CommonSSJS.jss"
clientSide="false"
type="text/javascript"
></script>
<script
target="xsp"
src="/xpServerSide.jss"
clientSide="false"
type="text/javascript"
></script>
<script
target="xsp"
src="/xpCGIVariables.jss"
clientSide="false"
type="text/javascript"
></script>
<script
target="xsp"
src="js/jquery-1.9.1.min.js"
clientSide="true"
type="text/javascript"
></script>
<script
target="xsp"
src="include.js"
clientSide="true"
type="text/javascript"
></script>
</resources>
I know they don't load 'cause I have a call in my framework to a function in one of them.
Please advice!

A theme gets applied during the Render Response phase. So your SSJS libraries are not available in earlier phases. So you can use the SJSS library for e.g. a button but not for logic in e.g. the beforeRenderResponse phase (for this you need to add your SSJS libraries directly to the XPage/custom control).

You can include SSJS in a theme using this code
<property mode="concat">
<name>styleClass</name>
<value>#{javascript:
var ssjsLibrary:com.ibm.xsp.resource.ScriptResource = new
com.ibm.xsp.resource.ScriptResource();
ssjsLibrary.setClientSide(false);
ssjsLibrary.setSrc("/ssIncludeMe.jss");
this.addResource(ssjsLibrary); return "";}</value>
</property>
But with the limitations, Per already wrote about.
source: http://www.iqjam.net/iqjam/iqjam.nsf/questionread.xsp?documentId=144ED5F29CB7031F802576E7005732B2&action=openDocument&SessionID=DD0UUYQPUX

Related

Bundle JS files using CDN and integrity attribute

In ASP.NET MVC 5, is it possible to use BundleColletion.UseCdn and have it render with the HTML integrity attribute? For example, is there someway to make this:
bundles.UseCdn = true;
bundles.Add(
new ScriptBundle("~/bundles/jquery", "https://code.jquery.com/jquery-3.1.1.min.js")
.Include("~/Scripts/js/jquery/jquery-3.1.1.min.js")
);
render as this?
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
Partial answer.
To add crossorigin="anonymous" attribute you can use #Scripts.RenderFormat
#Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" crossorigin=\"anonymous\"></script>", "~/bundles/jquery")
You also can include integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" part in RenderFormat, but it does not look like a good solution.
I tried this way in our ASP.NET MVC 5 project when CDN fails
#Scripts.RenderFormat("<script src='{0}' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>", "~/bundles/bootstrapJS")
And this will generate (inside developer tool),
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
And From this answer we found that there is bug if script is fail to load from CDN
So we add script manually inside the tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>(window.jQuery) || document.write('<script src="/Scripts/jquery-1.12.4.min.js"><\/script>');</script>
</head>
<body></body>
</html>
You can have it like
<script src='#Scripts.Url("~/bundles/jquery")' crossorigin="anonymous" integrity="value"> </script>

OmniFaces conditionalComment not written to HTML output

I'm using OmniFaces conditionalComment to load a javascript file for IE 6 browsers. On the webiste it says the script should be included in the page as:
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
This is not valid xml, so can't be used in the JSF xhtml files. Instead I use this:
<h:body>
<f:facet name="last">
<o:conditionalComment if="if (gte IE 6)&(lte IE 8)">
<h:outputScript library="js" name="selectivizr-min.js" target="head"/>
</o:conditionalComment>
</f:facet>
...
</h:body>
I include the script in the body part of the xhtml and put it in the facet name="last", so it is included after JQuery (I use PirmeFaces and read that's the safest way to do that). target="head" ensures that it is written to the head section of the resulting html file. The link to the script is included in the correct part of the document (after the PrimeFaces imports), but it is not surrounded by the conditional comments.
Here is the relevant part of the html (reformatted for easier reading):
<head>
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.1" />
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/omnifaces.js.xhtml?ln=omnifaces"></script>
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/styles.css.xhtml?ln=css" />
<script type="text/javascript" src="/javax.faces.resource/selectivizr-min.js.xhtml?ln=js"></script>
The last line is missing the comments (!--[if (gte IE 6)&(lte IE 8)]> ...).
What am I doing wrong? Any suggestions?
Cheers,
Dominik
This problem is two-fold:
The <f:facet name="last"> makes no sense in this context. Get rid of it. It would be ignored including any of its children. It's only valid inside <h:head> (and even then only if you're using PrimeFaces; who actually overlooked the native JSF possibility to order head resources as last).
You can't use <h:outputScript> (nor <h:outputStylesheet> inside <o:conditionalComment>, because JSF will implicitly auto-relocate it to the <head>. This is also hinted in the documentation and showcase.
Just use plain vanilla <script> (or <link rel="stylesheet">).
<o:conditionalComment if="(gte IE 6)&(lte IE 8)">
<script src="#{resource['js/selectivizr-min.js']}" />
</o:conditionalComment>
Note that I fixed the invalid if attribute value by removing the duplicated if.
Unrelated to the concrete problem: The library="js" indicates a misunderstanding of the library attribute. Carefully read What is the JSF resource library for and how should it be used? The #{resource} resolver in above answer has already been altered to use js as regular folder instead of as library.

Is it possible to have two pixastic-effected images on a single page?

Simple, but specfic question. I have a site which is using Pixastic to blur images. There are two images on a page which need to be blurred. This seems to work fine in IE (which I believe is using filters on the images) but doesn't work on other browsers (Firefox/Chrome). In those browsers it just effects the second image and the first is replaced by nothing - so I just get a rendered page with one blurry image on it instead of two.
I'm using the jQuery selector, by the way. The code I'm using is basically just this:
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.blur').pixastic('blurfast', {amount:0.2});
});
</script>
</head>
<body>
<img src="img/title1.png" title="" class="blur" />
<img src="img/title2.png" title="" class="blur" />
</body>
Does anyone know if it's possible to affect multiple images with Pixastic, and if so, how?
Thanks
As far as I can tell, what you have that should work.
Option 2. Try specifying a CSS class explicitly instead?
e.g. roughly something like:
<html>
<head>
<script type="text/javascript">
var pixastic_parseonload = true;
</script>
<script src="pixastic.core.js" type="text/javascript"></script>
<script src="invert.js" type="text/javascript"></script>
</head>
<body>
</style>
<img src="img/title1.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
<img src="img/title2.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
</body>
</html>

How to embed a javascript/jquery file in ExpressionEngine?

I need to embed jquery files in ExpressionEngine.
I have created the template js under the main site template group.
I know that the css is embedding with the following tag:
<link rel="stylesheet" href="{stylesheet=template_group/template}" type="text/css" media="screen" />
for css its {stylesheet=template_group/template}
I want to know what is the tag for embedding js files
<script src=" [-->> ?? <<--] " type="text/javascript"></script>
Just make sure that your template containing your javascript is of the "JavaScript" type, and link it using the standard path syntax:
<script src="{path="scripts/myscript"}" type="text/javascript"></script>

jQuery 1.4 no conflict with jquery ui and drupal 6

I am implementing a little survey prompter / reminder tool that is being implemented in a Drupal 6 website environment that contains various ColdFusion and static html pages. I am attempting to use jQuery 1.4.4 with Drupal's version of 1.2.6.
I am importing jQuery 1.4.4 like this:
<code>
<script type="text/javascript" src="/misc/jquery.js?7"></script>
<script type="text/javascript" src="/misc/drupal.js?7"></script>
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js?7"></script>
<script type="text/javascript" src="/sites/all/modules/poormanscron/poormanscron.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/jquery.carousel.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/jquery.superbox-min.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/swfobject.js?7"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript" src="/_inc/survey/jquery.cookie.js"></script>
<!-- this script starts with : var j144 = jQuery.noConflict() : which I believe should restore $ to the jQuery 1.2.6 instance -->
<!-- this then sets up numerous behaviors using the j144 instance -->
<script type="text/javascript" src="/_inc/survey/survey.js"></script>
</code>
Now what should (and does happen when I do not have 1.2.6 i.e., no noConflict to deal with) the user will load the page, and be asked about participating in a survey at the end of their visit. Subsequently using cookies the users behavior is somewhat monitored to detect when they leave the site (i.e., navigate to a page, or click an external link). Like I said, this all works correctly, and I have performed testing on this, when I am working on a ColdFusion script and do not have to use noConflict to allow Drupal's jQuery to co exist. Now, it does not malfunction completely with noConflict, however the entire process is very buggy and does not flow consistently.
Does anyone have any suggestions about how to go about finding where the problem is? I've made several small edits to some of the plugins being loaded after I load jQuery 1.4, and I've juggled the code
Are you sure you can't just upgrade Drupal's 1.2.6 version? It also seems like a waste of bandwidth/cpu/rainforests to be loading two separate jquery versions.
So far jQuery versions have mostly been backwards compatible. Adding features more than removing them.

Resources