I am trying to create a function that change to another page depending certain value, I just can't find a way to do it.
Something like this
get the current page www.mypage.com
insert a new route
url = "/reports"
so when the funcion executes the page will redirect to www.mypage.com/reports or anything depending the url
$scope.searchPage = function (url) {
/// page = www.mypage.com + url
};
You can use $location(docs) to do this and your code will look like:
$location.path('/reports');
this will navigate to yourdomain.com/reports.
Another solution would be to use $window(docs) like:
$window.location.href = 'http://www.mypage.com/reports'
I personally use $location service to navigate inside the angularjs application and if you want to redirect to an external page in new tab via javascript you can do something like:
window.open('http://www.mypage.com/reports', '_blank');
To change the URL of a page with JavaScript, you just specify it on document.location.href:
document.location.href = 'http://example.com/new-page';
It is just a string, so you can build it however you want and pass it in.
For Angular, you can use the $window.location.href instead. Just be sure to inject the $window dependency:
$window.location.href = 'http://example.com/new-page';
Using the Angular way will allow a single-page-app to remain single page if it's within your site.
Related
Using JavaScript, how can I make it redirect to another site based on the URL?
(Example)
If someone goes to https://example.com/12345, it will redirect them to https://example.net/12345.
And if someone goes to https://example.com/abc123456, it will redirect them to https://example.net/abc123456
How can I do this?
In the place that you have hosted that domain, See if you can find something that makes it a single page app or a way to rewrite all urls to one page so that it doesn't show 404 not found. (not certain how you can do that, I only done it with firebase hosting, it has a way of configuring it so that no matter what url you give it, it always shows you the same page, and also the url doesn't get changed ) if you can do that, this is the code you need:
let pathname = location.pathname //if the url is https://example.net/1234, the path name will be /1234
location.href = "https://example.net" + pathname //if you add that to this string, it would be https://example.net/1234
You can use following code for that:
location.href = 'https://example.net/12345';
location.href = 'https://example.net/abc123456';
Or used following code for that:
location.replace('https://example.net/12345');
location.replace('https://example.net/abc123456');
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>
Suppose I have
def bar(request):
template = loader.get_template('activation/bar_chart.html')
context = RequestContext(request,{'name':'bar_chart'})
return HttpResponse(template.render(context))
I want to send a http get request via the javascript in the template
$.get('/bar/')
But it does not render the bar_chart.html, I still stay in the current html page.
If I use the load function in the jquery
$('body').load('/bar/')
then the content of bar_chart.html will replace the body of the current html page. But I want to go to a new page (that is, the url should be /bar)
How can I do that with django and jquery?
Thank you
If you want to go to the /bar/ page you just need to change the location property. JQuery is not needed here:
location.href = "/bar/";
I think i've run into this issue before as well.
If I remember correctly you can do the following
return HttpResponse(template.render(context), mimetype='application/json')
I am forcing my page to change the url without refreshing the page
var pageurl = "mypage.php?myTerm"+newTerm;
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
which works great to change the url to newTerm as in mypage.php?myTerm=newTerm
but not if I run
$term = $_GET["myTerm"];
I end up with the oldTerm before the url change. The only way the _GET picks up newTerm is if I hit refresh, which puts me at square 1.
The point of using pushState is to update the URL to reflect the current state of the page as modified by JavaScript.
If you just want to go to a new URL, then assign a value (a string containing the URL) to location instead of using pushState.
If you want to use pushState then change whatever it is in the page that you use $term for with JavaScript. Use Ajax to fetch new data from the server if needed.
I am trying to implement a search function for my website. When the user types a search term foobar into a input box and submits it, he is redirected to http://mydomain.com/search?query=foobar.
Problem:: How should I grab the GET parameters query from the URL, and send it to the backend and get a array of results back as a JSON response? Should I even do it this way?
My current attempt below does not even cause the search function to be triggered.
Router
var AppRouter = Backbone.Router.extend({
routes: {
'search?query=:query': 'search'
// ... and some other routes
},
search: function(query) {
this.photoList = new SearchCollection();
var self = this;
this.photoList.fetch({
data: {query: query},
success: function() {
self.photoListView = new PhotoListView({ collection: self.photoList });
self.photoListView.render();
}
});
}
});
var app = new AppRouter();
Backbone.history.start({
pushState: true,
root: '/'
});
There have been several issues filed against Backbone for this very issue. There is an existing plugin that works well for this:
https://github.com/jhudson8/backbone-query-parameters
Alternatively, I'm currently using query string parameters in a mock API that matches Backbone's route matching. Looks something like this
Route
"/api/v2/application/:query"
Query
application: function(query) {
var params = $.deparam(query.slice(1));
// params.something...
}
As to your actual issue at hand how are you redirecting to index.html to support pushState?
I hit this same issue and contemplated using backbone-query-parameters, but that should be considered generally an incorrect approach.
The url query string is not meant for the front end. They get sent to the server and force a refresh when navigating from page.html to page.html?something=something.
You should be using hash fragments instead. i.e. http://www.example.com/ajax.html#key1=value1&key2=value2 then just get those values the normal backbone way and build your request params from that.
See https://github.com/jashkenas/backbone/issues/891, https://developers.google.com/webmasters/ajax-crawling/docs/specification, https://www.rfc-editor.org/rfc/rfc3986#section-3.5
You can always read the URL via jQuery URL plugin. It works well.
https://github.com/allmarkedup/jQuery-URL-Parser
There are very few cases when you need to read the URL and extract the GET params. I think that you are doing things wrong and here are my options:
1) if you are having just one page in your app (single app page) you can display results as they type in your input field or after they hit submit
2) if you are redirecting the user to a different page that means you can bootstrap data so that after the page is loaded backbone will just have to render your results and only make other requests if you change your search word
3) you can have a javascript variable which is initialized on page load directly from the server where working with GET params is probably easier