Hi im currently creating a small app that uses bootstrap and jquery and im having a little problem regarding importing the css and js files.
this is my layout.erb looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<script src="public/js/bootstrap.min.js"></script>
<script src="public/js/jquery-3.1.0.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects & Tutorials</li>
<li>The Division Highlights</li>
<li>Contact Us</li>
</ul>
<p class="navbar-text navbar-right"><span class="glyphicon glyphicon-user"></span> Login / Signup</p>
</div>
</nav>
</header>
<section>
<%= yield %>
</section>
<footer>
<div class="panel panel-default">
<div class="panel-footer">© Copywrite JDG</div>
</div>
</footer>
</body>
</html>
here is where i configure the files for my views folder
require 'rubygems'
require 'sinatra'
require_relative './app'
module Portfolio
class MainRoutes < Sinatra::Base
before do
#user_authentication = Portfolio::Main
end
configure do
set :views , File.expand_path('../../../Portfolio-FE/views', __FILE__)
set :root , File.dirname(__FILE__)
end
helpers do
include Rack::Utils
alias_method :h, :escape_html
end
get '/' do
erb :index
end
end
end
and this is what my Files looks like.
the css and js is not being imported in the project and i wonder why.
thanks guys.
I figured out the answer,
Just set the public folder like this:
set :public , File.expand_path('../../../Portfolio-FE/public', __FILE__)
and import the files like this.
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
Apart from setting the public folder, you might want to use Sprockets.
I have an example app here: https://github.com/katgironpe/simple-sinatra-mvc
http://www.sinatrarb.com/configuration.html
set :root, File.dirname(__FILE__)
set :public_folder, Proc.new { File.join(root, "static") }
Follow the official guides. Don't forget to set root of your app.
Related
I'm working on teaching myself front-end dev, and ran into an issue with getting jquery to work. I have all my site posted here: http://mike.shea.sdf.org
What should happen is between the header and the nav buttons, there should be blog postings. The entries are hand coded into the postBuilder.js file which (along with helper.js and the jquery lib) should generate the HTML to display the posts.
It has the following structure:
html
index.html
blog.css
js
jquery-2.2.1.min.js
helper.js
postBuilder.js
I have read/exe rights on everything.
All is fine when tested locally on my own machine, but when posted up to the server I get this on the console:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://mike.shea.sdf.org/js/jQuery-2.2.1.min.js
If I put everything under the root html folder, it works. I'm reasonably sure that i have the relative paths typed in correctly. Again, locally the files have the same structure and they work. If you look at the source, you'll see that I tried more than one jQuery lib file and tried putting it in the root html folder as well. I'm really not sure what to look at next. Here is the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Contemplating Tech</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles-->
<link href="blog.css" rel="stylesheet">
<script src="/js/jQuery-2.2.1.min.js"></script>
<!-- <script src="./jQuery-2.2.1.min.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-2.2.1.js></script> -->
<script src="/js/helper.js"></script>
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Contemplating Tech</h1>
<p class="lead blog-description">Personal musings about technology, web development and whatever else I come across.</p>
</div>
<div class="row">
<div id="posts" class="col-sm-8 blog-main">
<script src="/js/postBuilder.js"></script>
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Mike has been involved with desktop support in one manner or another for 20+ years. This will be both a personal blog and a sandbox as he works on improving his front end web development skill set.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<p>When I get a little better at getting posts in here and finding how to create an archive, I'll populate a list here.</p>
<!--<ol class="list-unstyled">
<li>March 2014</li>
<li>February 2014</li>
<li>January 2014</li>
<li>December 2013</li>
<li>November 2013</li>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
<li>June 2013</li>
<li>May 2013</li>
<li>April 2013</li>
</ol>-->
</div>
<div class="sidebar-module">
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li>GitHub</li>
<li>Twitter</li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for Bootstrap by #mdo.</p>
<p>
Back to top
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
</body>
</html>
Any and all help or suggestions are appreciated!
When I look at your page and navigate to the location specified in your source code (http://mike.shea.sdf.org/js/jQuery-2.2.1.min.js), I too get the 404 error.
Now, I can navigate to your helper.js file, which seems to have the same path, so you need to triple check the naming of the jQuery file.
Also, (as an aside) and as I mentioned in my comment, you have a leading forward-slash in your link (/) to the jQuery file. This means that the js folder is a sub-folder of the root of your server, which may not be the same as a sub-folder of your HTML folder that you talk about. Remove the forward-slash from the link and make sure that the js folder is a child of the folder where the HTML file is.
I am trying to add a route.js file in the layout.ejs.
<!DOCTYPE html>
<html ng-app="scratchpad">
<head>
<title>Scratchpad</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Twitter Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!--Twitter Bootstrap END-->
<!--STYLES-->
<link rel="stylesheet" href="/styles/border.css">
<link rel="stylesheet" href="/styles/tablerow.css">
<!--STYLES END-->
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" ui-sref = "scratchpad">MY SCRATCHPAD</a>
</div>
</div>
</nav>
<p>hello world</p>
<div class = "container">
<div ui-view></div>
</div>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<script src="/js/dependencies/route.js"></script>
<!--SCRIPTS END-->
</body>
</html>
Whenever i add this and save it. Its got saved. But when i try to run sails lift. The route.js script getting gone and the layout.ejs file changes into old state. Can anyone figure this out? Any idea of what may be the bug? cause of grunt?
As long as I remember, everything inside
<!--SCRIPTS-->
...
<!--SCRIPTS END-->
section is generated by sails. Try just to put your link after , so it will be like
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<!--SCRIPTS END-->
<script src="/js/dependencies/route.js"></script>
I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.
I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.
My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</body>
Can anyone point what am I doing wrong?
Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/
EDIT
It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):
<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Bootstrap You need to download and add jquery in your script. Something like this
<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />
see here for your reference i added jquery v 1.7.2