Java Ninja Chronicles By Norris Shelton

Things I learned in the pursuit of code

This is a typical Jquery ajax request.

$.get(this.action, $(this).serialize(), function (data) {
    $('#expungeResult').html(data);
})

This works great until you realize that it is really taking data from a form and is changing data on the site. It should be a post, but it was mistakenly made with a get. The controller method was defined as POST only. This causes the an error in the server log.

Request method ‘GET’ not supported

Jquery $.get and $.post do support chaining .success(), .error() and .complete() methods. Unfortunately, they don’t have parameters.

$.ajax has what you need, at the expense of a more verbose declaration.

$.ajax({
    cache: false,
    type: "GET",
    url: this.action,
    data:$(this).serialize(),
    success: function (data) {
        $('#expungeResult').html(data)
    },
    error: function (jqXHR, textStatus, errorThrown) {
        $('#expungeResult').html(textStatus).append("...").append(errorThrown).css('color', 'red')
    }}
);

Now, “error…Request method ‘GET’ not supported” is displayed in red in my display area. An ugly message, but at least the user will not keep clicking the button because it looks like nothing happened.

June 12th, 2012

Posted In: javascript, JQuery

Tags:

Leave a Comment

IE8 displaying Jquery dialog with scroll bars

This was happening only on IE8 (native and CoRD). It was working correctly on Chrome and Firefox.

The solution is to call .height(‘auto’) after the dialog is created.

                    $(document).ready(function() {
                        $('#phoneDataButton').click(function() {
                            $('#phoneDataSearchForm').dialog({
                                modal:true,
                                width: 700,
                                close: function() {
                                    $('#phoneSearchResults').html("");
                                    location.reload(true);
                                }
                            }).height('auto')
                        })
                    })

October 7th, 2011

Posted In: javascript, JQuery

Tags: , ,

Leave a Comment

Yeah. jQuery form validation is proving to be very nice. If you have been following this blog, you have seen how to set-up the standard validations and even create your own custom validation. One problem I had to solve was that the validation message broke my UI. I still needed the message, but I didn’t need it to display in the default location which is to the right of the field. That turn out to be very easy. First define an area where you want your validation messages to be displayed.

<form name="myForm" id="myForm" action="">
     <div id="myErrorLabelContainer"></div>
     <input class="required date dateRange" type="text" id="myField" name="myField">
</form>
<input type="submit" value="Go Validate"/>

The next step is to tell the jQuery Validation plugin that you want to use this for the error messages. This is accomplished with the errorLabelContainer option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#executiveConsoleForm').validate({
            errorLabelContainer: "#myErrorLabelContainer"
        });
    });
</script>

This is just the beginning of error place. There is also the errorPlacement option that can be used to define logic to indicate where you want error messages to be displayed. A smal example of this can be found in the groups documentation

December 15th, 2010

Posted In: javascript, JQuery

Tags: , , ,

One Comment

My previous blog entry showed how to quickly add Jquery Validation. One that was not there was the ability to compare two fields that contain dates and validate that the field that should hold the older date was in-fact older. Here is how I created the custom validation.

First I defined the custom validation called dateRange and it’s error message. This allows me to dateRange as a CSS class name for validation purposes.

<script type="text/javascript">
     $(document).ready(function() {
        $.validator.addMethod("dateRange", function() {
            return new Date($("#olderDate").val()) < new Date($("#newerDate").val());
        }, "Please specify a correct date range<br/>The older date must be before the newer date.");

Then I set-up the form for validation. I added the groups option so that the plugin knows that the fields should be validated together. Without this validation, each field will be validated and if the validation failed, both fields would have error messages.

          $('#myForm').validate({
            groups: {
                dateRange: "olderDate newerDate"
            });
    });
</script>

All that is left is the HTML of the actual form. Here I create a form that has two input fields. I indicate that both fields are required, they must be dates and they should be in the correct chronological order.

<form name="myForm" id="myForm" action="">
     <input class="required date dateRange" type="text" id="olderDate" name="olderDate">
     <input class="required date dateRange" type="text" id="newerDate" name="newerDate">
     <input type="submit" value="Let's date validate"/>
</form>

December 15th, 2010

Posted In: javascript, JQuery

Tags: , , ,

One Comment

jQuery makes it pretty easy to create form validation. All it takes it first setting the form up to validate when it submits.

<script type="text/javascript">
     $(document).ready(function() {
          $('#myForm').validate();
     });
</script>

Then you indicate the type of validations that should occur. There are a couple of ways to do this. The easiest for me is to add the validations as if they are CSS classes for the individual fields. In this example, I indicate that I want the field to be required and the value should be a valid date. Some of the other validations that are available are email, minlength, maxlength, min, max. The entire list is available here

<form name="myForm" id="myForm" action="">
        <input class="required date" type="text" id="myId" name="myDate" size="10" value="${yesterday}">
</form>

Error display is handled for you automatically. Standard validation messages are already set-up and the messages appear in red to the right of any invalid field.

By default, the validation is not triggered until the field is submitted, but any fields flagged by invalid are re-checked when they are changed.

December 15th, 2010

Posted In: javascript, JQuery

One Comment

There are two date pickers. jQuery has one, but it is simplified. The one that I like to use is by Keith Wood. His datepicker plugin formed the basis of the jQuery datepicker plugin. Keith’s plugin is available here.

Here is an example of the calendar.  The calendar will have the following features:

  • default date (defaultDate)
  • maximum date (maxDate)
  • triggering icon

Here is the script for the calendar

$(document).ready(function() {
     $('#recentDate').datepick({
          defaultDate: -1,
          maxDate: -1,
          showTrigger: '#recentDateImg'
     });
});

Here is what the html looks like:

<label for="recentDate">
     Recent <input type="text" id="recentDate" name="recentDate" size="10" value="${yesterday}">
     <div style="display:none">
          <img id="recentDateImg"
               src="/intranet-templating/bhsi/js/images/calendar.gif"
               alt="Recent Date"
               class="trigger">
     </div>
</label>

Notice that the triggering icon is surrounded by a DIV that is set to not display. If this is not done, then 2 icons will be displayed.

This is what the screen will look like:

Here is what the calendar looks like when it is open.  Notice that the dates after yesterday are greyed-out and are not selectable.  This is the maxDate at work.

 

In this case, maxDate was specified as -1.  That means today’s date minus 1 day or yesterday.  You can specify a date that is relative to today by using d for days, w for weeks, m for months, y for years or just specify a date as a string or as javascript.  If you are using a relative date, you can string them together.  -1d -1m is a month from yesterday.  Positive and negative numbers are allowed.

December 8th, 2010

Posted In: javascript, JQuery

Leave a Comment

« Previous Page
WP to LinkedIn Auto Publish Powered By : XYZScripts.com