I need editable text in an Apache Wicket Application. As the text has to appear very "common-table-like", with editing only after the user double clicks on the text and so on, using normal TextFields is not really an option.
So I decided to go for the new HTML5 attribute contenteditable, which does the overall job quite fine. With the following markup and Java code I get a label that looks like static text, but after the user clicks inside the text is editable:
<div wicket:id="id" contenteditable></div>
...
item.add(new Label("id", "dummy content"));
But now I obviously need to catch some event when the user actually edits the text, as the new text should be stored back into the database. Online manuals suggest using oninput as it seems more reliable (e.g. with respect to timing issues) than onkeyup, onkeydown and so on.
Trying the event with regular HTML5 works fine:
<div wicket:id="id" contenteditable oninput='alert("oninput");'></div>
My question is now, how can I get the Wicket Label to support oninput? Overriding it and creating a custom label would be a perfectly fine solution (if I really have to), but for that I am too new to Wicket as to know where to start and how to create the correct markup and so on.
Since a div is not a form element, it doesn't get submitted when you post a form. So you have two options:
in onInput fill a hidden form element with the content and submit that using a form
send the content to the server using Ajax
Both require you to do some magic using a (Ajax)Behavior.
You can use Wicket's HiddenField to create the hidden field, and in onInput perform the update of the HiddenField's value.
You can encapsulate this by creating your own ContentEditableFormComponent by using FormComponentPanel as a starting point.
Related
Quick question here. I am creating a web app using MVC. I've noticed when I add input boxes to pages, they save previous entries in a dropdown fashion, like so:
While this IS handy, I'd like to know a couple things:
How/Where are these previous entries being saved? Is this my browser or an MVC thing?
If need be, how can I override this default behavior?
Thanks!
I'm not sure what's in your specific project, but it could be one of three things:
Some browsers, if you submit a form, remember the submitted values and automatically make inputs autocomplete. The autocomplete HTML attribute on forms and inputs can help to control that.
HTML 5 has a datalist element which lets you associate a list of options with an input, so autocomplete can be implemented manually.
There may be some JavaScript, potentially paired with AJAX doing this autocomplete.
I am using the blueimp/jQuery-File-Upload basic plugin.
In a form, the input field for uploading files is, by default, on the right of the button.
A text is also written into.
How can I have the field on the left and how can I get rid the text ?
What you are talking about is standard browser behavior. When you use <input type='file'>, the browser chooses how to render that, and it can give it its own default text like 'Choose file'. I have used a workaround in the past which works nicely, provided in the link below (which will scroll you to Romas' answer). Basically you hide the file input, and declare another button that you style however you wish.
In JavaScript can I make a "click" event fire programmatically for a file input element?
How the reset button (input type="reset") works under the hood?
(I want to extend it so it'll clear the inputs after post in asp.net mvc.)
It makes the browser set the current value of every form control back to its default value (as specified in the HTML, e.g. with the value or selected attributes).
Since it is client side, it cannot be extended with a server side technology like ASP.NET.
If you want to clear inputs after post, then forget reset, just send back the form without any data in it in the HTTP response.
There's a form.reset (docs) method that does the same thing as clicking the form's reset button.
Alternatively you could write some jQuery code that resets the form fields, the topic is covered in this question - Resetting a multi-stage form with jQuery
Assume I have a html from, and it contain some submit type. I want to create a "are you sure" popup window that will appear when user click submit button.
My question is that is there any way to create it by using "only" html, not using javascript or any other?
HTML only is possible, but not without a postback
Scenario that could work without javascript:
You have your form with submit button
User clicks (and submits) the form
You display another form with are you sure? form (that contains Yes and No buttons as well as hidden fields of the first form that will make it possible to do the action required on the original data
functionality that executes the action and goes back to whatever required.
This would be completely Javascript free, but it would require several postbacks.
This kind of thing is usually done on the client with a Javascript confirm() function (here's a simple example) or lately with a more user friendly modal dialog provided by many different client libraries or their plugins.
When to choose the script free version?
If you know your clients are going to be very basic ones (ie. vast majority of your users will access your application using clients like Opera Mini that's not able to run scripts at all). But in all other cases it's much better to do this using Javascript. It will be faster, easier to develop and much more user friendly. Not to mention that it will put less strain on your server as well since certain parts will execute on the client without the need of any server processing.
No, there isn't. Despite of the new features in HTML 5, HTML is still a markup language, not a programming language. In order to express dynamic behavior (such as an "are you sure?" box), you need to use a programming language.
Javascript would be the most obvious choice for this, but you could also do it with frameworks that can get you around writing Javascript by hand (for example ASP.NET).
Edit: Actually it appears that it would theoretically possible to do this with without Javascript or other frameworks. As I just learned, HTML 5 + CSS 3 seems to be turing complete. But this is hardly relevant to this question.
It's possible to ask for a confirmation, but it will not be in a "popup window". The creation of the "popup window" requires javascript/other language.
It will be:
Request (first form)
POST
Response (confirmation form)
POST
Response (outcome message)
You can create a form with all hidden elements containing the data from the first form and a "Yes" and "No" button below the "Are you sure?" text. You can use PHP sessions to avoid the hidden form elements. If there is a lot of data or confidential data or you do not want to re-validate the data from the second form, use sessions. Make sure you validate the data from either form before using it.
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
What I did for this exact problem was make sure I had multiple "divs" in my code. For me specifically, I had two main ones.
First, one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
I was looking at the raw HTML rendered by a SharePoint (2010) list item edit page, and I noticed that an input field (rich text field) made use of an AlwaysEnableSilent attribute. i have checked online for an explanation of what the attribute does, but have not been able to get a answer. Does anyone know what this attribute does?
Thanks, MagicAndi
ASP.Net validators allow you to turn them on/off using client side scripting using ValidatorEnable, but whenever you turn the validator on that way the validation fires immediately. Sometimes you (SharePoint) may want to be able to control which validators are active using client side scripting, but without the validation firing when you turn it on (during load, before the users have had the possiblity to fill out the fields).
In order to handle this SharePoint has defined its own function STSValidatorEnable with an extra parameter bSilent, so it can turn on validators without them firing.
They then found out that for some validators they always want them not to fire when STSValidatorEnable is called, even though the caller uses bSilent==false. So they introduced an attribute AlwaysEnableSilent which tells the validator never to fire when turned on using STSValidatorEnable, but only during postback.