#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6

    Focus() not working


    Howdy. The simply explanation of my goal is, when a user tabs from this date input, I wish it to check if this date is prior to the previous, which it does. However, if edited directly, and date not chosen via datepicker, it will offer the pop-up error, set date to earliest allowed, but still move focus w/ their tab. I want it to refocus on this date input to make them pick another date.
    Code:
    $('#finish').datepicker( {
      dateFormat: "mm-dd-yy",
      onClose: function () {
        var dt1 = $('#start').datepicker('getDate');
        var dt2 = $('#finish').datepicker('getDate');
        if (dt2 < dt1) {
          alert('The finish date cannot be prior to the start.');
          $('#finish').datepicker('setDate', dt1);
          document.getElementById('finish').focus();
        }
      }
    });
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    I think you should look at the showOn option for the Datepicker Widget. You should be able to set it to "both"; to trigger the datepicker() function.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    It appearing is not an issue. It's the checking of the date. I have it set its minDate to the Start Date field before it. This stops them from picking a prior date via the datepicker. The issue is if the manual TYPE a prior date in. I do have the error successfully pop up, but if they press TAB after typing the date, it still moves to the next field. I want it re-focused back to the End Date field asking them again for a valid date.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    830
    Rep Power
    275
    does anything change [or possibly work] if you change
    Code:
          $('#finish').datepicker('setDate', dt1);
          document.getElementById('finish').focus();
    to
    Code:
          $('#finish').focus().datepicker('setDate', dt1);
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Triple_Nothing
    It appearing is not an issue. It's the checking of the date. I have it set its minDate to the Start Date field before it. This stops them from picking a prior date via the datepicker. The issue is if the manual TYPE a prior date in. I do have the error successfully pop up, but if they press TAB after typing the date, it still moves to the next field. I want it re-focused back to the End Date field asking them again for a valid date.
    You need to validate the dates, as a date; with the way your currently validating the dates..., I think your condition is validating them as a string. Check out this .validation() Plugin; I think it will help you with this matter.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    DonR, no luck w/ the altered line.

    web_loone08, validation is working just fine, hence the error actively presenting itself if the date is invalid. alert() works and presents itself exactly when it should, but the next line doesn't hold/reset focus to the Finish Date input.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Triple_Nothing
    web_loone08, validation is working just fine, hence the error actively presenting itself if the date is invalid. alert() works and presents itself exactly when it should, but the next line doesn't hold/reset focus to the Finish Date input.
    I guess it does..., my mistake; try this (manually enter a date, in the $("#finish") input field; prior to the date in the $("#start") field. Put the date in the format you have chosen... ie: "mm-dd-yy" and then press the tab key or you can even try to click the select menu. You should automatically be refocused back to the $("#finish") input field..., at least from that was the result I got; when I just tested the updated code below, with my mock-up html):
    Code:
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    
    <script>
    $(document).ready(function(){
     $('#start').datepicker({
      dateFormat: "mm-dd-yy",
      });
     $('#finish').datepicker( {
      dateFormat: "mm-dd-yy",
      onClose: function () {
        var dt1 = $('#start').datepicker('getDate');
        var dt2 = $('#finish').datepicker('getDate');
        if (dt2 < dt1) {
          alert('The finish date cannot be prior to the start.');
          $('#finish').datepicker('setDate', dt1);
          setTimeout("$(function(){$('#finish').focus();})",100);
        }
      }
     });
    });
    </script>
    
    Start:
    <input id="start" type=""/>
    
    End:
    <input id="finish" type=""/>
    
    Adults
    <select>
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
    </select>
    Last edited by web_loone08; January 6th, 2014 at 12:53 AM. Reason: Corrected A Mistake That I Made, In My Code Example
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    By default, Finish Date is disabled until a value has been entered into the Start Date, but to troubleshoot, I enabled it and entered value. If I click field and select date via datepicker, it enters the date and focus lands on no field. If I manually type a date in, and press tab, no error becomes present, and it successfully moves focus to next field.

    Now, for the GOOD NEWS. You found something. setTimeout() seems to do the trick! A lil thing, though, is it will cause the error to present itself twice. I am assuming once upon the initial step away from the field, and the second when brought back via the refocus. If I have the field change their invalid date to make the minDate, it will only error once, but if possible, I would like to leave the invalid date in the field for their visual. Any ideas?
    Code:
    <script>
      $(document).ready(function() {
        $('#start').datepicker( {
          dateFormat: "mm-dd-yy",
          onSelect: function (date) {
            var date2 = $('#start').datepicker('getDate');
            date2.setDate(date2.getDate());
            $('#finish').datepicker('setDate', date2);
            document.getElementById('finish').disabled = false;
            var minDate = $('#finish').datepicker('option', 'minDate');
            $('#finish').datepicker('option', 'minDate', date2);
          }
        });
        $('#finish').datepicker( {
          dateFormat: "mm-dd-yy",
          onClose: function () {
            var dt1 = $('#start').datepicker('getDate');
            var dt2 = $('#finish').datepicker('getDate');
            if (dt2 < dt1) {
              alert('The finish date cannot be prior to the start.');
              $('#finish').datepicker('setDate', dt1);
              setTimeout("$(function(){$('#finish').focus();})",100);
            }
          }
        });
      });
    </script>
    Last edited by Triple_Nothing; January 6th, 2014 at 07:37 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    Here's something odd. When TAB-ing from the field while defining an invalid date, 2 errors will present. When CLICK-ing away from the field, only 1 error will present, and it will work as desired.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Triple_Nothing
    Here's something odd. When TAB-ing from the field while defining an invalid date, 2 errors will present. When CLICK-ing away from the field, only 1 error will present, and it will work as desired.
    Not sure..., I only got one alert message; either by tabbing or manually clicking off of the $("#finish") input field.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    What browser are you testing in? I am trying IE9-IE11. It sounds the company this is for is set up on IE10.

    Here's a link to more an actual run of the file, more or less.
    http://kdna.jtgcomputers.com/modules/ifrs/profile.php

    As far as the CLICK vs TAB, I was a little off. If I TAB or CLICK on another input, I get 2 errors. If I click in an open space on page, then just 1 error.
    Last edited by Triple_Nothing; January 7th, 2014 at 12:58 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  22. #12
  23. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Tested it in Chrome & Opera and only got one alert. Do not know why your getting an additional alert, in IE. You may have to add in some extra validation, for IE; to prevent the second alert.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    Deleted
    Last edited by Triple_Nothing; January 9th, 2014 at 08:46 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him

IMN logo majestic logo threadwatch logo seochat tools logo