Hi guys I am trying to click a button in my Vue.js page to a different .html page that exist in my public folder.
So I am using this way
<button #click="window.location='public/test.html'">See Results</button>
However I get an error that says
"Property or method "window" is not defined on the instance but referenced during render"
How do i navigate to a different page in Vue.js?
I would recommend using vue-router if you're doing the spa approach. It will prevent your page from refreshing when you go to a different page and it will be much faster. But if you don't want to do that you could just use an anchor tag to handle the navigation for you.
<a href="/test.html">
<button>See Results</button>
</a>
You can try to call a method #click="navigateToTestHtml" and put your code in it
methods: {
navigateToTestHtml() {
window.location='public/test.html'
}
}
However, as Vue is a Single Page Application I think it would be better to create another page and add routing for it. Vue Routing Docs
You can't write 'window' into button tag, because window is not defined.I suggest that can write into 'methods',eg:
methods: {
goToHtml() {
window.location = 'public/test.html';
}
}
But, if you use vue.js, I recommend you use vue-router. One page navigate to another page, eg:
methods: {
goToPage() {
this.$router.push('/another/page');
}
}
vue-router navigation usage
Related
I have a text message that my ionic app retrieves from an api that has an anchor link which needs to redirect to another page when tapped.
The html from the api is:
Tap Here
The ionic function is:
goToOtherPage(): void {
this.navCtrl.push(OtherPage);
}
I have tried:
<a onclick="goToOtherPage()">Tap Here</a>
and
Tap Here
but the first two give the message:
goToOtherPage is not defined
and the last one does nothing.
Does anyone know how I can trigger a function from dynamically retrieved html?
This will not work due to the DomSantizer that sanitizes unsafe html. I recommend retrieving the different parts of the message (eg. using JSON) and generating the page link and message via your page/component.
I want to create a view for back button using HTML. Actually condition is that that view of backbutton should be connected to the another page when once if we operate the web page.
Hello you need to override the backbutton, then load your HTML page.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
document.getElementById("target_div").innerHTML='<object type="text/html" data="target_page.html"></object>';
}
I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
I am working with angularjs in html 5 mode. Which appears to take control of all href's on the page. But what if I want to have a link to something within the same domain of the app but not actually in the app. An example would be a pdf.
If i do <a href="/pdfurl"> angular will just try to use the html5mode and use the route provider to determine which view should be loaded. But I actually want the browser to go to that page the normal way.
Is the only way to do this is to make a rule with the route provider and have that redirect to the correct page with window.location?
in HTML5 mode, there are three situations in which the A tag is not rewritten:
from the angular docs
Links that contain a target attribute. Example: link
Absolute links that point to a different domain Example: link
Links starting with '/' that lead to a different base path when base is defined Example: link
so your case would be 1. add target="_self"
As of Angular v1.3.0 there is a new rewriteLinks configuration option for the location provider. This switches "hijacking" all the links on the page off:
module.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
});
While disablig this behavior for all links may not be your intention, I'm posting this for others who, like me, want to use $location in html5 mode only to change the URL without affecting all links.
If you don't want Angular to take control of the href. Place a target attribute on the link.
So PDF will by pass the html5mode and the routeProvider and the browser will just go to that url.
Other solution. All links will work normally (reload page). Links marked by ng-href="/path" will play on pushState. Small JS hack help with it.
.config(["$locationProvider", function($locationProvider) {
// hack for html5Mode customization
$('a').each(function(){
$a = $(this);
if ($a.is('[target]') || $a.is('[ng-href]')){
} else {
$a.attr('target', '_self');
}
});
$locationProvider.html5Mode(true);
}])
I'm developing a web site where I want the left menu to stay fix, while the content of the clicked option is loaded.
Actually, what I do is that each menu link using AJAX it return the requested content. Everything works fine but I would like to avoid it because then statistics are difficult to follow (among some other things like Google boots).
How can I do the same affect/similar (http://www.foundcrelamps.com/) without javascript?
What I would do is a bit different. I'd make the links on the menu valid links that point to the content. Eg Contacte to point to http://www.foundcrelamps.com/contacte so that if you paste that link in the browser, it will load the page directly.
Then keep the ajax, so that the user does not reload the whole page on every click.
You can use History.js to keep the browser history and modify the URL so that back/next buttons work, even with ajax.
Edit, if you use conventional a elements with standard href it might look like this:
$('a').click(function(){
$('YOUR CONTAINER').load($(this).attr('href'));
return false; // so that it does not load the whole page
});
Then on the server you should do something like this:
/* AJAX check */
$isAjax = false;
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest') {
$isAjax = true;
}
if (!$isAjax) {
outputHeader();
}
outputMainContent();
if (!$isAjax) {
outputFooter();
}
This way when you do ajax, you will load only the inner content. When not, it will load the whole page.
There is an alternative method - you might load the whole page with jQuery but only use inner part of the html to replace the original content.