Here is my use case:
I have a bunch of images on the page, and each can be rated 1-5 stars. I have a search that allows you to filter by a number of stars, which creates a url fragment like:
mydomain.com/app/#/stars/3
this is all working. Now, lets say I change the rating on one of my images and filter again on 3 stars. Because the url doesn't change my route doesn't fire, and my filtering doesn't occur. I'm using:
window.router.navigate('#/' + url, true);
How would I trigger my routing function when the url doesn't change?
Try this - Backbone.history.loadUrl()
Related
I have a link called Rounds. When I click on it, I get a nav that displays a list of rounds (First Round, Second Round, ...).
Rounds are collected from a dynamic database (currently from a JSON file).
The state url after clicking on the link is : /rounds
I want the state to redirect to the first element state of the nav. For now its the First Round but it can be anything since the data is dynamic.
In the JSON file for each round I added an attribute uri, for example for First Round the uri is firstround. So what I want after clicking on the link Rounds to get redirect to rounds/firstround (in other scenario, it may be anything else which is always the uri attribute of the first object in the JSON file).
I used to do it statically using
$urlRouterProvider.when('/rounds/', '/rounds/firstround');
But I want it dynamic using
$urlRouterProvider.when('/rounds/', '/rounds/{SOMETHING-DYNAMIC}');
Here is the example on plnkr: http://plnkr.co/edit/S9dtPcuaXoXJjxMV28oU?p=preview
I wish to see if it is possible to generate a random link each time an admin visits the admin page.
for example: instead of having: "".com/admin, there would be "".com/a93k, "".com/9dik. The page stays the same but just so the end-user can't access the page from the address bar.
Thanks as I am new and do not know how I can implement this.
In .config of your app put something like
window.adminHash = Math.random().toString(36).substring(2,6);
In your routing
url: '/' + window.adminHash
Then you can use "window.adminHash" if you want to redirect to your route, which will change every time you refresh the page
You can add www.test-example.com/admin/{provide some ID}
And If there isn't ID provide discard that URL, if it is provided you can make discrimination.
Trying to figure out how to pass a value in service from one direction to another? I'm building a small search app using Elasticsearch and AngularJS. It has 2 pages, home and results. On home, only functionality is autocomplete (using AngularJS UI Bootstrap Typeahead), on results page, display results and search box. I'm trying to use a custom directive to do this.
I basically have everything working EXCEPT, that when on the homepage, pressing the search button just goes to the results page, no search processing is done. AND everything works on the results page, autocomplete and search functions...
I recently put the ng-model(searchTerms) into its own service, but I DI that service into both my controllers. The only thing I can think of is that somehow my ng-model ISN'T getting passed to the directive? I'm stumped... still learning AngularJS directives.
Basically all the service does for searchTerms is
this.searchTerms = null;
Any ideas?
UPDATE I'm on v1.47 and using ngRoute for now.
UPDATE 2 I have 2 way data binding working now. So when a query is submitted on the home page, the searchTerms variable now displays on the results page. However, there is still no results being displayed and no processing being performed. So just 2 way data binding is working.
UPDATE 3
'use strict';
angular.module('searchengine.query-service', [])
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
});
You can consider these 2 pages 'components', in the more update to date Angular jargon, and you want to navigate between them, passing your search term as a variable.
In your search page, you will need some code along the lines of
$router.navigate(['ResultsPage', {searchTerm: yourSearchTermGoesHere}]);
When the results component activates, it should check for the existence of a search term and perform whatever search processing is done when the search term subsequently changes.
Router docs - https://docs.angularjs.org/guide/component-router. Have a look specifically at the 'Extra Parameters' and 'Lifecycle hooks' section
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.
Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.
Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?
EDIT: in particular, I'm trying something like mentioned in this article.
You should not use route.navigate but let the router decide which form to display based on the current route.
exemple :
a link in your current form of the registration process :
<a href="#form/2" ...
in the router definition :
routes:{
"form/:formNumber" : "gotoForm"
},
gotoForm:function(formNumber){
// the code to display the correct form for the current url based on formNumber
}
and then use Backbone.history.start() to bootstrap routing
I'm currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.