For some reason, content is not being displayed on the website if viewed from the microsoft edge browser. The background is loaded, which is loaded through HTML, but the parts loaded with Vue do not get displayed and i dont understand why.
I have no idea where to start to debug this.
<div class="nk-main">
<router-view :key="$route.fullPath"></router-view>
</div>
In the console, i get these errors on Microsoft Edge:
https://imgur.com/a/y7V3NG7
$store is the VueX variable. And the this error I dont understand.
Does anyone have any idea how I can fix this or how I can further debug the issue?
I think #birdspider answered your question. In your Vue.js templates you referencing to Vuex store like this this.$store.state.blabla instead of $store.state.blabla. This happen because this keyword in template is undefined. When you access your variables in template you have to dont use like {{this.variable}}, just {{variable}}, declared in data() setction.
Related
I am new in Angular
What I am going to try is to get the HTML of a page and reproduce it into an iFrame (it is an exercise).
I am using the following piece of code:
var prova = this._http.get(myUrl, {responseType: "text"}).subscribe((x) =>{
console.log(x);
});
I did it on a website (if is needed I can also insert the name of the pages) and it returns the html only of some pages.
In the other case the string x is empty.
Could it depend on connection?
Or there is some way to wait the end of the get request?
Or simply is wrong my approach and I should make a different type of request?
Your most likely going to need to use a library like puppeteer if you want to render a page properly. Puppeteer is a node library and useless headless chrome so I am not sure how well you could really integrate with Angular.
https://github.com/GoogleChrome/puppeteer
This is an MVC razor page, that works fine on first load.
If I use a reload from javascript or even a refresh in the browser menu (Chrome), I get
Server Error in '/' Application.
>The view 'actionChangeUserSentence' or its master was not found or no view
>engine supports the searched locations. The following locations were searched:
>~/Views/Conduct/actionChangeUserSentence.aspx
>~/Views/Conduct/actionChangeUserSentence.ascx
>~/Views/Shared/actionChangeUserSentence.aspx
>~/Views/Shared/actionChangeUserSentence.ascx
>~/Views/Conduct/actionChangeUserSentence.cshtml
>~/Views/Conduct/actionChangeUserSentence.vbhtml
>~/Views/Shared/actionChangeUserSentence.cshtml
>~/Views/Shared/actionChangeUserSentence.vbhtml
> and so on...
meaning the url string is considered a non MVC url.
I tried several possibilities to reload, including:
-location.reload();
-window.location.reload(false); with both false and true
-location.href = location.href;
-history.go(0);
By the way, the reason I need to refresh is that js drawing on a html canvas doesn't work except after full page (re)load, reason still unknown. But anyway, a browser menu refresh should of course always work, I guess...
Thanks for any help.
I will suggest put that code in on ready function of drawing canvas may this will help you
Use just an Response.Redirect("/<your page>");
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I am building a very light Web-App using AngularJS, and i can't seem to find the correct approach as to how to organize it.
To explain it briefly, the App loads a list of objects after the user logs in, and when he choses an object it loads all the detail from that object.
The app (as I am currently building it) will only have to load short JSON text data, so I thought I could have a single page app in a single HTLM file, directed by a single controller who will handle all the data received from the server, and the different views would have been handled by using HTML snippets and AngularJS directives ng-show and ng-includ, like so :
<div ng-show="correctView" ng-include="login_snippet.html >
</div>
<div ng-show="correctView" ng-include="table-view_snippet.html >
</div>
<div ng-show="correctView" ng-include="detail_view_snippet.html >
</div>
The correctView string is changed by the controller to decide which view is to be showned.
Is this a reasonable approach ? I can't seem to find whick one would suit my App best; it doesn't seem to be the right thing to do because the previous button doesnt work with this method, which can't do.
So,
Is there a way to make it so the previous page button would work ?
If not, what would be the correct thing to do ?Is it possible to have several HTML files sharing the same controller ? Or can some controller send data to another ?
I only found examples of single page applications where only parts of the page is changed when the user interacts with it, and this can't do for mine.
I have a template for picture gallery which is populated with an ajax callback.
The problem is that before the template is populated, since it is looking for an image, I get a console error that the image is not found.
<img src="{{image.url}}" alt="{{image.alt}}">
How can I render this template only once there the data is available?
You are using src which would be intially be null and hence the browser makes a request for it. ng-src fixes it
ng-src='image.url'