Add or update current URL parameter using angular's $location - javascript

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&param2=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&param2=def&param3=ghi

Related

Google Tag Manager Virtual Page View

I have a little problem setting up a virtualPageView which should override the URL which is sent to google when no result is present.
Heres what I have as JavaScript code:
function returnNoSearchResultsGoogleTagManagerCode($searchterm){
if ($searchterm == "") return "";
$requestUri = $_SERVER['REQUEST_URI'] . "&no_result=".$searchterm;
$js = "<script>
$(document).ready(function(){
dataLayer.push({
'event':'empty_result',
'virtualPageURL':'".$requestUri."'
});
});
</script>";
return $js;
}
As you can see, I want to use an event trigger (empty_result).
In google, I use a Trigger to determine if the Page is a no result Page. First i created a custom Variable with custom JS
function(){
if (document.getElementsByClassName('ga-no-result').length > 0){
return true;
}else{
return false
}
}
The class is set, if the SearchEngine can't find a result. So far so good.
I also created a dataLayer variable to hold the virtualPageURL
Now I need an event which is triggered if the variable is true.
Finally I created a Tag with type PageView which is fired when the event occurs:
Until now it seems okay, the Tag is properly configured (i guess) but if I do a search which has no result, the Page URL is not overridden
The Tag is properly fired and the variables are filled. The overview of the dataLayer shows a correct dataLayer event.
But the PageURL is not overridden... Even if I wait a whole day, the category isn't sent to google.
What am I doing wrong?
I would be very thankful if someone would have an idea or even a solution :)
Thanks in advance
exa.byte
UPDATE:
Hey, I forgot to mention, that I want to use the new page variable as the string which google should use to determine the searchterm and the searchcategory
In Google Analytics I configuered the search as the "q" parameter and the "no_result" as the category.
Is it even possible to change the string which google will parse in the end?
To send a virtual pageview to Google Analytics, the field you need to change is page not {{Page Url}} , also the title field is often used.
That's really the only two things you need to do to send a simple virtual pageview.
Extra: I always start my pagepath with /virtual/ to be able to recognize which ones are virtual pageviews easily in GA
For virtual page view you have to change Field "page" - in your GTM-OnSearchEmptyResult you are changing "{{Page URL}}" - I don't think that's correct way to send virutal pageview. Also if you need to change hostname use Fieldname "hostname".
In preview mode you will not see Page URL changed in Variables Tab, you have to go to the actual GA tag that is fired and check it's values. You can either do this in GTM's preview tool or you can use standard developer tools - Network Tab and see what values are being sent to GA:
You can see "dl" parameter is the current page, if you set up virtual page you should also see parameter called "dp" this is going to be the new value of page in your GA.
If you want to setup virtual pageview you have to use page instead of {{Page URL}} in your fieldname and for Document title use title in you fieldname.
for more field reference of google analytics follow below link
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitType.
If you don't want to mess around with custom Tag Manager events it's still possible to use the good old ga method, even if you don't include the Analytics code on the page. You just need to fetch the right tracker dynamically, as explained by Simo Ahava in this thread.
if (typeof ga === "function") {
ga.getAll().forEach((tracker) => {
tracker.set('page', '/my/path'); // <- change here
tracker.send('pageview');
});
}
I also put it in a gist here.
thanks for your help. I think I got rid of the Problem and have solved it now. I will describe my solution below:
The solution is quite simple.
I had an error/ spelling error # google backend. I set the search_category parameter to "no_results", but used "no_result" for implementation...
Pretty dumb, but sometimes you just won't see the wood for the trees...
I created a new Trigger as helper "HelperDomReady" to trigger the only if DOM is ready and the variable "isEmptySearch" equals "(bool)true"
Now I can see the searchterms which have no result in google backend in the "sitesearch categories" summary. Since I won't set the parameter at all, if the search had at least one hit, the site-search category shows "not-set" for successful results. Therfore the category-section will only show searches without a hit. Problem solved :)
Disadvantage: The searchterm is also listed in the normal list. But I think this is negligible

Replace URL in Angular environment

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.

How to build custom URL by adding ?&params in Angular?

I'm trying to build a custom URL and update the URL as the user selects items in my dashboard.
For example, after clicking a few items the URL could/should look like:
#/dashboard?&portfolio=GOOG&ticker1=GOOG
Currently the URL only ends in /dashboard (console.log($location.path());)
How would I update the $location.path() to add params like so? There's plenty of questions/answers and guides on getting params from the URL, but how would you update the URL in the first place?
Say if you want to add the following:
?&portfolio=GOOG&ticker1=GOOG
just organize your params in an object, like
var params = {
portfolio: GOOG,
ticker1:GOOG
}
and use,
$location.url('/dashboard ').search(params);
Hope it helps !!!
I think I'm understanding what you're saying. I believe you could use a PHP GET function to do that. A GET function in PHP will add the information you're trying to communicate to the backend to the URL, while the POST function does not.

Passing parameters in ExtJS

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

Send variable value from page to another page

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 :)

Categories

Resources