I am working in ServiceNow and have a button that pulls up a modal window that renders an embedded form. When a user submits, I have the embedded form $broadcast 'closeModal', and the button receives it to close. My client script looks like this for the embedded form:
$rootScope.$broadcast('closeModal');
and on my button that brings up the modal, my client script looks like this:
$rootScope.$on('closeModal', function() {
c.modalInstance.close();
});
This actually does close the modal window, but my console is showing "TypeError: Cannot read property 'close' of undefined"
Any idea why this is showing up?
Additionally, in my screenshot above, that typeerror actually shows up twice, for two different widgets. I am broadcasting and retrieving the same event for both widgets. I'm not sure if that's against best practice, but I've tried changing one of them to 'closeModal2' for example and the same typeError still shows.
Any suggestions or advice is greatly appreciated!
-- ADDED --
This is a screenshot of my console after logging c:
Simple hack is :
$rootScope.$on('closeModal', function() {
c.modalInstance && c.modalInstance.close();
});
Another suggestion is use $rootScope.$emit and listen at specific scope level $scope.$on
Related
I am trying to go back to the previous page using angularJS when browser back button is clicked as it is not happening by default. I have written the below code and it is throwing an error.
something() {
this.scope.$on("$locationChangeStart",function(){
this.scope.transferTo('dashboard')
//$window.history.back();
});
}
I am calling something function in $onInit.
Error:
TypeError: Cannot read property 'scope' of null (getting this error 4 times)
Classic this binding issue.
Replace function(){} with () => {} or assign this to a variable, like let self = this.
In a React component, I tried rendering
<a id="help" onClick={this.handleHelp}>{_('Help')}</a>
and I put
this.handleHelp = this.handleHelp.bind(this);
in the constructor. So I want to bind that click to our legacy javascript Help library.
I tried
handleHelp(e) {
e.preventDefault();
window.Help.init('some_value');
}
When clicked, absolutely nothing happens, including no messages nor errors in developer console. The Help jquery script is loaded at the time. On init, that binds $("#help").on("click", showHelp); so I was hoping I could somehow trigger that click in the handleHelp handler, but I've not been able to figure out how.
UPDATE: Thanks to responders, I figured out to just add a call to the window.Help.showHelp() function into my handleHelp, after window.Help.init(). (Obvious, in hindsight.)
Just started out using angular.js and implemented a directive that reads from a property in the scope that's defined only when a button is clicked. The UI looks fine also because the directive part is only shown when the button is clicked. However in the console when the page is first loaded there is an error message saying "Cannot read property someProperty of undefined".
I must be violating some angular principles but I'm not sure how to fix it. Thanks for the help!
Note: Didn't do a fiddle because this is a general question.
Generally speaking, if you have code patten like
$scope.myObject.property
then you could see the error when myObject is undefined.
One possible way to eliminate the error the code work is make sure the object is always initialized when any property is intended to be referred.
You can put this line before the property is referred.
$scope.myObject = {};
Or do
if($scope.myObject !== undefined){
...
}
There is no rocket science here.
(Follow on questions from Placeholder Hidden)
I'd like my form to validate existing data when it is loaded. I can't seem to get that to happen
I jQuery.each of my controls and call focus() and blur(), is there a better way than this? I tried to call ctrl.checkValidity(), but it wasn't always defined yet. When it was, it still didn't mark the controls.
I seem to have a timing issue too, while the focus and blur() fire, the UI does not update. It's as if the Webshims are not fully loaded yet, even though this fires in the $.webshims.ready event.
I also tried to call $('#form').submit(), but this doesn't fire the events as I expected. The only way I could make that happen was to include an input type='submit'. How can I pragmatically case a form validation like clicking a submit button would?
Here's a jsFiddle that demonstrates the problem. When the form loads, I want the invalid email to be marked as such. If you click the add button it will be marked then, but not when initially loaded. Why?
Focus and blur in the control will cause it to be marked.
BUT, clicking ADD will too (which runs the same method that ran when it was loaded). Why does it work the 2nd time, but not when initially loaded?
updateValidation : function () {
this.$el.find('[placeholder]').each(function (index, ctrl) {
var $ctrl = $(ctrl);
if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
// alert('Do validity check!');
$ctrl.focus();
$ctrl.blur();
}
});
}
I see this in FF 17.0.5. The problem is worse in IE9, sometimes taking 2 or 3 clicks of ADD before the fields show in error. However, I get errors on some of the js files I've liked 'due to mime type mismatch'.
This has to do with the fact, that you are trying to reuse the .user-error class, which is a "shim" for the CSS4 :user-error and shouldn't be triggered from script. The user-error scripts are loaded after onload or as soon as a user seems to interact with an invalid from.
From my point of view, you shouldn't use user-error and instead create your own class. You can simply check for validity using the ':invalid' selector:
$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');
Simply write a function with similar code and bind them to events like change, input and so on and call it on start.
In case you still want to use user-error, you could do the following, but I would not recommend:
$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
$('input:invalid')
.filter(function(){
return !!$(this).val();
})
.trigger('refreshvalidityui')
;
});
i'm creating an AlertFactory because ui.bootstrap.dialog doesn't works in my app.
So i type follow code: http://jsfiddle.net/Premier/BHqKB/17/
enter code here
It works very well if you click on the "Open dialog" button: on screen appear a dialog with my messages.
I also register a listener on keydown: listener fires a broadcast event on which is registered a scope related function. This function calls openDialog to show the dialog. In this way angular doesn't interpolates arguments and alert is shown with {{title}} placeholder.
What is wrong in my code?
Thank you.
You need an $apply to invoke a digest cycle.
ng.element(document).on('keydown', function(e){
//alert('keydown');
//openDialog();
$rootScope.$broadcast('openDialog');
$rootScope.$apply();
});