As of now i am routing like the following:
beego.Router("/detailed", &controllers.MainController{}, "get:Detailed")
Instead i want to route like this:
beego.Router("/detailed/[some-product-name]", &controllers.MainController{}, "get:Detailed")
i did try like below:
beego.Router("/detailed/:id", &controllers.MainController{}, "get:Detailed")
But all dependency files like js, bootstrap, css are expected in the path of /detailed/static/ instead of /static.
Thank you.
It's not a beego problem. You probably made your include scripts, stylesheets link relative. In your html (template), all file "improts" you should predate with / sign.
So if you have
<script src="static/js/jquery.js" type="text/javascript"></script>
You need to change it to:
<script src="/static/js/jquery.js" type="text/javascript"></script>
Related
I've created 'test.js' file in 'resources/js/' and added console.log(first) to it
In the welcome.blade.php I have something like that:
<body>
#vite(['resources/js/test.js'])
<script type='text/javascript'>
console.log(second)
</script>
</body>
What I expect is to execute those scipts in order from top to bottom, however it returns output:
second
first
I guess #vite(['resources/js/test.js']) is executed asynchronously by default, but I want to change it.
Is there any better way to do this than to put all the internal JS in DOMContentLoaded?
Changing type from 'text/javascript' to 'module' helped.
<script type='module'>
console.log(second)
</script>
So I have this template in Thymeleaf:
<script th:src="#{|${#request.requestURI}ace-builds/src-noconflict/ace.js|}" type="text/javascript" charset="utf-8"></script>
What I want it to do is pull the current directory(?) it's in, and attach it to the front of the source. So if this is on the page www.mywebsite.com/mypage, it will generate the source tag /mypage/ace-builds/src-noconflict/ace.js.
From other posts here, it looks like that's what should happen, for me, I get this instead:
/mypage/mypage/ace-builds/src-noconflict/ace.js
I can't for the life of me figure out why this is happening. For those wondering why I'd want to do this in the first place, this program is running out of a WAR on a tomcat 9 server, and so the source tag needs to include the mypage war file name to pull from it, which I can hardcode to make work, and I can't pull static resources with just /ace-builds/src-noconflict/ace.js.
Never mind, I am a fool and missed the advise in one of the threads I was checking. Just needed to use:
<script th:src="#{ace-builds/src-noconflict/ace.js}" type="text/javascript" charset="utf-8"></script>
I was trying regular src before, without thymeleaf, and thought the leading / was necessary. Not the case.
How do you load d3.js with SystemJS?
I currently use:
<html>
<head>
<!-- SystemJS -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('d3.min.js').then(function(){
System.import('myJavascript.js')
})
</script>
Which seems to work. Is this the most reasonable way to go?
I found little help in SystemJS documentation towards this end, so I am not even sure .then is the approach for waiting for an import. What might be the best way, also for production?
Above, I load d3.min.js from my own server, but a CDN approach is also of interest..
Thanks!
If your myJavascript.js is depend on d3 then just dynamically import your script and add d3 inside your own script
index.html
<script>
System.import('src/myD3App');
</script>
myD3App.js
import './d3.min.js';
I recommending to use jspm (created by Guy Bedford same as SystemJS). But that just a personal opinion.
I have never done anything in sinatra before and decided to try it out on a project. I am confused on how script loading works. It seems to be intermittently working. Sometimes 2 scripts/css files will have internal server errors, and sometime they will all have errors.
This is my layout.erb :
<!doctype html>
<html>
<head>
<title>An HTML5 box of sand</title>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/style.less">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!--loads jquery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script><!--loads jquery ui-->
<script type="text/javascript" src="/assets/js/lib/handlebars.js"></script>
<script src="/assets/js/lib/less-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/js/script.js"></script><!--This is the place where you play!!!-->
</head>
<body>
<%= yield %>
</body>
</html>
I have the assets folder inside of the public folder /public/assets. It is weird because sometimes it will load the assets/js/script.js file, and not load the handlebars file. Other times it will load the handlebars and not the script.js file. I am not sure what is going on.
~~~~~~~~~~~~~~~~~UPDATE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Discovered the problem but don't know how to fix it.
So, it seems that because I am using data mapper the auto_migrate! method is somehow screwing with how the assets are being loaded. Is there something I can do about this. Here is what I have in my app.rb file:
require 'rubygems'
require 'sinatra'
require 'data_mapper'
# Include the models
require './models/User'
# Connect to mysql
DataMapper.setup(:default, "mysql://root#localhost/dev_landing")
#This line is what is messing everything up.
DataMapper.auto_migrate!
set :public_folder, 'public'
get '/' do
erb :home
end
I set up data mapper like this because I read in a tutorial that this is how you get it to automatically create the tables you specify in your models. Is there a better way to do this so that it is not messing up the loading of my scritps and css?
DataMapper.auto_migrate! deletes existing tables in case they exist and creates them again.
So calling this function means: you lose all your data. (That's why there is an exclamation mark at the end, meaning: watch out!) In case your schema is still under heavy development, I suggest you to replace DataMapper.auto_migrate! by DataMapper.auto_upgrade!. It does not wipe your old data, instead it tries to modify the underlying tables while trying to keep the data. The exclamation mark is still there because your data might still get slightly damaged because changing the schema without corrupting the data is not always possible.
Another thing, the order of calls must be changed. Currently it is:
Model definitions
DataMapper.Setup
DataMapper.auto_migrate!
Your route definitions etc.
But it should be instead:
DataMapper.Setup
Model definitions
DataMapper.auto_migrate! DataMapper.auto_upgrade!
DataMapper.finalize (you forgot that one)
Your route definitions etc.
When something is screwed up with datamapper, the error messages can be weird/misleading. By the way, make sure that there are no calls to the database from inside your views. These calls belong into the controller, without any exception in my opinion. This way your app naturally follows the MVC pattern. (After all Sinatra hardly enforces any other structure... ;))
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">