I used angular ui router, just like
.state('home', {
url: '/home',
templateUrl: 'view/home/home.html',
controller: 'homeCtrl'
})
.state('guide', {
url: '/guide',
templateUrl: 'view/guide/guide.html',
controller: 'guideCtrl'
})
and I can visit in browser with a url, http://localhost:8000/dist/#/home
However, I can not use a anchor in my html
if there is a anchor in home.html like this
scroll to aaa
....
<h1 id="aaa">AAA</h1>
when I click "scroll to aaa", the url will be http://localhost:8000/dist/#/aaa
and return a blank page.The anchor in home.html does not work.
How can I resolve this problem?
Make sure you have a ui-router version newer than 0.2.14, which was the first version to support html anchors in ui-router. All versions can be found on github, where I first noticed that it was supported.
Given your routing setup:
.state('home', {
url: '/home',
templateUrl: 'view/home/home.html',
controller: 'homeCtrl'
})
.state('guide', {
url: '/guide',
templateUrl: 'view/guide/guide.html',
controller: 'guideCtrl'
})
Create a link on any view:
Scroll to AAA
On page view/home/home.html
....
....
<h1 id="aaa">AAA</h1>
Use ui-sref along with the href tag. The href is used to point the local id of the page. And the ui-sref should point to the state of the same page. For example,
any Link
This will make the page scroll to the requires element without adding anything to your url.
Using syntaxes such as
ui-sref="home({'#': 'aaa'})"
will result in doing the job but will add the hash to the url. This would also produce syntax error when you're using other frameworks such as jQuery.
Related
I am using vue-router for route navigation in my laravel/Vue.js app. I have a Post component holding individual post of a blog, with router-link tags on excepts of post like so:
<router-link v-bind:to="'/post/' + post.id">
<p class="post_body">{{ post.body | truncate(100) }} </p>
</router-link>
post.id comes from props cascaded down from the parent component, Posts.
The router-link should redirect to another component i called single which will show the single post in details when clicked.
<template>
<div class="single">
<h1>{{ id }}</h1>
</div>
</template>
<script>
export default{
data(){
return {
id: this.$route.params.id
}
},
created(){
console.log(this.id);
}
}
</script>
The single post loads fine. However, when i try to reload/refresh the page, it goes blank. Why does the single component only load when i click from the post component but when i try to reload the page/component, it goes blank (the console also goes blank on refresh).
To expand on #LinusBorg's answer, with Laravel you would define a catch all route to your app.blade.php view file:
Route::get('/{path?}', 'AppController#index')->where('path', '.*');
The controller's action would simply return the view:
// AppController.php
public function index()
{
return view('app');
}
I would assume that you are using history mode but haven't set up the server appropriately.
When using history mode, your web server has to redirect calls to frontend routes (like when you refresh /page/1) to index.html, so your Vue app can boot up and take over the route handling.
Link to the documentation here
I have a page that gets content from other file through ajax, it works perfect, but when navigated through address bar, it s not working as the event is triggered only on click. I ve searched, but i couldnt find a solution that fits my need. I ve given my code. Somebody help.
Profile
<div id="home-content" class="container-fluid"></div>
<script>
function profile(){
$.ajax({
type: "POST",
url: "functions.php",
data: {action:profile},
success: function(response)
{
$('#home-content').html(response);
}
});
}
</script>
All i want is when i enter address like home/#profile , profile page has to be loaded and it also should be navigatable, with history entry for 'profile' page
Please Use this function
<body onload="profile()">
and remove in Onclick funtion
I have code in the app.js as follows:
$stateProvider
.state('home', {
url: '/home',
controller: 'indexController',
templateUrl: local.RootPath + '/App/Views/index.html'
});
In the specified controller I have a method as follows:
$scope.isRendering = function () {
return _isRendering;
};
Finally in the index.html I have something like this:
<div ng-hide="isRendering">
Here is some code...
</div>
So, the issue is that the ng-hide has no idea what "isRendering" is. I mean, it's in the controllers scope but it appears as though something is out of scope. If I physically set the ng-hide to false then the div content shows up. The "isRendering: is indeed false within the scope but its not coming through so the ng-hide can see it.
Any ideas what I may check?
Thanks,
David
I created a project for easy content sharing. You can look at my project here:
SharingProject
You can use user#example.com with 123456 as password to test the site as verified user. Of course the site has some bugs yet...
I used the meteor user package and the backbone package to navigate through the pages.
On localhost, there is no problem. For testing I uploaded the project to the meteor server. Now while I am logged in and navigating through the pages, every time I navigate to a new page the app 'checks' the user on client side because of the url change. This is annoying...
Of course I could navigate through the pages only calling Session.set('page_id', ..) but my goal is to be able to send people an url to a specific page on the server.
The code is similar to the one in the todos example from the meteor page:
Meteor.subscribe('pages', function () {
if (!Session.get('page_id')) {
var page = Pages.findOne({}, {sort: {owner: -1}});
if (page)
Router.setPage(page._id);
}
});
...
var PagesRouter = Backbone.Router.extend({
routes: {
":page_id": "main"
},
main: function (page_id) {
Session.set("page_id", page_id);
},
setPage: function (page_id) {
this.navigate(page_id, true);
}
});
Router = new PagesRouter;
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
Why I am asking here: I searched the web and can't find anyone with the same problem. So either nobody tried this before or there is a simple solution for this?
Edit: How I call the pages
<template name="pages">
{{#each pages}}
<p>{{title}}
{{#if isauthor}}
<a class="delPage" href="javascript:delPage('{{_id}}')">delete</a>
{{/if}}
</p>
{{/each}}
</template>
I don't know how you are rendering the page links but a link like this :
http://pagesharingproject.meteor.com/a1fbacba-0ddf-4077-a653-294b428bbfb8
should read like:
http://pagesharingproject.meteor.com/#a1fbacba-0ddf-4077-a653-294b428bbfb8
Ok I solved the problem, changing (true)
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
to (false)
Meteor.startup(function () {
Backbone.history.start({pushState: false});
});
and of course adding an anchor like Mubix suggested. Thanks for the hint!
It is up to date on the site mentioned above.
I spend some time today on the backbone documentation, but I can't imagine why this is working? Especially I am wondering why
{hashChange: false}
doesn't work here?
I was trying to create an autocomplete field using jquery and ajax. I tried the code below but it gives me an error that the action of the controller is not available. Here is the code in my exeternal .js file:
$(function () {
$("#inputfield").autocomplete({
source: '<g:createLink controller="fruit" action="findFruit">'
});
});
And this is the code from my Fruit controller:
def findFruit = {
def fruitsearch= Fruit.withCriteria {
ilike 'fruit', params.term + '%'
}
render (fruitsearch?.'fruit' as JSON)
}
I used firebug to see whats going on, and when I tried an input on the texfield, it says that the action findFruit is not available.
Am I missing something? Or is their something wrong on the code? Thanks
Since your js code is evaluated from an external js file you should try using pure js code instead of grails tags (coz they won't work)
Try using relative path like:
$( "#inputfield" ).autocomplete({
source: '/app-name/controller/action'
});
see if this works.