I've created a simple static website in an S3 bucket using some boilerplate HTML5 code. I've set permissions on the bucket to Public access universally (all files and folders)
I can't work out why my css and js folders are not loading the content in the index.html. The image referenced in the <img/> tag is in the root of the project and renders fine.
I've checked the metadata and it seems to be correct e.g. text/css for the css files.
Here's the layout:
Here's the index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<link rel="manifest" href="site.webmanifest" />
<link rel="apple-touch-icon" href="icon.png" />
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="theme-color" content="#fafafa" />
</head>
<body>
<!-- Add your site or application content here -->
<p>My new Website</p>
<img src="tile.png" alt="Girl in a jacket" width="500" height="600" />
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () {
ga.q.push(arguments);
};
ga.q = [];
ga.l = +new Date();
ga("create", "UA-XXXXX-Y", "auto");
ga("set", "anonymizeIp", true);
ga("set", "transport", "beacon");
ga("send", "pageview");
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
Inside of css folder:
Permissions on css are as follows:
This was a permissions issue on one of the css files.
Update: I'm rewriting with all my code for each page as well as my error message... keep in mind I am very new and honestly don't know some of this code...
productlist.cfm 1st page: (hard coded product list code built from select statement)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/style.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/style.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap-theme.min.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap.min.css" type="text/css" />
<script type = "text/javascript" src="http://students.uwf.edu/jeb48/week8/assignments/scripts/jbrown.js"></script>
<script type = "text/javascript" src="http://students.uwf.edu/jeb48/week8/assignments/scripts/jbrown2.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js" ></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Scuba Diving is Fun!</title>
</head>
<body>
<div class="container">
<cfquery name = "getlist" datasource="jeb48_shoppingcart">
SELECT ProductID, ProductName, ProductQty, ProductPrice, ProductDescription, ProductPhoto
FROM Products;
</cfquery>
<div class="row">
<div class="col-md-2"><b>Product Photo</b></div>
<div class="col-md-2"><b>Product ID</b></div>
<div class="col-md-2"><b>Product Name</b></div>
<div class="col-md-2"><b>Quantity in Inventory</b></div>
<div class="col-md-2"><b>Product Description</b></div>
<div class="col-md-2"><b>Unit Price</b></div>
</div !--row>
<cfoutput query ="getlist">
<div class="row equallist">
<div class="col-md-2">#getlist.ProductPhoto#</div>
<div class="col-md-2">#getlist.ProductID#</div>
<div class="col-md-2">#getlist.ProductName#</div>
<div class="col-md-2"><div style="text-align:center">#getlist.ProductQty#</div></div>
<div class="col-md-2"><div style="text-align:left">#getlist.ProductDescription#</div></div>
<div class="col-md-2"><div style="text-align:left">#DollarFormat(getlist.ProductPrice)#
<cfif #getlist.ProductQty# gt 0>
<br>Add to Cart
<cfelse>
<br>Out of Stock!
</cfif>
</div></div>
</div !--row>
</cfoutput>
</div !--container>
</body>
</html>
scart.cfm Page 2: This is the page I'm having trouble with... I know my code is messed up but I do not know how to fix it... the error I'm getting is on this page... the error is "Parameter validation error for the ARRAYAPPEND function." I'm trying to build a cart based on the link in the previous page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/style.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap-theme.min.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="http://students.uwf.edu/jeb48/css/style.css" type="text/css" />
<script type = "text/javascript" src="http://students.uwf.edu/jeb48/week8/assignments/scripts/jbrown.js"></script>
<script type = "text/javascript" src="http://students.uwf.edu/jeb48/week8/assignments/scripts/jbrown2.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js" ></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Scuba Diving is Fun!</title>
</head>
<body>
<div class="container">
<h3><center>Your Shopping Cart</center></h3>
<cfparam name="url.productid" default="">
<cfparam name="url.qty" default="">
<cfquery name = "getCartItem" datasource="jeb48_shoppingcart">
SELECT ProductID, ProductName, ProductQty, ProductPrice, ProductDescription, ProductPhoto
FROM Products
WHERE ProductID = #url.productid#;
</cfquery>
<cfset arrShoppingCart = arrayNew(1) />
<cfparam name="session.cart" default="arrayNew()">
<cfset arrayAppend( "session.cart", structNew() )>
< cfset session.cart = arrayNew(1) >
< cfset thisCartItem = arraylen( session.cart )>
<cfset arrayAppend( session.cart, structNew() )>
< cfset thisCartItem = arraylen( session.cart )>
< cfset session.cart[thisCartItem].itemID = url.productid>
< cfset session.cart[thisCartItem].quantity = url.qty>
</body>
</html>
application.cfc
<cfcomponent>
<cfset this.name = "jeb48SC">
<cfset this.datasource = "jeb48_shoppingcart">
<cfset this.loginstorage="Session">
<cfset this.sessionmanagement="Yes">
<cfset this.sessiontimeout="#createtimespan(0,0,45,0)#">
</cfcomponent>
Once I get this working I can begin working on getting the output built... thanks for taking a look.
The details of the question have significantly changed, so editing my answer.
1: <cfset arrShoppingCart = arrayNew(1) />
2: <cfparam name="session.cart" default="arrayNew()">
3: <cfset arrayAppend( "session.cart", structNew() )>
4: < cfset session.cart = arrayNew(1) >
5: < cfset thisCartItem = arraylen( session.cart )>
6: <cfset arrayAppend( session.cart, structNew() )>
7: < cfset thisCartItem = arraylen( session.cart )>
8: < cfset session.cart[thisCartItem].itemID = url.productid>
9: < cfset session.cart[thisCartItem].quantity = url.qty>
There are a few problems with this code. I'll ignore the spaces after some opening brackets, you're clearly experimenting and canceling out some experiments.
On line 2, you're not creating an array, you're creating a string with the default value of "ArrayNew()". You need to add hashes around each end. "#ArrayNew()#".
On line 3, you have the array name quoted, which is invalid. Most cold fusion functions that require a variable name, want it unquoted. Some exceptions are StructkeyExists() and isDefined(), which serve similar purposes. They check if a variable exists so they ask for the variable name as a string, rather than raw.
Line 4, this is how you properly set an array. Good Job. The only thing is every time someone visits this page, this happens. This line should be when a session is first initiated and it should go something like this <cfif not isDefined("session.cart")><cfset session.cart=ArrayNew(1)></cfif>.
As I said before, you need to maintain data types across your application. One quick fix is to address your code problems and then create a page that has nothing but this <Cfset structclear(session)>. That gets rid of all your old session data.
You're on the right track after this. It can be tough when you're trying to debug something that you don't (yet!) understand several aspects of, but you'll get it.
Okay something else we need to talk about. You're new to CF? That's great, time to start an important habit early.
Any Time you're using a #variable# in a query, use a tag called <cfqueryparam. There's a mischievious thing called SQL injection, where a user can modify a url to cause havoc on the website. This tag is your primary defense against this
(There are occasions where some people don't feel it's necessary but you really cannot over-param your variables and as you're new, it's better to be safe than sorry).
Suppose I'm on scart.cfm?productID=7. If I change the url to scart.cfm?productID=7; DROP TABLE Products, your products table disappears. Or maybe I just want cheap goodies. scart.cfm?productID=7; UPDATE Products SET PRICE = 1 (I'd have to guess at column names here), but I could reset all your product prices.
Further CFQueryParam makes your queries slightly faster, and one of my favorite parts, is that when you provide the type, it handles the quoting for you.
Adobe was a bit silly when designing the tag and it's a little long-winded, but you get used to it.
You query above should look like this:
<cfquery name = "getCartItem" datasource="jeb48_shoppingcart">
SELECT ProductID, ProductName, ProductQty, ProductPrice, ProductDescription, ProductPhoto
FROM Products
WHERE ProductID = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.productID#">
</cfquery>
Oh, because you're using this.datasource in application.cfc, providing a datasource here is not necessary. so your queries can just look like, which makaes your application more mobile.
<cfquery name="..."> or <cfquery> for queries where name isn't useful.
If you ever find yourself using additional datasources, you can store their names in the request scope, and then you can reference them like datasource="#request.db1#" or #request.db2#', etc. There are some applications people have designed that might have particular users using different databases so they have setups like #session.db#.
If I was searching for something by say a string value, the where could look like this WHERE ProductID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.productName#'>
See, the tag takes care of the quoting, and it lets other developers know your data types at a glance.
In the future, please provide more of the error.
From what you've shown, it looks like either:
A cfparam declares session.sCartItems somewhere, probably as a basic string. (<cfparam name="session.sCartItems" default=""> which basically just says, "If not defined, define it". In other words, a cfparam on a variable will make an isDefined() check pass.
In development, you've formerly declared session.sCartItems as a string, and that action is still alive. If that is the case, the not-isDefined() check fails, and the variable is not re-set as an array.
You should resolve the source of this problem. Data types of variables should remain consistent across your application, otherwise you will always constantly be trying to check data types.
However, changing this should bandaid-fix your problem.
<cfif not isDefined("session.scartItems")>
to:
<cfif not isDefined("session.scartItems") or not isArray(session.sCartItems)>
The way this is works is if your variable is not defined, the check stops there. If you variable is defined, the check continues to verify that it is an array.
I am trying to create a dynamic database-driven drop down menu in a ColdFusion page.
I have written ul and li tags in a cfoutput tag, but nothing is displaying in the page.
<cfset dbsource="ndev9">
<cfset dbschema="security">
<cfset dbuserid="security">
<cfset dbpw="sec">
<html>
<link rel="stylesheet" href="menubar_new.css">
<link rel="stylesheet" href="bannerstyle.css">
<cfquery name="main_menu" datasource="#dbsource#" username="#dbuserid#" password="#dbpw#">
select * from #dbschema#.main_menu order by MAIN_MENU_ORDER
</cfquery>
<body>
<cfoutput>
<ul id="menu_new">
<cfloop query="main_menu">
<li>#main_menu.main_menu_name#</li>
</cfloop>
</ul>
</cfoutput>
</body>
</html>
I am attempting to use XMLParse against content that is not valid xhtml. In the html code, the tags are not properly terminated. In order to terminate them, I am using the replace function to find the invalid code and replace it with properly terminated code. In doing so, my application errors out and tells me that the meta tag is invalid:
An error occured while Parsing an XML document.
The element type "meta" must be terminated by the matching end-tag "".
The code I'm trying to validate is:
<html>
<head>
<title>Impart Client Interface</title>
<link href="side_panel.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css">
<link href="tabs.css" rel="stylesheet" type="text/css">
<link href="data_tables.css" rel="stylesheet" type="text/css">
<link href="xp_button.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
What I've created in CF to attempt to handle this is:
<cfset xml = objResponse.FileContent>
<cfset page.content = '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">'>
<cfset page.updatedcontent = replace('#page.content#','8859-1','8859-1" />"','')>
<Cfset page.link = 'type="text/css">'>
<cfset page.updatedLink = replace('#page.link#', 'css">', 'css" />', 'all')>
<cfset validXML = replace(#xml#, "#page.content#", "#page.updatedContent#", "")>
<cfset validXML = replace(#xml#, "#page.link#", "#page.UpdatedLink#", "all")>
<cfoutput>#validXML#</cfoutput>
<cfset parsethis = xmlparse(validXML)>
<cfdump var="#parsethis#">
How can I resolve this error?
Looks to me like you are missing part of the substring in your replace call:
<cfset page.updatedcontent = replace(page.content,'8859-1">','8859-1" />')>
Note the addition of ">
So, the above will address your specific technical question. I'd like to suggest a better approach to your general task, however. Doing string manipulation on HTML to try to mash it into proper XHTML is tricky at best (as you have seen). Instead, consider abandoning XMLParse in favor of an actual HTML parser, such as JSOUP. After you download the jar and add it to your CF classpath, you can do things like this:
<cfset jsoup = CreateObject("java", "org.jsoup.Jsoup")>
<cfsavecontent variable="html">
<html>
<body>
<hr>
<pre id="blah">Foo<br>bar1</pre>
<hr>
<pre id="blah2">Foo<br>bar2</pre>
</body>
</html>
</cfsavecontent>
<cfdump var="#jsoup.parse(html).select('pre').first().html()#">
Which will output :
Foo<br />bar1
Pretty spiffy, eh? And no need to pull out your hair over getting exact details right with XML.
I created template (template.xhtml) which resides in root context of application.
I wanted to apply it to page (newTemplateClient.xhtml) which resides in the folder 'public'.
So newTemplateClient.xhtml looks like this:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
template="./../template.xhtml">
.
.
.
I have links to this page in index.xhtml:
<h:link outcome="/public/newTemplateClient" value="Login"/>
<h:commandLink action="/public/newTemplateClient?faces-redirect=true" value="Login"/>
<h:commandLink action="/public/newTemplateClient" value="Login"/>
And only last works. When I use first two page displays but template isn't applied.
So it works only when page is redirected, not forwarded. Why?
Thanks in advance
Okay it seems that template is applied but css files aren't. I'm using NetBeans wizards to create templates and templates clients. The css files are located /resources/css/ directory.
They are referenced from template.xhtml:
`
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">template</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
`
How can I reference that css files other way?
Folder structure:
Root
public
newClientTemplate.xhtml
template.xhtml
index.xhtml
Okay problem solved.
Solution was to use:
<h:outputStylesheet name"css/default.css"/>
<h:outputStylesheet name"css/cssLayout.css"/>
Instead:
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />