I've implemented an SPA for my asp.net project, which is working fine, but this project is running with an api, and the help pages for that api are hosted on /help but the ui-router is taking over this route;
by $urlRouterProvider.otherwise('/'); i can have the url working but I have to manually reload to page for getting it.
Is there any possibility to get this working?
So ignoring the route?
Say to reload the page everytime a link is clicked in a specific url?
Suggestions?
Also I don't have access to the code in that url
If you want to reload ui-route, You can use this code
$state.transitionTo($state.current, {}, { reload: true, inherit: false, notify: true });
You can write your own state name which will be reload, Change the $state.current to your own state name.
OR Some example here
$stateProvider.state('url', { url: '/url?url' })
$state.transitionTo('url', { url: 'http://google.com' })
hopefully things are more clear now. https://github.com/angular-ui/ui-router/wiki/URL-Routing
Fixed it finally:
by adding this code to my landingController it reloads the page when clicked on a /Help link:
$('a[href*="Help"]').click(function () {
location.reload();
});
Related
When setting navLinks: true, fullcalendar makes anchor elements without a href property. That makes my page navigate to page root on click.
To resolve this issue tempraraly i have implemented this quick fix:
viewRender: function (view, element) {
var elements = $("[data-goto]");
elements.prop("href", "javascript:void(0)");
}
Now i cant say for certain that this issue is related this project beeing a .net mvc project with knockout or the way browsers handle anchor clicks without href.
If anyone could shed some light on this for me it would be much appritiated.
I'm using FullCalendar v3.9.0
This was due to Sammy.js not being set up correctly.
When clicking a link without a href tag sammy would redirect to root page automaticly.
Resolve by catching navigation to "/" and doing nothing.
Sammy(function () {
this.get('/', function () {
console.log("/");
});
}).run();
I have an angular2 page shows a list of items. I restrict the list initially by using the route parameters so my URL is something like:
http://localhost:54675/#/listing?filter={"Country":[6, 7]}
This will show items in the country with an ID of 6 or 7.
Then the users adds a third country (let's say 8) and I make a service call which updates the list. Since the list items are bound to an observable the list then updates on the screen.
This is exactly the behavior I want. But if the user bookmarks this page they only get the original route parameters and not the filtered results.
To fix this, I use:
this._router.navigate(['listing', { filter: newfilter }]);
This reloads the page with this route:
http://localhost:54675/#/listing?filter={"Country":[6,7,8]}
This keeps everything in sync and bookmarks work. However, there is a full page refresh. Other items load again - not just the filtered results. I also like the visual results better when it's just a single service call.
I need a way to change the route parameters without reloading the page.
You can use the Router only to create the URL and then use the Location to change the URL without navigating.
Something like this:
import { Location } from '#angular/common';
import { Router } from '#angular/router';
// Generate the URL:
let url = this.router.createUrlTree(['listing', { filter: newfilter }]).toString();
// Change the URL without navigate:
this.location.go(url);
For anyone who still didn't find a proper solution, try this:
this._router.navigate([], {
relativeTo: this.activatedRoute,
queryParams: {
filter: newfilter
},
queryParamsHandling: 'merge'
});
When navigating to the same route, the site doesn't reload!
I've got this in my routes:
Router.route('/videos/:id', {
name: 'VideoPage',
data: function(){
return Videos.findOne(this.params.id);
}
})
This template shows up at the route above:
Template.VideoPage.helpers({
'videoIds': function(){
var myVideoIds = [
"23456",
"h5e45t",
"f4e4w",
"g6h4h"
];
return myVideoIds;
}
});
HTML:
<template name="VideoPage">
{{videoTitle}}
<p>Click the links below to get to a new video page</p>
{{#each videoIds}}
<a href="/videos/" + {{this}}>
{{/each}}
</template>
When I click on a link, the URL in the browser changes from something like /videos/23456 to something like /videos/f4e4w, but the request never actually goes through Iron Router and the Router.route function. I put a debugger before Router.route and it triggers on initial page load but does NOT trigger when the links are clicked.
I understand that Iron Router's default behavior is NOT to re-render a template the user is currently on, but this is the same template with different url params that are used to change the data in the template, so IMO it should still re-render.
Ok, false alarm. It appears that Router.route DOES fire and updates the data context every time the params._id changes. I was placing the debugger outside of the Route function when I should have been placing it inside of the data context function.
The example that I gave in this answer was also a highy, highly simplified example. It wasn't working in my real-life project due to something else (a complex video iframe generator) that was being refreshed improperly.
But rest assured that going from /videos/f4e4w to /videos/23456 by clicking a link DOES still go through Iron Router and the params does get read and the data does get updated.
I have a Meteor app using iron-router which displays rosters in tabs (example here). I would like the URL to include a hash that depends on which tab is showing, ie. http://example.com/myrosters#first.
I have event code like:
Template.roster.events({
'mousedown .nav-tabs li a': function (evt) {
# want to set the URL here
}
});
How do I set the URL here to include a hash, without actually triggering an unnecessary page reload? (I believe Router.go() would trigger a page reload.)
Thanks!
If the path stays the same then it seems go doesn't reload the page.
Router.go(window.location.pathname+"#test3")
When I execute the above, I see no activity in the network tab of the developers console, so I think this should work for your purposes.
Instead of Router.go You Can Use Router.url:
Router.url('yourrouterpathname', {_id: id}, {query: 'q=s', hash: 'hashFrag'});
Finally after so much testing and so on, i made it works. But i`m confused which files do i need and why im getting an error.
i have
/Scripts/fineupload/
handler.base.js
handler.form.js
handler.xhr.js
uploader.basic.js
util.js
My script bundle is
BundleTable.Bundles.Add(new AmazonS3ScriptBundle("~/bundles/gzip/fineuploader")
.Include("~/Scripts/fineuploader/handler.base.js")
.Include("~/Scripts/fineuploader/handler.form.js")
.Include("~/Scripts/fineuploader/handler.xhr.js")
.Include("~/Scripts/fineuploader/uploader.basic.js")
.Include("~/Scripts/fineuploader/util.js")
);
When i try to load my page im getting an error
My Page
<div id="fine-uploader" class="btn btn-primary"><div>Select Files</div></div>
....
#Scripts.Render("~/bundles/gzip/fineuploader")
...
Fine uploader javascript is rendered as single file ex. somemd5.js
I try to init my uploader on document ready as
uploader = new qq.FineUploaderBasic({
multiple: false,
autoUpload: false,
button: $("#fubUploadButton")[0],
request: {
endpoint: "http://localhost:64247/upload/uploadfile"
},
callbacks: {
onError: errorHandler
}
});
Im getting to much errors, but ill start with the last one..
If i just includeuploader.basic.js, im getting error like
Which files do i need? In zip file from github, there are 10 javascript files (some empty).
Its strange why on test page from zip, everything works but when i implement in my proejct it does not work...
This is precisely why a zip file with combined/minified & version-stamped js, along with version-stamped css & resource files is available. Click on the download link either on the homepage or at the top of the readme in the master branch.