I've incorporated the Elements add-on for Vaadin into my project and I've got a simple login setup that has two input fields and a button. However, I'm running into a roadblock in how to get the value of the input fields when a user clicks the submit button.
My eventlistener on submit is simple:
button.addEventListener("click", args -> submitLogin());
where the submitLogin() attempts to get the values and pass them to a controller.
controller.submit(username.getValue(), password.getValue());
However, no method I have tried actually returns a non-null value. Any ideas?
Code for paper-input interface:
#Tag("paper-input")
#Import("VAADIN/bower_components/paper-input/paper-input.html")
public interface PaperInput extends Element {
public static PaperInput create(String caption) {
PaperInput input = create();
input.setLabel(caption);
return input;
}
public static PaperInput create() {
return Elements.create(PaperInput.class);
}
}
which references the paper-input html here
and is used simply by calling create(), like so:
PaperInput usernameInput = PaperInput.create();
The PaperButton is created identically but references the paper-button in #iimport and #Tag.
The client side must bind the value to the change. There are two examples in the Lab:
In case you create your element directly:
input.bindAttribute("value", "change")
Or with the interface approach (which you seem to use):
public void setValue(String value)
#UpdatedBy("change")
public String getValue()
Disclainer: I only tried it with a Groovy DSL around elements.
Related
After adding an object via a form, I would like to reset the form so the user can add another. I've tried $setPristine() but can't figure out the syntax. As of now, I have just set the location path back to the same page, but that of course doesn't reset anything. Also wondering if $setPristine is the correct way. Here is my save function.
export class AddCarController {
public newCar;
public save() {
this.carService.save(this.newCar).then(() => { this.$location.path('/addCarPage') });
}
constructor(
private carService: MyApp.Services.CarService,
private $location: angular.ILocationService
) { }
}
In angular Your can create model in just in html and also in controller or on both places
If you have created Model in html
$scope.newCar = {} //this will empty whole ui model object
If you have created Model In Javascript Controller
$scope.newCar = new carModel() //this will create new car object with default values , if you have model in controller
Navigate Back And Forth - Not Recommended
Is it possible to submit simultaneously 2 forms to different actions? In the actions I want to set TempData and than redirect to third action.
I tried method described here Submit two forms with one button Let's suggest that each form have one input field. First form with "name" input, second with "lastname" input
submitForms = function(){
document.forms["formForFirstAction"].submit();
document.forms["formForSecondAction"].submit();
window.location("/Home/ThirdAction")
}
My Actions looks like...
[HttpPost]
public void FirstAction(string name) {
TempData["name"] = name;
}
[HttpPost]
public void SecondAction(string lastname) {
TempData["lastname"]=lastname;
}
public ActionResult ThirdAction () {
string fullname;
fullname = string.Format((string)TempData["name"] +
(string)TempData["lastname"]);
return View(fullname);
}
But it doesn't work. In most cases I got only name or last name in fullname string. Looks like it's something with async or other things I don't know much now. Can you please help me?
TempData is available only the next immediate request. That is the reason you are getting only one item (the last one set from one of those 2 action methods) from the temp data dictionary. You should consider using another persistence mechanism like Session /database
Also, Instead of submitting the form, you oshould consider ajax
submitForms = function(){
$.post("#Url.Action("FirstAction")",$("#formForFirstAction").serialize());
$.post("#Url.Action("SecondAction")",$("#formForSecondAction").serialize());
window.location("/Home/ThirdAction")
}
and here is an example using Session to persist data
[HttpPost]
public void SecondAction(string lastname) {
Session["lastname"]=lastname;
}
public ActionResult ThirdAction () {
string fullname;
fullname = string.Format((string)Session["name"] +
(string)Session["lastname"]);
return View(fullname);
}
You may also consider using jquery when() or q.all to make sure that you are redirecting only after the ajax call's are done ( to avoid the callback hell)
Solution 1 : Use AJAX Form submissions.
Solution 2: Create All in one form in hidden and submit.You can implement this static. In every submit button click you have to read data from
form1 and form2 and update those to form hidden and submit it.
Solution 3: Dynamic Hidden form creation and submission. Integrate everything in to dynamically created form and submit on the fly.
Dynamic for creation examples
How to create a form dynamically using JavaScript?
Plain JS approach
my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_form.appendChild(my_tb);
my_tb=document.createElement('INPUT');
my_tb.type='HIDDEN';
my_tb.name='hidden1';
my_tb.value='Values of my hidden1';
my_form.appendChild(my_tb);
document.body.appendChild(my_form);
my_form.submit();
JQuery Approach
Dynamically create and submit form
$(document).ready(function(){
$('<form action="form2.html"></form>').appendTo('body').submit();
});
I found one thing in javascript of my WPF project. It has called
window.external.ShowWindow();
I have found that method is written in class InteropClass like below.
[ComVisible(true)]
public class InteropClass
{
public void ShowWindow()
{
// logic
}
}
and that method is called.
I am trying to analyse it, for that I have used already built class like below
[ComVisible(true)]
public partial class AnotherClass : SomeDifferentClass
{
public void AnotherMethod()
{
// logic
}
}
and tried to call it as
window.external.AnotherMethod();
but it is not working. Error alert says AnotherMethod is not supported by window.external object
I know both classes differs in many terms and I can make it work but my question is What rules to be followed to make this work, may be like class must be directly inherited from Object or some other.
What you need to do is set the ObjectForScripting property on the web
browser control to an object containing the C# methods you want to
call from JavaScript.
from here told me everything I was missing.
Following situation:
My Wicket application works in combination with javascript.
There is a Page which has a Label for example. This label has "ON" as text set:
Label state = new Label("serverState", server.getStatus().getState());
server.getStatus().getState() will return "ON" at this moment.
Also i have some javascript on this page, which will update this "serverState" Label every 10 seconds. It might have been changed to "OFF" (by javascript).
My Question is: is there any way to get notified of this "text of the Label has been changed". I need that because i want to display (setVisible(true)) another Component, but only if the text has changed.
You can add a custom AjaxEvent-Listener to your label. Your Javascript should then trigger that event after changing the switch from ON to OFF and back:
Label state = new Label("serverState", server.getStatus().getState());
state.setMarkupId("mylabelid");
state.add(new AjaxEventBehavior("updatestateON") {
protected void onEvent(AjaxRequestTarget target) {
// Do something; switch is ON now
}
});
state.add(new AjaxEventBehavior("updatestateOFF") {
protected void onEvent(AjaxRequestTarget target) {
// Do something; switch is OFF now
}
});
in Javascript you call this function after the switch changed value:
function triggerWicket(newstate) {
if (newstate == 'ON') {
$('#mylabelid').trigger('updatestateON');
} else {
$('#mylabelid').trigger('updatestateOFF');
}
}
I would use AbstractDefaultAjaxBehavior and do the updating server side
AbstractDefaultAjaxBehavior updateState = new AbstractDefaultAjaxBehavior()
{
#Override
protected void respond(AjaxRequestTarget _target)
{
String newState = RequestCycle.get().getRequest().getRequestParameters().getParameterValue("state").toString();
state.setDefaultModel(newState)
_target.add(state);
}
};
Then have the webpage add a javascript function when the page loads and have javascript on the client call updateState(state); with the new value.
#Override
public void renderHead(IHeaderResponse response)
{
super.renderHead(response);
response.render(JavaScriptHeaderItem.forScript("function updateState(state) {Wicket.Ajax.get({'u':'"+ updateState.getCallbackUrl() +"&state=' + state})}", "updateState"));
}
Set the other Component visible by the condition you are mentioning.
Component otherComponent = new Component ("otherComponent"){
#Override
protected void onConfigure() {
super.onConfigure();
setVisible(server.getStatus().getState().eqaulsIgnoreCase("OFF"));
}
};
Wicket is a server-side web framework. In order to change the contents or visibility of components it needs to know about the changed conditions server-side.
Assuming server.getStatus().getState() on the server will reflect the changes you mentioned, you could use an AjaxSelfUpdatingTimerBehavior to update (a subset of) the components on the page every X seconds/minutes/etc. (It is based on Duration).
EDIT: And when the component is updated (added to the ajaxrequest) you could use Robert Niestroj's answer to set the second component visible as onConfigure will be called for each component which is added to the ajarequest (either directly or by hierarchy).
In Typescript, how would I use a getter/setter for all the properties of an object? For example, I can have the following code:
class Div {
private _container: HTMLDivElement;
public get container() {
return this._container;
}
public set container(value) {
alert("Updated!");
this._container = value;
}
testDiv() {
this.container = <HTMLDivElement>document.createElement('div');
this.container.style.width = "100px";
}
}
var newDiv: Div = new Div();
newDiv.testDiv();
"Updated!" is alerted only once - when the div is first set (which, I guess, is really what it should be), but I want it to alert "Updated!" even when I'm setting a property on that object. Is there a way to do this, or should I come up with some kind of workaround?
Create an event system that triggers when your objects state changes. Do not allow direct access to properties. Funnel all activity through a controller that triggers state change as necessary.
Or look into using a framework that already does this. Backbone, Knockout, Angularjs etc.