Angular js Remove query parameters when changing the url - javascript

I am facing issue in angular js, right now we have two urls in our application,
http://localhost/xyz?page=documents&view=grid&sortorder=desc&sortby=updatedate&limit=35&offset=0
and then we another url
http://localhost/abc
When i move from the first url to the second url it carries the query params from the first url, this is how the second url looks like
http://localhost/abc?page=documents&view=grid&sortorder=desc&sortby=updatedate&limit=35&offset=35
We don't the fetch url carrying the query params from the first page. I am new to angular js, I have came across few options like
$location.search({});
$location.url($location.path())
But those didn't work at all.

I think i know what you mean, to remove parameters use
$location.url($location.path());
Hope it helps

Check this documentation for the location with angular

1.Save the query object $location.search()in some place (local storage or cookies), then in the target controller $.map(query,funcion(k,v){ $location.search(k,v});
2.Dynamically append to the end url2 + $location.path() in href attribute

$location.url changes path, search and hash.
So, $location.url('new_path') should work!

Related

How do I append a query parameter to my URL using Javascript?

I am building a web app and I am using Firebase to store my user's data in Cloud Firestore. There is a page on my web app that allows users to view their documents from Cloud Firestore. I would like to add a query parameter to the end of my URL on view.html so I can take that query parameter value and use it to search for a document.
I have been searching online to find possible solutions. So far I have come across a few videos on the topic, but they haven't been going into the depth I have been needing. For example, this video shows how to add and get query parameters from a URL, but it only shows how to log those changes in the console. How would I make that my URL?
I've also be browsing Stackoverflow for solutions. This Stackoverflow post asks a similar question, however, many of the solutions in the answers causes view.html to reload on a loop. Why would this be, and if this is a possible solution, how would I stop this from happening.
How would I go about appending and fetching URL query parameters in Javascript?
You say you want to do this in javascript, so I assume the page itself is building/modifying a link to either place on the page or go to directly via javascript.
In javascript in the browser there is the URL object, which can build and decompose URLs
let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");
In any case, once you have a URL object you can access the parts of it to read and set the values.
Adding a query parameter uses the searchParams attribute of the URL, where you can add parameters with the .append method — and you don't have to worry about managing the ? and & … the method takes care of that for you.
thisPage.searchParams.append('yourKey', 'someValue');
This demonstrates it live on this page, adding search parameters and displaying the URL at each step:
let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);
I have solved this issue in the simplest way. It slipped my mind that I could link to view.html by adding the search parameter to the URL. Here's what I did:
On index.html where I link to view.html, I created the function openViewer();. I added the parameter to the end of URL href.
function openViewer() {
window.location.href = `view.html?id={docId}`;
}
Then on view.html, I got the parameter using URLSearchParameters like so:
const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');
console.log(id)
The new URL of the page is now "www.mysite.com/view.html?id=mydocid".
You can try to push state as so in the actual view.html
<script>
const thisPage = new URL(window.location.href);
window.history.pushState("id","id",thisPage);
</script>

Redirect to a specific URL with Javascript

what i want to do is simple, let's say I have a URL like this https://www.example.com/pro?type=oil coming from the URL it could anything like /pro?type=beans or /pro?type=rice and what I want is to get the URL redirect it to something like this https://www.example.com/zpro?type=oil. PLEASE THE FIRST URL is /pro? the redirect location is /zpro? Thank you.
If I understand what you want correctly, the below should do it.
window.location.href = window.location.href.replace('/pro?', '/zpro?')
So you can use window.location.href to access the string of the current URL. By setting it to a new value, you can change the current URL! So for you, that means setting window.location.href = window.location.href.replace('/pro', '/zpro'). This will take the string /pro in your URL and redirect to /zpro while keeping your query parameters intact!

Node JS - Express.js get query with multiple parameters

I'm quite new to JavaScript and Node JS and I have a such a situation. When I try to call get of express.js with a single parameter everything works fine, but when I try to call get with more than one parameter, it trims the query.
For example I have such call and function
app.get('path/data', myFunc);
// in another file
function myFunc(req, res) {
// do some stuff
}
When the url is path/data?id=5 or path/data?name=foo everything is fine. But when I use for example url like path/data?id=5&name=foo in myFunc I get url as path/data?id=5. So I get url's first part - what is before & sign.
Now what am I doing wrong? Is there something that I'm missing? How can I get whole url in myFunc without being trimmed?
Use
app.get('path/data?:id?:name')
And for retrieving the values, use req.query.id and req.query.name.
For accessing the REST api, you need to hit:
http://localhost:8080/demo?id=3&name=stack
So, by this you can add multiple parameters in your api.
Hope this helps.
I found the problem. I was requesting via curl and it turns out that shell command trims in case of there is an & in the url. So there is a need no add quotes like this
curl "path/data?id=5&name=foo"

How to remove default link in JS text/template

Anyone can help me on how to remove or replace existing link in JS templating. I use backbone.js for this.
Here is my code:
<script id="option-show-template" type="text/template">
<address>
<abbr title="Website">Web :</abbr> <%= (website)? '' + website + '' : '' %></address>
</script>
Output:
Web: www.test.com
The Problem is even though it will output the correct data but the href attr is not totally display the correct one. My localhost/testserver includes in the href attrib.
Web: www.test.com
What I want is to remove the default base url. Must be output like this way:
Web: www.test.com
Add http://
Try This
<abbr title="Website">Web :</abbr> <%= (website)? '' + website + '' : '' %></address>
What is wrong here??
The problem with your implementation is, when you set href attribute without any protocol(http, https, ftp etc) the browser treat the link as relative path. so when you are viewing the page on http://localhost/testserver/ the url for your page become localhost/testserver/www.test.com
How to fix??
In short, to fix the problem you need to add http:// before your url if there is not any. You can do it in many ways, like :
Update your template as Nitish Kumar suggested.
replacing all url prepend with http:// using jquery
.... or many other ways!!!
The option 1 or 2 is easy enough to implement and would solve your problem, if your are sure your URLs will be always like your example. But will fail for following use cases:
If your url already got a protocol(i.e. http://google.com). Then your URL will become http://http://google.com
If your url is really a relative url(i.e. my/relative/url). Then it should be stay as it is but you will get invalid url without a domain - http://my/relative/url
The ultimate solution!!
So you can use following function to fix your URLS
//Check if it is a valid URL with FQDN
function isValidUrl(url) {
return url.match(/((ftp|http|https):\/\/)?[\w\-]+\.[\w\-]+/);
}
//Check if the url already contain a protocol or not
function hasProtocol(url){
return url.match(/(ftp|http|https):\/\//);
}
//Fix your URL only if needed!!
function setHttp(link) {
return (!isValidUrl(link) || hasProtocol(link)) ? link : 'http://' + link;
}
You can use this function in several way to fix your problem. a sample implementation you can find here
Happy coding!!
The href must start with the protocol if you are using an absolute path. Without the protocol, the browser is going to interpret it as a relative path, leading you to get something like localhost/testserver/www.test.com.
I believe the only real solution to this is going to be to add the protocol to your href.
Are you copying the URL out? www.test.com isn't a valid fully qualified URL. You'll want to prepend http:// to your URL. The only other way that could be entering into things is if the 'website' variable contains that information, which I don't quite get from your question.
Your question is phrased a bit oddly and the example you provide isn't quite sufficient to suggest more at this point (although I will say that I generally discourage ternary operations inside of template echos like you've got).
replacing url prepending with http://. This should get your problem solved

Pass in javascript param in URL

I'm trying to back end this and maybe get lucky modifying the url, what happens is there is javascript code that loads specific data and I want to be able to pass in the script via the URL. Is this possible and how would i do it?
For example here is the javascript: javascript:ChangeEvsVol('1035','3')
here is the urL:https:///app/template/simple%2CDownloadQuotasScreen.vm
Is there a way to manipulate the URL to use that param? I throw in into Firebug command console and it grabs exactly what I need.
document.location ="mysite.php?var1=" + JSvar1 +"&var2=" + JSvar2

Categories