I am trying to implement ui-routing in my rails application but it is not able to find the page to which I want to route to.
The tree structure in rails that I followed is
app
assets
javascripts
angular_controllers
menu_controller.js
config
menu_config.js
templates
login.html
code for menu_config.js
angular.module('publishingApp')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login',
{
url: '/login',
templateUrl: 'templates/login.html'
})
}]);
code for index.html
<div ng-controller="menuController">
<header ng-class="navClass">
<nav><img src="assets/sample_image.png"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li><a ui-sref="login">Signin</a></li>
<li>Signup</li>
</ul></nav>
</header>
<section>
<div ui-view></div>
</section>
Error which I received when I run the code on browser and click on signin menu option
GET http://localhost:3000/templates/login.html 404 (Not Found)
Now I know am doing something wrong and I don't understand how to configure rails to load the html page.
Please any help is appreciated..
Update:
I created a template folder inside public folder and removed the template folder from the app/assets/ and now everything works fine. So which way is a better way to create applications and which way should be followed?
Related
The bootstrap collapsing navbar links adds "http://" to my link path and it makes the link not work in several browsers. (sit is on surge.sh)
Ok, I'm using react-bootstrap and react-router on my site.
I am deploying to surge.sh for testing purposes.
If I put a normal react-router link like this on the page:
<Link to="/contact" className="link">Contact</Link>
, the link works fine. I check the URL at the top of Safari and it reads:
binginlay.surge.sh
In my bootstrap navbar code I have links like this for he dropdown:
<Navbar collapseOnSelect expand="xl" bg="{background-color}" variant="dark" id="mobile">
<Navbar.Toggle aria-controls="responsive-navbar-nav" id="menuButtonIcon" />
<div id="mobileTitle">
<div>Bingham Inlay Arts</div>
</div>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="dropdownLinks">
<Nav.Link href="/" id="galleryLink">Gallery</Nav.Link>
<Nav.Link href="/custom" id="customLink">Custom</Nav.Link>
<Nav.Link href="/videos" id="videosLink">Videos</Nav.Link>
<Nav.Link href="/techniques" id="tecniquesLink">Tecniques</Nav.Link>
<Nav.Link href="/bio" id="bioLink">Biography</Nav.Link>
<Nav.Link href="/contact" id="contactLink">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
The navbar hamburger icon shows up. When clicked, the dropdown menu appears. All the links are shown. Clicking a link give a surge.sh error 'Page not found'.
I check the URL at the top of Safari and it reads:
http://binginlay.surge.sh
The only difference between the link working and not is having the 'http://" added in front of the href link I provided.
How do I get bootstrap to not put 'http://' in front of my links?
Or, is there a workaround anyone can think of?
Thanks in advance
My project is asp.net MVC with VB.net. I am trying add feature of drag and drop a file. I have browsed several websites, also downloaded a code which is in C#. C# code works well. However, code in my project doesn't work. I've compared generated HTML code and they are same. Also tried by moving .css files into "/content" folder manually, adding link to .js manually in .vbhtml page [rather than script.render()]. But it didn't work. I'd tried with other JQuery file upload objects too. But none of them works. So, I thought perhaps the issue is with JQuery. So, I uninstalled it and installed it back. However, it didnt'help too. I am using JQuery 3.3.1.
Can you help ?
Main problem : Nothing happens when I drop the file. e.g. if I drop TXT file, browser just opens the TXT file as if I've dropped it in empty browser window.
HTML code is below :
<div class="row">
<div class="col-md-9">
<div id="dropzone">
<form action="/Home/Upload" class="dropzone needsclick dz-clickable" id="uploader">
<div class="dz-message needsclick">
<textarea rows="10" cols="20"></textarea>
Drop files here or click to upload.<br>
</div>
</form>
</div>
</div>
</div>
JS code is below. I can see alert "bingo" on page load.
#section scripts
<script>
$(document).ready(function () {
alert("bingo!");
Dropzone.options.uploader = {
paramName: "file",
maxFilesize: 2,
accept: function (file, done) {
if (file.name == "test.jpg") {
alert("Can't upload a test file.");
}
else {
//Show a confirm alert and display the image on the page.
alert("bingo2!");
}
}
};
});
</script>
end section
I'm developing an ASP MVC application with ScrollSpy on one of my pages. I'm having a strange problem where it's working correctly when I run my site from localhost, but when I publish the application to a server, ScrollSpy isn't adding the active class to the <li> items.
This is the script on my page which initializes ScrollSpy.
#section scripts
{
<script>
$(document).ready(function () {
$('body').attr("data-target", "#side-nav");
$('body').attr("data-spy", "scroll");
});
</script>
}
Here's how my ScrollSpy navigation is defined.
<div id="side-nav" class="pull-left">
<ul class="affix nav nav-list nav-pills nav-stacked">
<li>First Section</li>
<li>Second Section</li>
<li>Third Section</li>
</ul>
</div>
Each section has an anchor tag defined like this
<a class="anchor" id="first-section"></a>
I verified that jquery.js and bootstrap.js are referenced correctly on the server by going to View Page Source and clicking on the link to view the .js file. I tried replacing the .min versions of the files with the same .js file that's being used on localhost, but that doesn't work.
I apologize in advance for this being a difficult to recreate problem. Please tell me if I should post any additional data to make it easier to troubleshoot.
I'm currently having a slight problem referencing images in a Rails app which is then deployed to Heroku.
I have an image in the following path relative to the app:
app/assets/images/some-image.png
And I have referenced it in the HTML correctly (as far as I am aware):
<div id="main-nav" class="collapse navbar-collapse">
<img src="/assets/some-image.png" height="67"/><!-- **IMAGE SOURCE LINK** -->
<ul class="nav navbar-nav" id="mainNav">
<li class="active">Home</li>
<li>APR</li>
<li>Initiatives</li>
</ul>
</div>
Yet, this is what is displayed:
Does anyone have any ideas why this is happening?
You should use image_tag:
<%= image_tag "some-image.png", height: "67" %>
When you deploy to heroku, your assets will get compiled with a unique digest so you can't hard-code the reference to /assets/some-image.png. Check out "Rails Asset Pipeline on Heroku Cedar".
You will need to use some helper functions so the image path is correctly resolved, like image_path('my_image.png'). See "ActionView::Helpers::AssetTagHelper" or "Asset Tag Helpers".
I have 2 HTML files, suppose one.html and two.html. In one.html I want to include two.html.
In JSF I can do it like that:
It means that inside one.xhtml file, I can include two.xhtml.
How can we do it in *.html file? in thymeleaf
you can do it easily. could you share your header.html file?
or, let me show a bit like I do for my projects
in header.html put in side the <body> a code:
<div th:fragment="client_header">
<p>This is for client</p>
</div>
<div th:fragment="admin_header">
<p>This is for admin</p>
</div>
and let's say you want to add client_header into the index.html. Do follow these in your index.html page (inside <body>)
<div th:replace="includes/header :: client_header">
</div>
note: includes/header before :: refers the html path (excludes .html) and client_header after :: refers the part in header.html you want to insert.
I hope you understand everything that I have explain here.
In one.html you can include two.html by following this steps:
Place both pages under the resources folder, something like /resources/one.html, /resources/two.html
Include two.html in one.html by adding this line in one.html:
<div th:insert="two :: two"></div>
Include this bit of code in two.html just after the <body> tag:
<div th:fragment="two">
This should include the bit of code surrended by the <div th:fragment="two">into one.html
More info in the thymeleaf documentation