Hi i have a form in GSP and I want to make all the form elements read only after submit.
Is there any way to do it. I have form elements like textboxes, dropdowns attachment field......
I am using G:Form
I am also using java script in my GSP.
Please help me out
Thanks.
Keep in mind that even if you set the tags as readonly on the server side, users can still change them through a variety of means, and whatever the value on the form is before it gets sent back to you.
You can use an onsubmit event in the form tag, calling a JavaScript function which will disable any form elements you want to affect. Since GSP is server pages, not the browser, it will not normally be able to help you in this respect.
Certainly the easiest way is client-side with jQuery:
$(function() {
$('input, select, textarea').attr('disabled', 'disabled');
});
Related
is it somehow possible to add an anchor (or hash) to a Struts 2 Action-URL? To be specific:
I have a html form which can be extended with more fields if the user clicks a button "add more fields". This Button sends a html submit to the backend (Action "thismyaction") where a list object is filled with another set of input fields. The action then returns to a tile "thisismyform" which loads the same jsp as before, where the new fieldset is visible.
(Unfortunately there is no way to achieve that via ajax / JS in this project at the time. I know that you usually add fields that way, but i got the project as it is.)
Each fieldset is counted (fieldset-0, if user adds more fields another set is added "fieldset-1"). The sets always contain the same fields, but enumerated.
What happens here? There is a post to the action which generates another fieldset and redirects back to the same page, where it renders all fieldsets. Important: the result type is "tiles"! I guess this is what makes it difficult.
Now I want to dynamically add an anchor to this URL "thisismyaction.do", like e.g. "thisismyaction.do#fieldset-1". Use Case: User adds another fieldset, post to the action => result type="tiles" => JSP, user sees reload of the page with the new, second fieldset and gets "scrolled" to the second fieldset via the anchor. Is that possible?
I hope I could describe it properly, what I want to achieve... If there are questions, feel free to ask.
Simplest way I can think of right away is
<script type="text/javascript">
window.location.hash = "fieldset-<s:text name="latestIdOfFieldSet" />";
</script>
If you can figure out what's gonna be latestIdOfFieldSet before you render your jsp and set it in your action method. you should get what you are trying to do.
I have asked this same basic question before several times without a response, but let me try one more time, breaking it down as simple as possible.
I have a strongly-typed view with a hidden field on it.
When the view renders server-side, I am setting the value of the hidden field to a property of the model.
When the view renders client-side, I want to get the value of the hidden field (that was set during the server-side render) and display it in a java script alert box.
This should be a simple thing to do and yet I am unable to make it work. I have set a break-point in the view and I can see that the hidden field is being set to the correct value. But the javascript will not display that value.
The page/view being rendering has been gone to before. At the time I want to display this alert, I am going back to that page and now I want to see the alert.
It is as if the page is being cached, so instead of using the new value for the hidden field it is using the old value (from the first time the page was visited). If the DOM is being cached, how I can prevent that so that each time I visit the page I get the updated values of the page and not the cached ones? What am I doing wrong??
#<input type="hidden" id="hdnShowMsg" value="#Model.ShowMsg" />
<script>
alert($('#hdnShowMsg').val());
</script>
Your script may be firing before your document is fully rendered. Use the jQuery document ready function.
http://api.jquery.com/ready/
<script>
$(function() {
alert($('#hdnShowMsg').val());
});
</script>
Also note that document ready is not supported within a jQuery Mobile document and you may run into problems depending on what part of the DOM you are trying to manipulate.
Use $(document).bind("pageinit", function() {}) instead.
http://jquerymobile.com/demos/1.2.1/docs/api/events.html
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I'm using ExpressionEngine and SafeCracker along with Ajax (plugin: jquery.form.js - http://jquery.malsup.com/form/).
Best I can tell, SafeCracker will only allow for updating a single entry at a time. However, the UI / UX necessitates that a list be displayed. I've proof of concept'ed an entry by entry on-demand form. That is, click a particular edit link next to each entry and a snippet of jquery creates a form along with displaying a submit button. Click submit and that single entry updates. The inputs don't exist until the Update link is clicked
What I would prefer to do, if possible, is to create the non-form and form versions of each entry as the page is renbered and use some sort of toggle to display one or the other. Again, doable. Then, when I click the Edit link I'd add the necessary attributes to the input so that entry's form elements will be read but the other (display: none) elements for the other entries will be ignored. I'm thinking (out loud) that if I add the attr("name", some-value) that would work. That is, an input with no name will be ignored.
Yes, I can test this and I will. However, even if it works I'm not sure if it's a best practice and/or there's a more ideal way of accomplishing my ends. I'm here looking for validation and/or additional expertise and input.
Thanks in advance.
Just set disabled property to inputs and they will excluded from Form submission, whatever input fields are hidden or visible. Different jQuery methods, like submit() and serialize() follow specification of HTML 4 and exclude all disabled controls of a forms. So one way is to set
$('your_input').prop('disabled', true);
or ,
$('your_input').attr('disabled', 'disabled');
Check following link:
http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Also, you may use a general button instead of a submit, as result you can handle click event on it and within that event you can make exclusion, validation, manipulation on values and what ever you like.
You can put a disabled attribute on them server side or set the property via jQuery:
$(".hidden input").prop("disabled", true);
I'm trying to use Ajax in one of my Rails applications to have a form_tag textarea change its contents according to the selected value of a dropdown that is out of that form_tag.
I would like to ask, what is the correct way of handling this ? Is it possible to respond to js in my show action and have a js.rjs ? Do you happen to know of any resources or can offer some insight ?
You should write a javascript, which triggers on the dropdown menu's onchange event, and start an ajax process. With jQuery it is something like this (in your show code within a script tag):
$("#dropdownMenuName").change(function(){
$.get("controller/action.txt", function(data){ $("#textareaName").val(data); } );
});
This simply sends a request to your app on the controller/action.txt action, and the result is pasted into the textarea's text property. Of course you should write the answer as a simple text, as the result is printed in the textarea instantly.