The pre rendering is not working when I bind the "disabled" directive to a function which contains a console.log().
<button [disabled]="!isValid()"></button>
My function
public isValid(){
console.log("isvalid");
return true;
}
From my visual studio output console, I got this :
Microsoft.AspNetCore.NodeServices: Information: isvalid
Microsoft.AspNetCore.NodeServices: Information: isvalid
Microsoft.AspNetCore.NodeServices: Information: isvalid
..... (the same infinite loop message) ............
If I remove the console.log, the pre-rendering works, but I suppose the proccess keep on checking the if the button isValid or not.
My package versions
"angular2-platform-node": "2.1.0-rc.1",
"angular2-universal": "2.1.0-rc.1",
"angular2-universal-patch": "0.2.1",
"angular2-universal-polyfills": "2.1.0-rc.1",
"aspnet-prerendering": "2.0.3",
Microsoft.AspNetCore.SpaServices : 1.1.0;
Microsoft.AspNetCore.NodeServices : 1.1.0;
The issue is, that when you call a method in the template, it is called every time change detection is run, which happens often. So this is actually not an infinite loop, Angular just calls this method on each change detection.
You can solve this by handling the logic in the component, store it in a variable, and use the variable in the template.
Related
On one of my tests I log in and move to the next page.
In the next page when I try to click on the profile element with .click nothing seems to be happening.
When I use the .exists function it returns false.
Why can't chromeless recognize element after changing the DOM?
async func(){
try {
this.chromeless
.goto(this.url)
.click(this.switchToLogIn)
.type(this.email, this.emaillAddressInput)
.type(this.password, this.passwordInput)
.click(this.logInButton )
.click(this.myProfile)
.screenshot()
}
catch(err) {
console.log(err)
}
Anything that was not already available in the DOM tree when the previous action in the chain was performed (with the exception of goto() and possibly some other methods) has to be waited for using the wait() method.
So, assuming that this.myProfile is a CSS selector string for an element to be clicked:
// Unchanged code omitted
.click(this.logInButton)
// Since the previous click loads a new page and/or shows new content, we need to wait
.wait(this.myProfile)
.click(this.myProfile)
Alternatively, the implicitWait Chromeless constructor option could be set to true, as long as that does not affect anything else negatively.
In Aurelia, I have a textbox like this:
<input type="text" value.bind="contact.topics|commaList">
Where commaList is a value converter:
export class CommaListValueConverter {
toView(value) {
return value.join('|')
}
fromView(value) {
return value.split('|')
}
}
There are two things:
Updating the list (contact.topics) from code doesn't change anything in the view. Tried forcing two-way as well. The toView() is not called (tried to log calls). For comparison, in my view there is also a regular repeat topic of contact.topics which update fine.
Aurelia modifies my contact.topics list by adding an element __array_observer__: ModifyArrayObserver to my list. So now I somehow have to clean my list of such unwanted elements before saving (or dirty checking).
I update the array this way:
this.contact.topics.push('test')
The contents of the array display correctly in the for of loop (not shown).
gist
https://gist.run/?id=dd11c5837b77b29b586d2c4f978a7a48
Aurelia bindings don't react on Array and Object internal changes unfortunately.
You can't escape the __ private properties that aurelia adds for observation but since you are dirty checking an array you can take a clean clone of it with arr.slice()
this is the first time I'm posting a question here; I have searched and searched and searched here and other places and I cannot seem to get any results. I'm using VISUAL BASIC 2015 in Visual Studio 2015. QUESTION: I need to have a modal window/popup from a particular website remain INSIDE the web browser control/window on my form (WebBrowser1); when a particular link is clicked, the modal window/popup jumps out of the form and directly to the user on their screen. I have to keep this popup inside because there are other links to be clicked on that popup, but if it jumps out of the web browser control, no code will work since it's outside WebBrowser1. What I have found is code for older versions, and not 2015; if anything I can even add WebBrowser2 to have the popups/modal windows appear there if possible, just as long as I can code them to keep clicking inside the form. PLEASE HELP! THANK YOU!
window.open (and a click on <a target="_blank"> etc) can be handled via the NewWindow2 event. Hans already pointed out how to do that in comments. NewWindow3 works too, but need at least Windows XP SP2.
As for window.showModalDialog, it is a bit tricky. IE has IDispatchEx (wrapped as IExpando in .Net) implemented on scripting objects so you replace the methods and properties with your own implementation. But window.showModalDialog shows a dialog that has arguments and return values, you need to override those properties in the modal dialog you create too. The code looks roughly like tis:
void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
//skip events from frames
if(WebBrowserReadyState.Complete!=webBrowser1.ReadyState) return;
if(FindLoginFormOnPage()) {DoLogin();return;}
if(IsWelcomePage()){NavigateToPage1();return;}
if(IsPage1()){SubmitFormOnPage1();return;}
if(IsPage1FormResult()){
var document=webBrowser1.Document.DomDocument as mshtml.ITMLDocument2;
var expando =(IExpando)document.parentWindow;
expando.RemoveMember(expando.GetMethod("showModalDialog"
,BindingFlags.Instance | BindingFlags.Public);
expando.AddMethod("showModalDialog"
,new ShowModalDialogDelegate(this.MyShowModalDialog));
}
......
}
object MyShowModalDialog(string url, object varArgIn, object options)
{
using(FromMyShowModalDialog myShowModalDialog
=new MyShowModalDialog())
{
myShowModalDialog.StartupUrl=url;
myShowModalDialog.DialogArguments=varArgIn;
//omit the code to parse options
//and set dialog height/width/topleft location etc
if(myShowModalDialog.ShowDialog()==DialogResult.OK)
{
//do something on the return value before passing to the scripts
......
return myShowModalDialog.ReturnValue;
}
return null;
}
}
and in the Load event handler of MyShowModalDialog you call something like webBrowser1.Navigate to show the page requested by the parent page.
Now you need to pass the arguments to the webbrowser control on the new form. Do the same as above but replace another property this time.
expando.RemoveProperty("dialogArguments");
expando.AddProperty("dialogArguments")
.SetValue(expando,this.DialogArguments);
This will let the web page access the value passed from MyShowModalDialog and stored in this.DialogArguments.
The earliest you can access the DOM is in webBrowser1_DocumentCompleted. By that time the scipts on the page that read window.dialogArguments are probably already executed and got nothing. After overriding window.dialogArguments, you need to study the script on the page to find out how to revert that. for example, if the page has
<head>
<script>
var oMyObject = window.dialogArguments;
var sFirstName = oMyObject.firstName;
var sLastName = oMyObject.lastName;
</script>
...
<span style="color: 00ff7f">
<script>
document.write(sFirstName);
</script>
</span>
you need to change the values of sFirstName and sLastName then change the innerText property of the span, probably identify via its relationship with a named div or table cell. You can write the necessary changes in a script and call it via HtmlDocument.InvokeScript.
If the page returns a value to its parent, you need to pass it on to your parent form too. Override window.returnValue so when the script writes to window.returnValue it writes to a variable you provided
......
expando.RemoveProperty("returnValue");
expando.AddProperty("returnValue").SetValue(expando,this.ReturnValue);
I'm using dojo to validate input fields and if there is an error (for eg: required field) it appears in the dojo tooltip. But, I would like to show error in the custom div instead of tooltip.
So, I'm wondering if there is a way to hide/disable the validate error to appear in the tooltip? If so, I can capture the error message shown in the hidden tooltip and show the result in custom div, which will be consistent with error styling across the application.
Please advise. Thanks.
I would recommend to use the standard Dojo validation mechanism, contrary to what vivek_nk suggests. This mechanism works great in most cases, and covers most situations (required, regular expressions, numbers, dates etc.).
To solve your issue: you can overrule the "dispayMessage" function of a ValidationTextBox (for example).
displayMessage: function(/*String*/ message){
// summary:
// Overridable method to display validation errors/hints.
// By default uses a tooltip.
// tags:
// extension
if(message && this.focused){
Tooltip.show(message, this.domNode, this.tooltipPosition, !this.isLeftToRight());
}else{
Tooltip.hide(this.domNode);
}
}
Just create your own ValidationTextBox widget, extend dijit/form/ValidationTextBox, and implement your own "displayMessage" function.
Simple solution for this scenario is not to add the "required" condition at all to those fields. Instead add a separate event handler or function to check for this validation.
For eg: add a function for onBlur event. Check if the field is a mandatory. If so, show message in the custom div as expected.
<input data-dojo-type="dijit/form/TextBox"
id="sampleText" type="text" mandatory="true" onBlur="checkMandatory(this)"/>
function checkMandatory(field) {
if(field.mandatory=='true' && field.value=="") {
alert('value required'); // replace this code with my showing msg in div
} else {
field.domNode.blur();
}
}
This above code snippet does not use Dojo for validation, rather manual. Dojo actually helps to ease this by just adding the attribute "required". If that is not required, then just ignore Dojos help for this case and go native.
So, for all fields, just add the attributes - "mandatory" & "onBlur", and add the above given function for onBlur action for all these fields.
This is my constructor:
iconJs =new dojox.mobile.IconItem({label:'', deletable: false, icon:'images/Tile_Toevoegen.png', transition:'slide', class:'klasIcon', url:'views/klappr/addKlas.html', urlTarget:'addKlas', onClick:function(){alert("test onclick");} , callback: function(){alert("test callback");}});
When I click on the iconItem, the alert "test onclick" works.
But I need the callbackfunction to work.
In the iconItem guide:
**callback**
Function String
A callback function that is called when the transition has been finished. A function reference, or name of a function in context.
The alert "test callback" needs to be called when the transition is done, but it doesn't work. Can someone help me out?
I reproduce with Dojo 1.9.1. In addition to item.callback, there is also item.onOpen which could be helpful, however none of them gets called in this case.
I think this is a Dojo Mobile bug and I suggest that you enter a ticket at https://bugs.dojotoolkit.org .