All my page nav links are working but my Index nav is not working. When i try opening from any of my page links, it throws me this
404 Not Found
this is my index code for the nav
<a href ="index" >Home</a>
this is my route
Route::get('/', function () {
return view('index');
});
How to fix this problem?
try:
In view:
Home
In routes:
Route::get('/', function() {
return view('index');
})->name('index');
Your route URI is (/), So your anchor should be :
<a href="/" >Home</a>
href="index" call the /index, but you did not define it, so you will get a 404 error.
Alternatively, you can make a name route by name('index'), like this :
Route::get('/', function() {
return view('index');
})->name('index');
Then you can call from anchor link like this :
Home
Related
<h3 :class="{'active': game.Desktop}"
#click="game.gameAchievements = false, game.gameCreation = false, enJin.audioController.play('take')"
#mouseenter="enJin.audioController.play('cardHover')">Desktop App</h3>
I have the issue, that I somehow cannot get this button to a external webpage. I already tried basic things like this.$router.push.
For exemple in Vuejs3 you can
const redirect = () => {
window.location.href="https://some-url.com"
}
And add this function into #click on your HTML element
<button #click="redirect()">
Redirect
</button>
this is one of my first projects with vue.
Basically, I am trying to display an image from a URL from an array.
On the webpage, the URL is in the image back but the actual image is not displaying.
This is in my main vue class
<div id="painting">
<ul v-if="artwork && artwork.length">
<li v-for='(artworks, index) in artwork' :key='index'>
<img v-bind:src="artworks.thumbnailUrl" />
</li>
</ul>
<router-view/>
</div>
then the script code:
<script>
import axios from 'axios';
export default {
data() {
return {
artwork: []
}
},
created() {
axios.get(`http://localhost:9000/artwork`)
.then(response => {
this.artwork = response.data;
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
This is what it looks like on the web, the url is there but no picture
I have declared a width and a height of the image as well with css
I should mention i getting the information from the database in a node project and connecting by a port number
I am pretty new to stack so I would love any feedback, cheers
From you screenshot code, this looks fine. I can see the image by writing similar HTML
<li>
<img data-v-xcxcc src="http://www.tate.org.uk/art/images/work/A/A00/A00007_8.jpg" />
</li>
https://jsfiddle.net/y2m75usk/
Try clearing your cache or reload the page by Holding the Ctrl key and press the F5 key.
Thanks!
I have some trouble with logout on my page. i have a controller with this
public ActionResult LogOut()
{
FormsAuthentication.SignOut();
Session.Abandon();
return RedirectToAction("Index", "Home");
}
And so a view called LogOut. I've put an href on it with a button :
<li><a class="logout" href="~/Views/Account/LogOut.cshtml">Se déconnecter</a></li>
but when i click it keeps saying me your page couldn't been found etc...
But strange thing is this, if i put in my adress bar, the path to the LogOut view it works and i'm disconnected, someone knows why ?
You should give href like this instead of path to cshtml file:
<li><a class="logout" href="#Url.Action('Logout', 'ControllerName')">Se déconnecter</a></li>
it will hit LogOut Action Method then will Render your view Appropriately
You can set link in different way :
1) <li><a class="logout" href="/Account/LogOut">Se déconnecter</a></li>
2) <li><a class="logout" href="#Url.Action("LogOut","Account")">Se déconnecter</a></li>
3) <li>#Html.ActionLink("Se déconnecter", "Account", "Logout", new { #class="logout" })</li>
I retrieve data from back-end and show it in a html page using a controller. When user click a certain link, the other page load according to the link id(here promo page). I want to pass the menu_id to the loading page. I use ngRoute. Below is the html code which I tried,
<li class="table-view-cell" ng-repeat="menu in menuList">
<a class="navigate-right btn-lg" href="#{{menu.link}}/{{menu_id}}">
<span class="{{menu.icon}}"></span>
{{menu.menuName}}
</a>
</li>
Below is the routing,
mobileApp.config(function($routeProvider) {
$routeProvider
.when('/promo/menu._id', {
templateUrl: 'tpl/promo.html',
controller: 'promoController',
activePage: 'promo'
})
Below is the controller for the promo page which I need to retrieve the menu_id,
$http.get(SERVER_URL + '/api/templates/getCategories?appId='+$rootScope.appId+'&mainId='+$routeParams.id)
.success(function(data) {
$scope.requestCategory = data[0];
}).error(function(err) {
alert('warning', "Unable to get templates", err.message);
});
mainModule.config([function($routeProvider) {
$routeProvider.when('/promo/:menu._Id', {
templateUrl : 'tpl/promo.html',
controller : 'promoController',
activePage: 'promo'
});
}
You can define your routing like above, notice the colon before menu._Id. In your controller, you can access menu._Id using $routeParams service as follows:
$routeParams.menu._Id
Thats's it.
It started to work when I changed the routing as below,
.when('/promo/:id', {
templateUrl: 'tpl/promo.html',
controller: 'promoController',
activePage: 'promo'
})
In that case you would have to do following in your controller:
$routeParams.id
I have this code in javascript
$scope.sample = function(){
console.log(document.getElementById('foo'+modelId));
}
which returns false due to the HTML not yet complete rendering the page. See below:
<li ng-repeat="item in items" >
<input ng-model='foo'{{item.modelId}}
</li>
I want to avoid using timeout, is there a way to assure the HTML is completely rendered before executing the code.
I think that the best way is to listen to scope.$last event and than run any code you need.
Here is an example:
angular.module('myApp', [])
.directive('repeatFinished', function() {
return function(scope, element, attrs) {
if (scope.$last) { // Here we can see that all ng-repeat items rendered
scope.$eval(attrs.repeatFinished);
}
}
});
And than on your html you simple add:
<li ng-repeat="item in items" repeat-finished="sample()">
//....
</li>