Here is my code, simplified:
<form id="form1" style="height: 759px" runat="server">
<%= Html.TextBox("txtDateFrom")%>
<input type="button" value="Add" id="btnAdd" onclick="return btnAdd_onclick()" />
</form>
I want to add a validator on client side. For example, it will control the entered text's in the textBox length.
Important: I don't have a model passed in that view.
If you are open to use Jquery use JQuery Validation Plugins
eg.Jquery Validation Plugin
and Position Absolute Jquery validation plugin
Any reason not to use jquery validation add-in?
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I have the following form
<form id="file_upload" action="/Upload/Save" method="POST" enctype="multipart/form-data">
<input type="text" id="txtProposalName" name="name" placeholder="Nome da Camiseta" />
<input type="text" id="txtProposalDesc" name="description" placeholder="Descrição da Camiseta"/>
<div class="fileupload-buttonbar">
<div class="progressbar fileupload-progressbar"></div>
<span class="fileinput-button">
Upload images
<input type="file" name="files[]" multiple />
</span>
</div>
<input type="hidden" id="imgID" name="imgID"/>
<input type="submit" id="postProposal"/>
Would call this action:
[HttpPost]
public JsonResult Save(string name, string description, string imgID)
{
return Json("a");
}
(This is the current implementation, it has no logic because I am still testing some things).
My problem is: when I click on my submit button, the action is called with the correct values, but when it returns, my browser redirects to /Upload/Save (which is the action URL).
Why is this happening? Is there any way to prevent it?
Thanks!
You can use an asynchronous call to your method (e.g. AJAX) to prevent the page from reloading.
You can use Ajax.BeginForm to prevent reload page.
As I can see you use full page reload with:
action="/Upload/Save"
Also you trying to post data to json action method in controller. You need all form submit make with jquery, most problems you will find with ajax file uploaders.
Added:
Also look at serialize() it will help you to collect all form input values.
Dont need to prevent it, just redirect the user in your server code .
I have learned how one can open jQuery UI dialogs via KnockoutJS custom bindigns as answered in this question: integrating jquery ui dialog with knockoutjs
If my dialog has an input text field, how can I access data from it upon dialog close to alter the main view model based on the text filed contents? What is the general idea and even handler code place?
This is pretty straightforward. Just put an input in your dialog div with a value binding. Same as you would capture input from any binding. Here is the fiddle from that answer with an input binding.
<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog
<input data-bind="value: dialogEntry" />
</div>
Just make both fields bind to the same knockout js observable. Then they will always be the same values.
<a href="#popupLogin" class="site_title" data-position-to="window" data-rel="popup" data-bind="text:Title">
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<input type="text" data-bind="value:Title" />
</div>
When you change the text in the modal and click away or close it in some fashion you will see that the value in the other input will have changed as well.
I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).
In a dream world, here is what would work:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
Thanks a lot for your help
You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html
This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.
If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.
Hope this gets you going in the right direction.
I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
I have implemented an email sharing service in my web application. People can click on the email button and access a form with which they can send emails to whom they want.
I would like to set a default subject and body.
In the default body text of the email, I would like to pass the link of the page people want to share. Surely it is possible to do so but I do not manage to.
So far it has been a dead end to try to pass the link in the value argument of my text editor. I cannot think if any other way to do it.
Any suggestion greatly appreciated.
The same way you pass data to any other fields that you want to populate.
For example your controller returns a model emailShare that contains subject, body and url etc
In your gsp, lets say you have a textarea for the body of your email,
<g:textField name="emailSubject" value="${emailShare.subject}" />
<g:textArea name="emailBody" value="${emailShare.url}" rows="5" cols="40"/>
This will set the url as the default text in the textarea, which can also be further edited to add more text.
You can get the location of the current page using JavaScript with document.URL Then you can just set a hidden field on your form and submit it with your email request. For example:
<html>
<head>
<script type="text/javascript">
function setLocation(urlField) {
urlField.value = document.URL
}
</script>
</head>
<body>
<form id="exampleForm" name="exampleForm" action="#">
<input type="text" id="url" name="url"/>
<input name="submit" value="submit" type="button" onclick="setLocation(this.form.url);" />
</form>
</body>
</html>