I am implementing Vuelidate in my Vue app. And this is my submit button html in pug.
button(#click="SUBMIT") Submit
And this is my SUBMIT method which I can debug.
async SUBMIT() {
debugger
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
My problem is this.$v.$invalid is always true even though I think all my input pass validation. So my question is how do I see all the validation error when this.$v.$invalid is true? I want to use console.log to see it.
You can use this.$v.$errors to access the full list. In your code for example:
async SUBMIT() {
debugger
this.$v.$touch();
// Print a list of all errors
console.log(this.$v.$errors)
if (this.$v.$invalid) {
return;
}
In the documentation, this section on collective properties I found useful for seeing what is available.
Related
I have a simple page with an input element that has a DOM event (input). The HTML page also calls a function that just outputs something via console.log. Now when I open the page, it will show the log, but when I type something into the input field, it will also trigger the function EVERY time I type something.. (Actually, when I type a letter, it will console.logs TWICE every time)
Why does this happen? How to prevent it? I read some things about changeDetection, but is there another solution?
HTML:
{{test()}}
<input class="input-msg" [value]="textValue" (input)="textValue = $event.target.value;">
.ts:
export class TestComponent implements OnInit {
constructor() {
}
test() {
console.log('test message');
}
}
Expected Behavior:
The {{test()}} should not be called when typing something into the input field
Since you're calling a function in one of the data-binding syntaxes, whenever Angular performs Change Detection, it will call this method.
Before for a function, anything that cases is the value that it returns. And for Angular to know that the returned value has changed, Angular will have to run it.
This is the exact same issue that people have raised a several questions here:
Angular: Prevent DomSanizer from updating on DOM Events
Angular performance: ngStyle recalculates on each click on random input
Angular 7 ,Reactive Form slow response when has large data
You might want to read through these threads to understand what's going on here and how you can fix this issue.
The solution is to basically design your implementation in such a way, that it never calls a method in one of the data-binding syntaxes, i.e.
In String Interpolation - {{ methodCall() }}
In Property Binding - [propertyName]="methodCall()"
In Attribute Binding - [class.className]="methodCall()" / [style.style-name]="methodCall()"
An alternative solution is do move this code to a Child Component and configure the changeDetectionStrategy on that child component to ChangeDetectionStrategy.OnPush
I'm am pretty new to DOJO 1.8 and would like to know how I can call a function from outside a require-method? I try to implement a message-box which fades in and out.
I created the method:
require(["dojo/dom", "dojo/on", "dojo/domReady!" ], function(dom, on, ready) {
/*function which shows a msg-box on top of the page */
var showMsg = function(text) {
dom.byId("msgbox").innerHTML = text;
}
});
OK! IT works....but I no I would like to call it from somewhere else in my application:
showMsg("Item saved");
But that doesn't work: Uncaught ReferenceError: showMsg is not defined
How do I get that reference?
Thank you for your help!
AFX
As things stand you're declaring a local variable and so it's not visible elsewhere in the program.
You could make the variable global, for example
window.showMsg = function(text) {
dom.byId("msgbox").innerHTML = text;
}
The downside of this approach is that as you application gets bigger you end up with more and more global variables and that makes maintenance harder.
So Dojo offers ways to package chunks of reusable code and refer to them. You are already exploiting some of those capabilities when you use "require" - you're getting access to chunks of dojo. You can make your own code visible as reusable chunks in the same way.
This is quite a big topic, but you could start by reading this
Another thing you can do is to move the require inside the function.
Even if you have many such functions, while it's annoying to repeat, there is essentially no runtime penalty for requiring over and over. The only thing to watch for is that code inside the function becomes asynchronous, so instead of returning a value you have to use a callback or promise.
Alternatively, if you're only using this function from within some event handlers (I see dojo/on), you can set them up within the scope of this same require block.
I'm building a chrome extension and trying to get data from twitter and then pass that to my contentscript. I'm having a lot of problems with this. I'm able to get the data from the remote site but can't seem to pass it to my content script. I have a listener for when i click the icon using chrome.extension.onclick.addlistener(functionname);. This gets the data. The Problem is once i get the data, i need to send a response to the request from my content script. So i'm also calling chrome.extension.Onrequest.addlistener(functioname);. Before i go on trying to figure out what's wrong with the code, is it allowed to have 2 listeners for 2 separate events in the same page as i've done or can you only have one listener?
I know this is a crazy old question, but I came across this while experiencing a related issue and wanted to share in case it was useful for anyone else.
Make sure you're only calling the sendResponse method at most once if you do have multiple listeners. From the docs:
sendResponse: Function to call (at most once) when you have a response.
The argument should be any JSON-ifiable object. If you have more than
one onMessage listener in the same document, then only one may send a
response. This function becomes invalid when the event listener
returns, unless you return true from the event listener to indicate
you wish to send a response asynchronously (this will keep the message
channel open to the other end until sendResponse is called).
If you do a quick search on Stackoverflow, you will see many examples with code on how to send messages from background page to content script:
https://stackoverflow.com/search?tab=relevance&q=content%20script%20background%20page
For more information how to do this, you can follow the docs themselves, they have great examples:
http://code.google.com/chrome/extensions/messaging.html
From the documentation (copy paste):
content_script.cs
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
background.html
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
The fact that you have created a listener for the onClick event and a listener for the onRequest event is not a problem. You can tell by typing out chrome.onClick and chrome.OnRequest at the console for the background page; you'll see they are each instances of type 'chrome.Event'.
If you think about it, if you were only able to create one listener it would greatly reduce your ability to write something useful since you could only respond to one of { onrequest, onclick, ontabchange, onconnect, ondisconnect, etc. }
I followed http://www.beakkon.com/tutorial/html5/desktop-notification tutorial for html 5 desktop notifications. The demo on that page work for me. If i copy entire code it works so, but... when i call the method from javascript it don't display niether the notification or permision request. Instead it raises SECURITY_ERR: DOM Exception 18.
It seems the error is raised by the line which creates the notification itself.
Has anybody glue why button works and calling the function directly does not?
My current code:
function RequestPermission(callback)
{
window.webkitNotifications.requestPermission(callback);
}
function notif() {
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(notif);
}
notification = window.webkitNotifications.createHTMLNotification('http://localhost:3000/images/rails.png');
notification.show();
}
Does not compute:
notif();
Computes:
<button onclick="notif()">NOTIFY</button>
Google Chrome: 9.0.597.84 (Oficiální sestavení 72991)
WebKit: 534.13
SECURITY_ERR: DOM Exception 18 is valid if the user hasn't allowed your request to have notifications.
The reason why this is happening is simply because requestPermission is asynchronous. Once the user clicks on Allow, for permission to be granted, it will then allow you to use HTML5 notifications feature.
In your case, your not waiting for the user to click on Allow button, it is automatically trying to create the HTML5 notification without evening waiting for their confirmation. If you rearrange your conditionals, it should work.
function RequestPermission(callback) {
window.webkitNotifications.requestPermission(callback);
}
function notif() {
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(notif);
} else {
notification = window.webkitNotifications.createHTMLNotification('http://localhost:3000/images/rails.png');
notification.show();
}
}
As you notice above, place the notification creation in the conditional statement, when a callback gets fired it will be guaranteed to have permission.
I believe the createHtmlNotification accepts only one parameter, and that is to be
a url to an HTML document.
In Google Chrome's extension developer section, it says
The HTML pages inside an extension
have complete access to each other's
DOMs, and they can invoke functions on
each other. ... The popup's contents
are a web page defined by an HTML file
(popup.html). The popup doesn't need
to duplicate code that's in the
background page (background.html)
because the popup can invoke functions
on the background page
I've loaded and tested jQuery, and can access DOM elements in background.html with jQuery, but I cannot figure out how to get access to DOM elements in popup.html from background.html.
can you discuss why you would want to do that? A background page is a page that lives forever for the life time of your extension. While the popup page only lives when you click on the popup.
In my opinion, it should be refactored the other way around, your popup should request something from the background page. You just do this in the popup to access the background page:
chrome.extension.getBackgroundPage()
But if you insist, you can use simple communication with extension pages with sendRequest() and onRequest. Perhaps you can use chrome.extension.getViews
I understand why you want to do this as I have run into the problem myself.
The easiest thing I could think of was using Google's method of a callback - the sendRequest and onRequest methods work as well, but I find them to be clunky and less straightforward.
Popup.js
chrome.extension.getBackgroundPage().doMethod(function(params)
{
// Work with modified params
// Use local variables
});
Background.html
function doMethod(callback)
{
if(callback)
{
// Create/modify params if needed
var params;
// Invoke the callback
callback(params);
}
}
As other answers mention, you can call background.js functions from popup.js like so:
var _background = chrome.extension.getBackgroundPage();
_background.backgroundJsFunction();
But to access popup.js or popup.html from background.js, you're supposed to use the messages architecture like so:
// in background.js
chrome.runtime.sendMessage( { property: value } );
// in popup.js
chrome.runtime.onMessage.addListener(handleBackgroundMessages);
function handleBackgroundMessages(message)
{
if (message.property === value)
// do stuff
}
However, it seems that you can synchronously access popup.js from background.js, just like you can synchronously access the other way around. chrome.extension.getViews can get you the popup window object, and you can use that to call functions, access variables, and access the DOM.
var _popup = chrome.extension.getViews( { type: 'popup' } )[0];
_popup.popupJsFunction();
_popup.document.getElementById('element');
_popup.document.title = 'poop'
Note that getViews() will return [] if the popup is not open, so you have to handle that.
I'm not sure why no one else mentioned this. Perhaps there's some pitfalls or bad practices to this that I've overlooked? But in my limited testing in my own extension, it seems to work.