I have jqGrid with some columns, I want to add additional fields in Add dialog, that not displaying in grid, but sending in request. How i can make this functional?
You can modify Add dialog inside of beforeShowForm event handler. You can see a working example here. This example I made as an answer to the question "jqGrid: Disable form fields when editing" (see also a close question "How to add a simple text label in a jqGrid form?")
UPDATED: I reread your question and could see that I answered originally on another question as you asked. What you need is just usage of editData parameter which can be for example like
$("#list").jqGrid('navGrid','#pager',{del:false,search:false,refresh:false},
{}, // edit parameters
{ // add parameters
url: '/myAddUrl',
editData: {
someStaticParameter: "Bla Bla",
myDynamicParameter: function() {
return (new Date()).toString();
}
}
}
);
see demo. The demo has nothing on the server side, but you can easy verify with Fiddler or Firebug, that the data sent to the the server contain someStaticParameter and myDynamicParameter parameters.
This one is good. I'm voting this one up.
This solution applies to what I'm looking for. I have a users table with the typical username, password, and etc details. I have an edit and add button as well.
Security-wise, it's not good to send all the users along with their passwords. So in the edit form, an admin can only edit everything except the password.
In the add form, an admin can create a new account with a new password. Since the password field doesn't exist in the grid, it will not show in the add form. By following this example, I'm able to add a custom field without exposing my users passwords. Thanks a lot Oleg
Related
https://react.semantic-ui.com/modules/search
Below is images of how the semantic react ui search widget looks like. In the second image, I was wondering how you can put a prompt message to indicate to the user a message on what the search bar is meant for. In this case, it's "search". When the user types in, it erases the Search and starts reflecting what the user is typing. I thought it would be defaultValue, but it seems that you can't have value and defaultValue set at the same time. I still want to be able to read what the set value is when the user types into the box.
Thanks,
Derek
You can use defaultValue as initial value in component, no problem.
Then read the user input value in event (onBlur for instance) like this:
onBlur(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
If you want to read value each new character pressed you can use in onSearchChange event:
onSearchChange(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
EDIT: included accepted answer in comment below:
Worked:
placeholder={"text"}
for Semantic React UI Search
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
According to this article
http://www-10.lotus.com/ldd/ddwiki.nsf/revisions/6A9EDD911827AA13852574EA00388F8F?OpenDocument
simple validation should work for File Upload controls. I am trying to use it in a extLib Form table.
I would like to verify that the user have selected a file, but have not been able to get this to work on serverside validation. Have also tried to use a custom validator, but still with no luck. Other required fields are marked fine, but not the upload control.
Do anyone know how validate that the user have actually selected a file?
The validation works for client side validation only. There are some workarounds:
The easiest way to validate if a file was attached is to add a validation field to your form and set the property computeWithForm="onsave" of your datasource. As soon as you want to save the document a validation error is thrown and the saving is interrupted. The validation field is a simple editable field with a validation formula like this:
#If(#Attachments = 0;#Failure("No File attached!");#Success)
Check your datasource in the querySave event:
if( document1.getAttachmentList("Body").isEmpty() ){
var msg = new javax.faces.application.FacesMessage("No File added!");
facesContext.addMessage( "No File!", msg );
return false;
}
These two workarounds are only working if the document is newly created. As soon a file is attached, these two options are not working anymore.
If you want to check already existing documents, you can use this XSnippet here:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=replace-attachment-when-uploading-a-new-attachment
You then have to modify the XSnippet to fit your requirements and add a message (as shown in the second example).
Hope this helps
Sven
I'm aware that this has been asked and answered several months ago, but I was looking for an answer to the same problem today when I found this.
Although Sven's answers didn't help directly, option #2 gave the final hint to my solution. Maybe it can be of use for others, too:
First of all, my page uses a standard button (not a button of type "Submit" as I need to set some hidden fields along with the editable ones). So, before the final saving is done I added this script to my button code:
var numAtts = myDocDatasource.getAttachmentList("Body").size();
if(numAtts == 0){
var msg = new javax.faces.application.FacesMessage("You need to attach a file");
facesContext.addMessage("File validation error", msg);
return false;
}
//do some more stuff
...
myDocDatasource.save();
I had to realize that the content of the fileUpload control doesn't really matter when it comes to validation as at that stage of the process an uploaded file already is part of the datasource.
The "timing" of this validation step is a bit surprising, though: at least in my situation, validation of other fields is done before the file upload is validated:
in an errorMessages control first only the standard validation errors are listed. Only after all the other fields have been validated successfully my fileUpload validator is displaying its error.
I'm trying to add a URL parameter within a Spring MVC application. It's a basic search page that shows results.
In the search page, there is a form that is set to POST. There are many hidden fields and other fields I don't want in the URL. So, I don't want to do a GET.
I do want the search query in the URL. So after clicking the search button, the resulting search results page needs to have a URL like /search?query=hello
To get it to work, I'm creating a RequestMapping method in the Spring MVC Controller and doing a redirect: tacking on the query parameter. However, I'm not sure using a redirect is the best answer, seems there could be performance concerns redirecting as well.
I looked around and noticed folks using javascript and the location object, but setting the location object obviously relaunches the URL you set it to. I also looked at the HTTPServletResponse & HTTPServletRequest objects, but couldn't find much.
Any thoughts on how I can force the search parameter to be added to the URL?
Your form will have an 'action' specified telling it where to POST to. I'd have thought you could attach an onclick event to your submit button (or an onsubmit event to your form) that updates the action url by appending "?query=" to it.
document.<form name>.action += "?query=...";
Then you just have to worry about someone posting your form without JavaScript enabled - in this case you could fall back to your redirect.
I don't know how the server technology so I can't say if it will be happy giving you both GET and POST parameters, if not you'll have to manually strip the GETs out of the URL.
But anyway, this seems like a rather odd situation to be in - is it really that big a deal to show the parameters in the URL? Anything that gets posted by an HTML form can still be inspected with the right tools, it's just ever so slightly more difficult.
I wanted to provide a more complete answer to my question with code. The previous user helped me down this path, so I'll keep it as the accepted answer. However, there is one item to note:
If you add on to the action, and you have an input text box with the same name, the page posts a duplicate value like: query=hello,hello.
So, I needed to remove the name on the input box, and use the following javascript. Note, I am using the prototype.js framework:
Event.observe(window, 'load', function(event) {
Event.observe('searchForm', 'submit', function(event) {
$('searchForm').action += "?query="+$('searchBox').value;
});
I have a web form which is split up into several HTML pages.
I am using the validation plug-in to check fields on submit and this is working great.
The spec says that users should be able to navigate through the form, both linearly (just using the submit buttons to go from page to page) and also to skip to any particular page.
I have a unordered list with the links at the top of each page. I'm looking to fire the validation both on submit and when one of these links is clicked but don't know if this is possible.
For info, I'm currently firing the validation this way:
$("form#courseDetails").validate({
rules: {
studiedBefore: "required" //Have you studied with us before
},
messages: {
studiedBefore: "Please indicate whether you have studied with us before."
}
});
Each form has an ID and validation for all the forms is in one JS file.
Not that it really matters, but the navigation is in <ul id="tabNav">
Any help much appreciated.
Thanks,
Phil
Check the .valid() method it provides. If you call that in click handlers attached to your links, you should be ok.