0

I currently have a form in which there is 2 datePicker (Jquery UI). On the first one, when I "mouseenter" a date, I do an AJAX call to get a response (and it works). The problem here is that the AJAX call works for both the datePicker. I want it for the first one only! Here is the HTML :

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Next relaunch</label>
    <div class="col-md-6 col-sm-6 col-xs-12" id ="nextLaunchDate">
        <input name="nextLaunchDate" class="datePicker form-control col-md-7 col-xs-12" title="Next relaunch">
    </div>
</div>
<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Validity date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
         <input name="validityDate" class="datePicker form-control col-md-7 col-xs-12" title="Validity date">
    </div>
</div>

In fact, it's quite basic. Now, here's the JS:

$(document).ready(function() {
    $(function () {
        $(".datePicker").datepicker({
            showWeek: true,
            dateFormat: "dd-mm-yy"
        });
    });

    $("body").on("mouseenter", ".ui-state-default", function () {
        var element = $(this);
        var day = (0 + "" + $(this).text()).slice(-2);
        var month = $(this).parent().attr("data-month");
        month++;
        month = (0 + "" + month).slice(-2);
        var date = day + "/" + month + "/" + element.parent().attr("data-year");

        $(this).attr('title', date);

        $.ajax({
            url: '/offer/getrelaunchthatday',
            type: 'POST',
            data: 'dateSelected=' + day + "-" + month + "-" + element.parent().attr("data-year"),
            dataType: 'json',
            success: function (json_response) {
                if (json_response.status === "success") {
                    element.attr('title', "Offers today : "+json_response.value);
                }
                else {
                    $(".x_panel:first").before("<div class=\"alert alert-danger deletable\">An error happened : <br/>" + json_response.value + "</div>");
                }
            },
            error: function (result, status, error) {
                $(".x_panel:first").before("<div class=\"alert alert-danger deletable\">An error happened: <br/>" + error+ "</div>");
            }
        });
    });
});

I understand why the ajax call works for both of the datePicker but I can't understand how I can do the call only for the second one. If you have any idea about this, don't hesitate to comment! Also, if you have any note on my code, tell me! :) Have a good day!

EDIT : Here's a codePen to show you my problem : https://codepen.io/anon/pen/aLmpbN

Improve this question
4
  • Where is .ui-state-default class?
    – Thusitha
    Commented Sep 22, 2017 at 8:02
  • It's the one generated by the jquery UI datePicker, added just before the closing </body>
    – Alexandre
    Commented Sep 22, 2017 at 8:05
  • Can't you use ids to add event listeners seperately
    – Thusitha
    Commented Sep 22, 2017 at 8:07
  • Maybe, but I don't think so : the two input use the same datepicker, it's not related to the input. Try it by yourself! :) codepen.io/anon/pen/aLmpbN
    – Alexandre
    Commented Sep 22, 2017 at 8:21

4 Answers 4

Reset to default
2

Since jQuery use same date picker component for both inputs, you should add conditional checks using ids. See the following example where two date pickers have different actions when mouseover.

var datePicker = "";

//First date picker
$("#first_date").datepicker({
  beforeShow: function() {
    datePicker = "FIRST_DATE";
  },
  onClose: function() {
    datePicker = "";
  }
});

//Second date picker
$("#second_date").datepicker({
  beforeShow: function() {
    datePicker = "SECOND_DATE";
  },
  onClose: function() {
    datePicker = "";
  }
});

//Add conditional mouse hover events

$("body").on("mouseenter", ".ui-state-default", function() {
  if (datePicker == "FIRST_DATE") {
    //Do first date picker stuff
    console.log("on first date picker");
  } else {
    //Do second date picker stuff
    console.log("on second date picker");
  }


});
<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  </script>
</head>

<body>

  <p>First Date:
    <input type="text" id="first_date">
  </p>

  <p>Second Date:
    <input type="text" id="second_date">
  </p>


</body>

</html>

You should use ids rather than using a class name for different date inputs.

Improve this answer
2
  • I used boolean instead of string but it's excellent, thanks! :)
    – Alexandre
    Commented Sep 22, 2017 at 8:47
  • Glad to help you. Strings will suit for more than two inputs.
    – Thusitha
    Commented Sep 22, 2017 at 8:48
2

Just umm... There is no answer. It is just your choice. ! :)

<input type="text" id="first_date" class="datePicker" data-type="test1">
<input type="text" id="second_date" class="datePicker" data-type="test2">

$(".datePicker").datepicker({
    showWeek: true,
    dateFormat: "dd-mm-yy"
});

$("body").on("mouseenter", ".datePicker", function(e) {
    var type = $(this).data('type');

    if (type == 'test1') {

    } else {
        // test2
    }
}
Improve this answer
1
  • This is also a great idea! :)
    – Alexandre
    Commented Sep 22, 2017 at 11:02
0

Give the event through the class name.

HTML

<div>
    <label class="control-label col-md-3">Next relaunch</label>
        <input name="nextLaunchDate" class="datePicker form-control col-md-7" title="Next relaunch">
</div>
<div>
    <label class="control-label col-md-3">Validity date</label>
         <input name="validityDate" class="datePicker2 form-control col-md-7" title="Validity date">
</div>

JS

$(".datePicker").datepicker({
    showWeek: true,
    dateFormat: "dd-mm-yy"
});

$(".datePicker2").datepicker({
    showWeek: false,
    dateFormat: "yy-mm-dd"
});

Otherwise, you can assign an event based on the class name through JQuery.

good day~

Improve this answer
1
  • These different classes are not available under the date picker ui since it is positioned absolute with the body. Therefore mouseover events can not be added using these two classes.
    – Thusitha
    Commented Sep 22, 2017 at 8:38
-1

You missed "<" in second label. And use current input in your function, not "body"

Improve this answer
2
  • You should provide an example on how to achieve the desired result without just telling the issue.
    – Thusitha
    Commented Sep 22, 2017 at 8:04
  • You're right but it's because it was a french label, I translated it and removed the "<" by error, it's not related to my problem :)
    – Alexandre
    Commented Sep 22, 2017 at 8:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.