I've a page , which contains a textbox . I've added AjaxFormComponentUpdatingBehavior to the textbox onchange , in which I update a few other form elements based on it's value .
As far as I understand , wicket would return to focus to the last focused component after the call . However , In this case , the focus isn't being returned to the component . The erroneous behavior exhibited happens only for the first ajax call made after the page is loaded , on subsequent calls it behaves fine.
The wicket-ajax debug log in case of the error looks like
INFO: Response parsed. Now invoking steps...
INFO: returned focused element: [object HTMLInputElement]
INFO: returned focused element: null
INFO: Response processed successfully.
INFO: Invoking post-call handler(s)...
INFO: refocus last focused component not needed/allowed
Now I'm no wicket expert , but I have noticed that after every ajax call wicket logs the value of returned focused element twice , the second of which is logging null in this case .
I'd be grateful if anyone could enlighten me on what I could be doing wrong . Thanks for reading .
Here's my best guess as to what might be the problem.
Wicket keeps track of the last focused element is by setting a variable with the DOM id of the component .
If the DOM id of the component gets changed during the event (Wicket can do that , without you knowing :) ) , the last focused element reference in the front-end becomes invalid .
Related
Not able to get the event's original source on LWC.
Hi,
We are migrating an Aura component to LWC. We have a USE CASE, is being used in an iteration.
On click of , we are showing . The data in is dynamically retrieved based on record-id of .
In Aura, this was fairly simple because when fires an event, we can inject the data through method from grand parent to event.getSource().
But in LWC, the event is getting re-targeted on every parent-level bubbling. So finally event.target is returning the instead of .
Hence we are not able to inject data dynamically through event. What is the best approach for this scenario?
<!--c-todo-app>
<c-todo-item>
<div>
<!--Dynamic Iteration--Starts>
<c-todo-line-item>
<c-sub-item>
<c-todo-line-item>
<c-subitem>
--
...
...
...
--
<c-todo-line-item>
<c-subitem>
<!--Dynamic Iteration--Ends>
</div>
</c-todo-item>
Event.target OR event.currentTarget should give the source component but instead gives the top-most component below the handling component. In above example- event is fired in and handled in . Component returned is BUT we need
I am experimenting cobrowsing with Angular 6 Forms.In co-browsing an opensource library togetherJS updates the DOM value of corresponding element for remote party.I have updated togetherJS related code in index.html(two line one in head and another in body) I have observed using ControlValueAccessor Form type DOM value of corresponding element is getting updated but FormControl value is not getting updated in view.
My question is how changes done by an external library on DOM elements can be reflected into angular 6 form control's element value in view.
One can get the code from below link:
https://github.com/srigaurav1986/Angular-Forms.git
How to reproduce:
1.Download code from above link.
2.Install dependencies using "npm install"
3.Run "ng serve -o"
4.open in browser "http://localhost:4200/controlvalueaccessor"
5.Click on "Start TogetherJs"
6.Copy the popped link in another browser window.
7.Update the "Name" field
We can see DOM field value is also getting updated on remote side but after pressing "Submit" button we can see FormControl value remains unaltered on remote side but changed on other side.
I tried using manually detecting changes using application.tick,markforcheck() and detectchanges() apis but no luck.Is there a way, where we can listen to some event on DOM element change and subscribe to it and also update the Formcontrol parameter values in such case.
The answer to this question lies in angular(6) property that it works on shadow DOM and only listen to the changes happening within angular zone , when the third party library like TogetherJS updates DOM corresponding changes doesn't effect angular components as they are not subscribe to actual DOM native element.
In order to resolve this issue we did following :
Register one call back in Form class constructer to capture DOM “change” events triggered from Co-Browsing library i.e. happening outside angular zone as mentioned below:
Code Snippet
constructor(private formBuilder: FormBuilder,private elementRef: ElementRef,private _renderer: Renderer,private cdr:ChangeDetectorRef,private app:ApplicationRef,private zone:NgZone) {
zone.runOutsideAngular(() =>{
window.document.addEventListener('change', this.change.bind(this));
})
}
Define the eventHandler to perform below actions :
Run in Angular context using this.zone.run()
Use ElementRef to get the component’s template selector.
Run queryselector on input elements and compare with event’s outerHTML to check which element has changed in component.
Set the Formcontrol’s value for matching element.
PS: Here customerForm is ControlValueAccesor FormGroup type of instance. In your case it can be your form. We can generalize form( In case reactive) key traversal as mentioned in another SO post
Angular 2: Iterate over reactive form controls
Code Snippet:
change(event){
event.preventDefault();
console.log("DOM value changed" ,event);
console.log("component value", this.elementRef.nativeElement);
this.zone.run(() => { console.log('Do change detection here');
//this.cdr.detectChanges();
if(this.elementRef.nativeElement.querySelectorAll('input')[0].outerHTML === event.target.outerHTML)
{
console.log('Inside value updation');
//this.customerForm.controls.name.value=event.target.value;
this.customerForm.controls['name'].setValue(event.target.value);
}
});
setTimeout(() =>{
this.cdr.markForCheck();
})
}
This will set the respective values of elements(obviously via traversing loop) changed in component and validation should not fail as it’s happening in current context.
The core idea of above details is how to capture change events happening outside angular zone and updating angular application accordingly.
PS : I shall update the full code in github for other's perusal.
How can I access the style information for a tab? The following code logs an empty object.
tabs.activeTab.attach({
contentScript: 'self.port.emit(console.log(unsafeWindow.document.body.style);'
});
First off, you are missing a ) in your content script. Then you are returning the return value of console.log to the port.
However I am going to assume, that you are getting an empty object in the page's console from that console.log. The document.body.style attribute may still be empty, since that only holds the value of the inline style attribute of an HTML element (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style).
You would probably have to parse document.styleSheets or use the developer tools API to the get the currently rendered background.
I am using Plesk Sample 1.5-1 as a base, but stuck on how to process POST w/parameters.
My form is a 'text' element and 'ok' submit button and below that is a list that will change based on the value of the 'text' element (external XML call).
Inside IndexController, in the ->getRequest->isPost() area, I have a redirect line:
$this->_helper->json(array('redirect' => pm_Context::getBaseUrl()));
Do I have to manually pass the parameters on this line? Or does the controller know because I created a pm_Form_Simple() and added elements? Right now if I am outside the ->isPost block, the parameters are null, so that is why I am thinking I have to manually pass them along.
Do I need something like this?
$this->_redirector->gotoSimple('my-action',
'my-controller',
null,
array('exampleText' => $form->getValue('exampleText'));
I guess am just not understanding how the POST works.
I have looked at the Zend Guestbook example, but it is different enough from Plesk that I can't mentally translate it...and it doesn't redirect to the same page, it redirects some where else.
Ultimately, I want to set the 'exampleText' parameter with a "start date" and after the POST call, make an external XML call and fill out the list... I can make the XML call, but can't get the workflow around empty form -> fill out form and press "ok" -> post processing
thx!
Turns out that the pm_Form_Simple needs JSON I didn't notice that my orig code had JSON but didn't encode the new code...
using Ajax I filled Country, State and city dropdownlist. On land change state is filled and on state change city is filled properly.
Then when I try to save page I face this :Invalid postback or callback argument.
Searched and found out that this is due to change in ddl.selectedvalu change from initial value that is assigned by asp.net.
Now my question is that how can I let asp.net know that the new ddl value is valid?
Thank you.
In many pages it is recommended to use EnableEventValidation="false", but I prefer not to use it.
Some say that use Render and add value to notify .Net like this:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation("ddlLanguages ", "English");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Tamil");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Hindi");
base.Render(writer);
}
but how to use it? where to put it?
for a better understanding I put here a sample code including Database script :
hesab20.com/DownLoad/Ajax.zip
in this sample Javascript is used to fill drop-down list . But when click button is executed and a post back occur, error happen.
Please help if you have experience with this.
Regards.
Please run the sample code and change the drop down lists , automatically the other is filled , meaning that list item text and value is completely changed. finally click button for a post back.
you must see that error happens:
Invalid postback or callback argument. Event validation ....
and note : EnableEventValidation="true"
Thanks