I need to modify the URL after opening a new window and navigating to a state.
My starting page looks like this:
localhost:8000/startpage.html.
When it loads the URL becomes
localhost:8000/startpage.html#/.
In the new window I am navigating to a new state:
localhost:8000/startpage.html#/newstate.
What I want is to have the URL looking like this:
localhost:8000/startpage.html?project=1#/newstate.
I am getting almost correct results except that instead of replacing the URL completely it adds
?project=1#/newstate to localhost:8000/startpage.html#/.
So the result is something like this:
localhost:8000/startpage.html#/%3Fproject=903%23/newstate
while what I need is:
localhost:8000/startpage.html?project=903#/newstate
Here is some relevant code:
if ($window.history.replaceState) {
var newUrl = '?project=903' + '#/case';
$location.path(newUrl);
$location.replace();
};
Seems to me I am having two problems. Extra '#/' after '.html' and the URL is encoded. Because even if I remove extra '#/' it still does not work unless I replace encoded characters with real ones.
Please help.
Thanks
I think you are using the wrong method. You want to be using $location.url which will allow you to set the path, query, and hash values all at once. But you may be better off setting the query and hash separately because you don't need to change the entire url.
$location.search('project', '903');
$location.hash('case');
I removed the / from the hash because it isn't necessary.
Also, by default angular uses hash mode to navigate its routes. If you want to supply a hash I think you will need to turn that behavior off.
$locationProvider.html5Mode(true);
Set that in your application's configuration.
Here is a good article: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
With AngularJs 1 the # sign usually follows the page that loads the ngApp Directive... pls correct me if i am wrong.
So i think the only solution to that is to have ngApp directive on the page link where you want the # tag appear...
It is a very bad practice tho.
Related
I have a page with multiple parameters in my URL. I am trying to write a function to use on the click of an element. I want it to check if parameter pthree exists. If it does, update it to a new value (not duplicate it). If it does not exist, append it to my current URL and reload the page.
I am running into an issue when I try to update the current URL.
My current URL structure:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=1&pfour=1&pfive=1
Controller snippet:
$scope.test = function (){
$location.search('pthree', 0);
}
This partially works. It updates my URL, but it adds #?pthree=0 to the end of my current URL.
The result I would like instead is:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=0&pfour=1&pfive=1
Any thoughts on what I could do to get my desired result? Thanks in advance!
Here is what worked for me. I found that I needed to set the HTML5 mode of my app. Read more about HTML5 mode here: https://docs.angularjs.org/guide/$location.
After this, I ran into another issue when calling $location.search({ pThree: '0' }. It started writing over all of my other parameters. For example, the URL structure was changing to ?pThree=0. To solve this I had to read all parameters, update pThree, and then write all back.
I hope this helps someone else.
You can do this pretty easily by just doing:
// existing url with params
// http://myurl.com/path/view/etc?param1=abc¶m2=def
// add your new param to the search() object
$location.search().param3 = 'ghi';
// set your search again with the updated search object
$location.search( $location.search() );
This will update your url like so:
// http://myurl.com/path/view/etc?param1=abc¶m2=def¶m3=ghi
I have a Node.js REST API service and I have a resouce - Link for example.
To get all links I use GET /links
To submit new link I use POST /links
To get one link by linkid I use GET /links:id
Each link have an array of Tags and I need a REST style URI to get the links by tag value. What will be REST style URI in this case ?
For getting the links of a certain tag you can define the following route:
/tags/:tagID/links
And for getting tags of a certain link:
/links/:linkID/tags
I think it should be:
GET /links/:id/tags
that should return all the tags related to the link with id ":id"
If you like to work with your tags as a separated thing you could do it like this:
GET /tags ==> retrieve all tags.
GET /tags/:id ==> retrieve tag with id..
GET /tags/links/:id
Also resftull is not strict, and some times, the resource, or action that you need to execute does not fit in that schema, and you can create a custom method:
GET /tags/get-for-link-id/:id => retrieve tags related to a link
That example is pointless, but consider that you are having a complicated route with so much params eg:
GET /tags?q=return&state=active&sort=date if this request is repeated so much times, for your api customer it would be pleasant to have a custom alias like GET /tags/activeByDate
It depends. TYou can do something like /blah:{tagId}/ (which is perfectly valid URI as well). Or you can do /links/?tagID={id} and so on. I don't prefer the already mentioned hierarchical URI /tags/{id}/links, I think a flat URI is much better. If the relationship has attributes as well, then you can use /tag-link-relationships/{relationshipId} or /tag-link-relationships/tag:{tagId}/ or /tag-link-relationships/?tag={tagId} etc...
From client perspective the URI structure does not matter, because the client follows the hyperlinks the service responds with (aka. uniform interface / HATEOAS constraint).
off: Almost every day we got this question, at least try to search next time.
I'm new to ExtJS. I'm working with ExtJS 5. I thought it would be an easy thing to find on google, but after a long search I didn't get a clear, understandable answer. I want to pass a parameter when navigating from one page to another, so I'm able to use the value of the parameter on the second page. I use the following method to navigate to that second page:
Ext.History.add('page2')
I have the parameter I want to send assigned to a var, so if it was possible to do it like below, I could do something like:
Ext.History.add('page2?parameter=' + variable);
Update:
I solved this problem by passing a cookie and retrieving it on the next page with
Ext.util.Cookies.set(cookieName, cookieValue);
and
Ext.util.Cookies.get(cookieName);
Do you mean something like this:
var itemId = record.getData()["id"];
Ext.History.add('item&id=' + itemId); // adding items
Ext.getCmp('page2').getLayout().setActiveItem(1); // go to page
You can set parameters by adding it inside a history.add(). Take a look on
Senscha Ext.History.
In ExtJS 5 the router is the right way to do this if you need back button compatibility.
Please read
http://docs.sencha.com/extjs/5.0/application_architecture/router.html
ExtJS apps are typically single page apps so when you go from "page" to "page" (actually just panel to panel), typically URL does not change.
As far as passing params when you open a new panel, you would just let your controller handle that OR set the param in the constructor of the new Panel.
Please paste some sample code and maybe I can provide a more precise answer.
-DB
I need my app execute a function when the URL looks like this
domain.com/mobile/#email_confirmed/email#address.com/otherparam
I added this route to one of my controller:
'email_confirmed/:email/:first': 'emailConfirmed'
as well as this function:
emailConfirmed: function (email, first)
But the function never gets called... However if I change go to this url :
domain.com/mobile/#email_confirmed/emailaddresscom/otherparam
then it works fine. I guess the problem comes from the at symbol and the dots in the email address. Therefore, I was wondering if there is another way of declaring the route so that it accepts email address.
Nice question,
There are a couple hoops you have to jump through to do this, firstly you need to encode or parse in your '#' symbol. Do this either by encoding to %40 OR by passing additional parameters. For example /myemail%40gmail/com/first OR /myemail/gmail/com/first, then create function(usernamedomain, tlDomain, first) OR function(username, domain, tlDomain, first) respectively. Then inside function decode the %40 OR parse together the address.
The other way I could see you solving this would include bypassing the routing system altogether. Instead of creating a link for your user to interact with create a Sencha Component that will fire an event you can listen for (list, button etc..), then inside your controller you can either use the data inside a function in that controller or call another controller function using this.getApplication().getController('SomeOtherController').handleEmail(email, first);
I have not tried it but with the last option you should not have to encode your url at all.
Again, nice question. Let me know if there are some other specifics,
Good luck, Brad
The solution I came up with is to set up the route like this:
'email_confirmed/.*': 'emailConfirmed'
And then I retrieve the params like this in emailConfirmed:
var hash = window.location.hash.split('/');
hash.shift();
// hash[0] => email
// hash[1] => first
In my case :
I have created a form and in the form there is a button and a combo box that contains the data (Say it page A). When I click on the button, all I wanted was to call page B to perform a second process. The syntax for calling the page B is :
bb.pushScreen('PageB.htm', 'PageB', {'Key': MyComboValue});
How do I after page after page B called B will capture and get the value of the "MyComboValue" being sent from page A ??
Regards,
Bertho
Firstly, this is available in bbUI 0.94 (next branch) just to make sure you're running the right build.
Now, the object you pass to the new page is available in the ondomready, and onscreenready functions, so you would do something like this:
onscreenready: function(element, id, passed_object) { }
There are several ways to achieve this:
Use cookies to save the data. Wouldn't recommend it much.
Use localStorage. Works for newer browsers, some browsers won't be able to enjoy it.
Pass the values as querystring parameters when doing the change of url.
I would go with the third option myself. If you're only using JavaScript and you're not using any server side programming language:
Attach an event to the button so that when clicked, it fetches the data and generates a querystring. Then: top.location = "http://something/PageB.htm?" + querystring;
On the Page B, read the querystring (top.location.href) and parse it to get the querystring. Use the values of the querystring to set whatever you want on your page.
If you require code or if I misunderstood, please tell and I will check right away!
EDIT: I just realized you tagged your question as using blackberry-webworks. I have never worked with it and thus I have no idea if my solutions make sense on it. Try to specify it on your question too if possible, or in the title :)