I am working a webproject using struts2 and I used struts2 jquery plugin for datepicker.
Now I need to validate ToDate depending on FromDate.
ToDate shouldnot be greater than FromDate
validation should be like this, datepicker should disable the behind dates accodring to fromdate.Then user not able to select lower than the from date
Please let me know how can I implemt this.
Please post the code will help
Thanks in advance
That's your choice how you want to impliment the validation.There are 2 ways which as of now seems feasible to me
Client side validation using JavaScript.
Server Side validation in your action class.
For the first part your both data-picker must have id and name so once user filled ToDate and FromDate and before submitting the form you can call a java-script function where you can fetch the values of respective date-picker fields using java-script document.getEmelemntById() and can run your comparison logic.
Other option is to let Struts2 fill the ToDate and FromDate values in your action class and you can use validate method inside your Action to perform date validation.choice is all yours.
You can even play around with validation framework even.
Update
After playing around with J query plugin source code here is the workaround we have
<s:form id="form" theme="xhtml">
<sj:datepicker id="date12" name="date12" label="With Close Event" onCompleteTopics="onDpClose"/>
<sj:datepicker id="date13" name="date13" label="With Min and Max Date" minDate="0" maxDate="+2m"/>
</s:form>
<script type="text/javascript">
$.subscribe('onDpClose', function(event,data) {
$('#date13').datepicker( "option" , 'minDate',event.originalEvent.dateText );
});
</script>
In similar way can work for other way around.Hope this will work for you.
There is an example similar to what you ask for on datepicker demos site.
I've modified and tried to simplify that example and created a fiddle for it which you can find here: http://jsfiddle.net/melih/vRULq/
Related
I am using Struts2 with ModelDriven for form submitting.
When I use datetimepicker tag of Dojo and select date from that tag the form is submitted correctly with the form values populated in the ModelDriven object.
But when datepicker tag of jQuery is taken in the form and date is selected the object in ModelDriven have null values.
If date is not selected and form is submitted then it work fine.
Is there any setting required that I missed to resolve the issue ?
I had included following jar for JQuery.
JQuery:
<sx:datepicker name="startDate" id="startDate" label="" cssStyle="width:275px; "
minDate="0" displayFormat="dd/mm/y" changeMonth="true" changeYear="true"
readonly="true" value="%{startDate}"/>
remove readonly="true" and everything will work fine.
readonly attribute default to false tells that whether the input is read-only.
I'm pretty sure that
name="startDate"
should be changed to
name="yourmodel.startDate"
Show more code for a better help...
Struts expects a value to be sent to the server as a locale-independent value, conforming to RFC3 339 (yyyy-MM-dd'T'HH:mm:ss) this is what the default dojo tag (now deprecated) provides: http://struts.apache.org/2.0.12/docs/datetimepicker.html
You can just send: 2013-01-03 the rest is optional.
The jQuery Datepicker I uses mm/dd/yy. To change this format to what struts2 expects either change the defaultFormat used for presentation or set altFormat which changes what was input into the format presented during submission (So if you like "mm/dd/yy" you can just set altFormat to "yyyy-mm-dd" and get the desired effect).
http://jqueryui.com/datepicker/#date-formats
http://api.jqueryui.com/datepicker/
As you can see jQuery easily provides for this, how to do it with the tag... I don't know. Someone else is welcome to take this information and extend it in another answer, with a tag specific technique if possible.
Problem was Dojo takes the date value on JSP as Date in java whereas JQuery takes it as string.
And so struts was finding for setDate(String) and not setDate(Date) for JQuery.
I have two different divisions in a JSP page. One contains a menu of links, when clicked the div2 (id-content) loads different pages accordingly. I am doing something like -
<div id="menu">
<ul class="navbar">
<li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
</li></div>
and in the script I have something as -
<script language="JavaScript">
function changeContent() {
document.getElementById('content').load('Login.jsp');
}
</script>
I also tried -
document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">";
None of the ways worked. Please suggest how should I
Try jquery..
function changeContent() {
$('#content').load('Login.jsp');
}
The solution is to use Ajax, which will asynchronously retrieve your page content that can be pasted in with the innerHTML method. See my answer to a similar question of how an Ajax call works and some introductory links.
As to why your examples in your answer don't work, in the first case there is no load() method on an Element object (unless you've defined one yourself and not shown it). In the second example, as one of the question comments says, there is probably something causing a syntax error in the javascript.
As an FYI, when there is a syntax error in some javascript in a web page, the current expression being parsed and the rest of the <script></script> block will be ignored. Since this is inside a function declaration, that function will never get defined.
For instance, an embedded quote in the included page will end the string for the innerHTML assignment. Then the javascript parser will try to parse the remainder of the HTML causing a syntax error as the HTML will not be valid javascript.
We use jquery. Add a click event handler to the anchor elements. In the click handler call $('#content').load(your_url);. You might want to use the load(url, function() { ...}) version. More info here http://api.jquery.com/load/
Your initial page comes down from the server. It's displayed by the browser. When you click on a link (or a button) in the browser, you want to fill the second div with new HTML. This is is a perfect job for an AJAX request. What the AJAX object in the browser does, is to send a POST (or whatever) string to the server. And then the Ajax object receives the HTML response back from the server. And then you can display that response data which the AJAX object contains, anywhere you want.
In my JSP page I have DIV.
<div id="100">
ALI
</div>
When I click on this DIV...
$("#100").click(function(){
});
...I need to send the value of the id 100, to a servlet, so that the servlet makes some database java codes, and returns for example, either 1 or 0. How can I do that? and is this the proper way?
Using Ajax, you should call your server using a URL similar to this:
http://localhot:8080/youAppContext/yourServer?id=100
Then, in the servler side, you should retrieve the value that will be in the request with the name "id"
There are out there many tool as jQuery that can help you to do the Ajax petition.
Edited
Well, here you can find a very simple Ajax example using jQuery. In the example, instead call a file (test1.txt) you should invoke a URL (as I described above). Of course, you will need to write some JS code to build your URL (where id be a variable). Once task is done in servlet side, you can return whatever, for example: "done" and display or not this information the HTML as it is done in the example.
Take a look to this Web, there are many links that can help you.
get the value using
var value = $("#100").html();
and pass it to servlet using AJAX
I am very much thankful to this stackoverflow,as i am getting required help very quickly here.
I am facing a problem in ExtJs.(with java spring backend combination). I am having a jsp file like this.
<c:when test="${eformDetails.controlType=='date'}">
<span id="eform_date_${eformDetails.id}"></span>
</c:when>
And in the js file i am trying to create date objects like this.But not working :-(
$.each('span[id^=["eform_date_"]',function(){new Ext.form.DateField({renderTo:this.id,name: 'form_0',id :'date_'+this.id,width: 140});});
My Requirement is if the eformDetails.controlType is date then i have to display a date field there.
Could please help me in this.
I am very much thankful to you guys..
Thanks in advance
-Sathya
The selector you're looking for is probably:
$.each('span[id^=eform_date_]', function() { /* DateField */ });
The unmatched bracket is a syntax error. You can test it in your browser's console to make sure you're getting it right.
I have dropdown with some optional value.if change the those value based on that will display another dropdown with value from database.I am doing this process in jsp page.First dropdown values are static(coded in jsp).but second dropdown values are come from database when changeevent of first dropdown.
Here i need to implement ajax or javascript ? Could you give me examples of this drop down.
You can do it with JQuery and Ajax pretty easily. Check out
http://www.chazzuka.com/experiments/jquery-dropdown/
for an example
Here i need to implement ajax or
javascript ?
Ajax.
Could you give me examples of this drop down.
JQuery works fine. I found DWR framework to be easier to understand for newcomers to Ajax. You can look at tutorials on that here.
You have two drop down
<select id="first" onchange="get_result();" >
somevale
</select>
<select name="second" >
</select>
now you need to give body to our get_result function
function get_result()
{
var value = $("#id).val();
JQuery.ajax("some_url",{ id : value }, function(){} )
}
This way you can do this. You specific check JQuery tutorial.