RE: [coldbox:10701] CSS problem

Erik, I’m sorry to say I think most people have stopped trying to help you because we can’t figure out what you’re asking and you haven’t answered many of our questions nor provided any code for us.

Can you tell us where on your server the client-specific CSS is? Is it web-accessible? If so, why can’t you simply use whatever path necessary to reference it?

I think I understand your question, but I don’t understand why it’s a problem. I’m also not convinced it has anything to do with ColdBox.

Thanks!

~Brad

The client web site consists the folder /includes (where styles are lives for the client). The layout is a shared code, so when I called the page the layout is triggered and it is using getAsset function to build up the css link in the header. I have virtual directory which called /includes which point to the shared files.

I have Interceptor that generate the list array of CSS and it looks like this:

Number 10 on this list is a client css. So if you look at the path it is the same as all others. But all ohters are taken from the shared folder and 10 is client specific. So the reason is I can not use client css because IIS virtual directory point me to the shared directory where this file does not exists

I hope I made it clear

Right, so the issue is with the code in your interceptor. It does not take into account client css file locations. We can’t help fix that because you’ve still not shown us any code. :slight_smile:

I can show the code.

Below is my interceptor.

var rc = event.getCollection(); var prc = Event.getCollection(private=true);

Event.addAssets(paths=‘uni-form.css
,includes/styles/uni-form-ie.css
,uni-form.default.css
,jquery.datepick.css
,jquery.timeentry.css
,jquery.rating.css
,jquery-ui/smoothness/jquery-ui-1.8.5.custom.css
,blueprint/print.css
,blueprint/screen.css
,jquery.min.js
,jquery-ui-1.8.5.custom.min.js
,jquery.corner.js
,PrettyPhoto/js/jquery.PrettyPhoto.js
,jquery.hoverIntent.js
,custom.js’
//,blueprint/plugins/fancy-type/screen.css
//,custom.css’
,template=‘Layout.Login.cfm’);

I’m not sure if this is confusing the issue, but I had an issue once with resolving local assets and I fixed it in my layout by setting that base href to the htmlBaseURL setting.

Bingo!

So essentially in your interceptor you would need to prepend your addAsset path with getSetting(‘htmlBaseURL’)

Just a shot in the dark. Hope it helps.

Nolan

My Layout looks like this

#getPlugin('templateHelper',true).getAssets('css')# #getPlugin('templateHelper',true).getAssets('js')#
#renderLayout('Layout.Template.Default')#

I don’t know if it is already supported or not, but if not you can easily write a request context decorator and override the addAssets() method to leave the path alone if it starts with an slash ("/"). I added that many many years ago to the renderView() method; not sure if it was left in the core or not.

Can you tell me how can I do that ?

is there are any updates on my issue?

addAssets isn’t a core method in the request context (event) object. Are you using a request decorator already? Can you share that code?

If you’re doing something like what is found at http://aarongreenlee.com/share/coldbox-resource-asset-management then you can call addAsset() separately for the client-specific files, and pass in the correct full path along with fullPathProvided=true.

Thanks!

~Brad

Well I did that. But I think the problem is I have /includes folder as a virtual directory. DO you think I need to create a separate web Site for the shared files?

Sorry, but I don’t understand what the issue is. Is the problem that the incorrect path is being output in the HTML of your page, or is the issue that your web server is not finding the files?

Can you provide us a URL to see this in action, or show us what HTML is being output in the page?

Also, I don’t see how creating a separate site would help the issue.

Thanks!

~Brad

if I do the separate site than I can show the url to the shared css and keep the client specific no change. Like I said I have virtual directory /includes and all the css are being referenced to that folder.

<link href="/includes/styles/uni-form.default.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="/includes/styles/jquery.datepick.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="/includes/styles/jquery.timeentry.css" type="text/css" rel="stylesheet" media="screen"/>

<link href="/includes/styles/jquery.rating.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="/includes/styles/customClient.css" type="text/css" rel="stylesheet" media="screen"/>

So, to be clear, the following line is returning a 404 because the file customClient.css is not in the includes/styles directory?

I suggested that you “pass in the correct full path along with fullPathProvided=true” for that file and you replied and said “Well I did that”.
Can you show us that code, because it doesn’t look like you did it.

Also, I’m still a little unclear on how you are handling your assets. You interceptor example looks as though you are using a decorator similar to the one on Aaron’s blog, however reviewing one of your earlier code samples you are referencing a “templateHelper” plugin which I am not familiar with.

I really can’t begin to tell you how to change your code when I’m not sure what libraries you’re using (You never did post your request context decorator code) but it can’t be too hard. You haven’t specified WHERE you are storing your client-specific CSS files, but where ever that is, THAT is the path you need to be setting for that asset. I don’t know any other way to describe the process to you without more information.

Thanks!

~Brad

DO you think that the virtula can cause the problem. Because cutomclient.css only exists on the client folder. And all others are referenced by virtual directory
My content decorator looks like this
/** Request Context Decorator enhances and augments the EVENT object for our ColdBox applications. */
component
name = ‘RequestContextDecorator’
extends = ‘coldbox.system.web.context.RequestContextDecorator’ {

public void function configure () {
// Prepare our data structure to
// hold and organize assets such as JavaScript/CSS
buildAssetScaffold();
return;
}

/** Allow assets to be loaded into the queue */
public void function addAsset( required string path
,string method=‘queue’
,boolean fullPathProvided = false
,string template = ‘Layout.Default.cfm’) {

// Grab the Request Context from within the Event Object
var prc = getRequestContext().getCollection(private = true);

// Organize by the file extention
var type = listLast(path, ‘.’);

// Replace the following with the relative directories from your
// web root
if (!fullPathProvided)
path = (type == ‘css’)
? ‘/includes/styles/’ & path
: ‘/includes/javascript/’ & path;

// Prevent duplicates
if (!structKeyExists(prc.assets[method],’#template#’) )
structInsert(prc.assets[method],’#template#’,{js = [], css = []},“true”);
// TODO: add functionality to make the type inserts dynamic , so probably need to check for sub-struct existence

if (!arrayContains(prc.assets[method][’#template#’][type], path))
arrayAppend(prc.assets[method][’#template#’][type], path);

return;
}
/** Allow multiple assets to be loaded into the queue */
public void function addAssets(required string paths
,string method = ‘queue’
,boolean fullPathProvided = false
,string template = ‘Layout.Default.cfm’) {

var list = listToArray(paths, ‘,’);

// Add each path individually
var n = arraylen(list);
var i = 0;
for (i=1; i <= n; i++)
addAsset(path=trim(list[i])
,method=method
,fullPathProvided=fullPathProvided
,template=template);

return;
}

/** Allow assets to be returned from the queue */
public array function getAssets(required string type
,string method = ‘queue’
,string template = ‘Layout.Default.cfm’) {

var prc = getRequestContext().getCollection(private = true);
var pulledAssets = [];
if (structKeyExists(prc.assets[method][template],’#type#’) )
pulledAssets = prc.assets[method][’#template#’][type];
return pulledAssets;
}

/** Allow assets to be returned from the queue */
public void function clearAssets() {
buildAssetScaffold();
return; ;
}

// Private ----------------------------------------------------------------------

/** Used to help construct the foundation to manage assets. */
private void function buildAssetScaffold() {
var prc = getRequestContext().getCollection(private = true);

prc.assets = {};

// The queue allows the assets to be include by template into the page.
prc.assets.queue = {};
// The queue allows the assets to be include by path into the page.
prc.assets.queue = { template = { js = [], css = [] } };
// Includes allow the content of an asset to be injected into the page.
prc.assets.include.js = [];

return;
}
}

My template helper looks like this.

var rc = event.getCollection(); var prc = Event.getCollection(private=true);

Event.addAssets(paths=’
customClient.css’
);

Event.addAssets(paths=’
http://xxx.xxxxxxx.com/includes/styles/customClient.css’,
template = ‘Layout.Login.cfm’,
fullPathProvided = true
);

Thank you for showing us some more code.

> DO you think that the virtula can cause the problem.

I don’t think the mere existance of the virtual directory is causing your problem. I think the problem is that you are sending your browser to a location that doens’t exist.

Ok, for starters, let’s look at this code:

> My template helper looks like this.

>

In an earlier post, you are getting templateHelper as a plugin with getPlugin(‘templateHelper’,true), but your cfc extends coldbox.system.interceptor. Are you trying to use the same CFC as a plugin AND an interceptor?

Now on to this code in the plugin/interceptor/??

> Event.addAssets(paths=’
> customClient.css’
> );

Why would you do this line of code? Since you haven’t specifid a full path and the fullPathProvided=true parameter, the path will default to /includes/styles/customClient.css which, as you have stated over and over, is not the correct location for the file.

> Event.addAssets(paths=’
> http://xxx.xxxxxxx.com/includes/styles/customClient.css’,
> template = ‘Layout.Login.cfm’,
> fullPathProvided = true
> );

This time you specified a full path, but you also passed in a template value of “Layout.Login.cfm”. In your previous code example you are calling getAssets() with NO template value, which means it is defaulting to “Layout.Default.cfm” which will IGNORE the asset you added to the “Layout.Login.cfm” template.

It appears that you second addAssets() is effectivley being ignored, but you’re not realizing it because of your first addAssets() call which including customClient.css from the wrong location.

I would suggest you remove the first addAssets() call, and remote the template parameter from the second addAssets() call. Also, I’ll grant you may have simplified the example for the sake of posting, but a single asset doesn’t need the addAssets() method, you can just use the singular addAsset() method.

I would also recommend you create a separate CFC to act as your interceptor and not combine it with the plugin as it appears you are doing. Also, in regards to your interception points, preEvent will run multiple times if you use runEvent() in your handlers (once per event). Use preProcess() if you want it to run once per request.

Does that all make sense?

Thanks!

~Brad

well like I said I have a virtual directory /includes. If I remove virtual directory I will get my cusomClient to work but I wull lose all other styles sheet from the shared flders

That’s good. So how about creating another virtual directory for the shared assets and name it something different than “includes” like “shared” and then change your interceptor to reference the new shared path?

Nolan Dubeau

Load .,8,1

If I remove virtual directory I will get my cusomClient to work

You lost me there. You don’t have cusomClient.css in a REAL directory in the site’s webroot called “includes” do you? You haven’t actually told us where that file is yet, but it will obviously need to be in a different folder name than the shared virtual directory.

~Brad

I do have customClient.css in the client. IS that means all my view folder must be changed to use shared folder. Because I have whole bunch of images using /includes.