Checkout script conflict (jQueryUI date picker)

GeoffreyGeoffrey Member
in Bugs & Feature Requests edited November 2016
Hi. I'm trying to load a jQueryUI date picker as a custom field in the FC 2.0 checkout. I've been able to get it working in my test checkout, but it breaks as soon as a shipping address is entered and the Custom Flat Rates Shipping function is run.

I'm only loading this for multi-ship orders as an extra gift address option. Here's what I put in the custom footer:


{% if context == 'checkout' and has_multiship %}
<script type="text/javascript" charset="utf-8">
jQuery("#shipto_custom_0_datepicker").datepicker({
altFormat: "yy-mm-dd",
minDate: "0",
maxDate: "+1m"
});
jQuery('input#shipto_custom_0_gift-email').change(function() {
if ($('input#shipto_custom_0_gift-email').prop('checked')) {
$('.date-select').show();
} else {
$('.date-select').hide();
}
});
</script>
{% endif %}


And here is what I put in the custom multi-ship checkout fields config:


<label data-fc-id="gift-email-label" class="custom-label">
<input type="checkbox" name="gift-email" id="gift-email" value="0" class="fc-form-control">
Automatically send gift message email to my recipient (includes your message &amp; item summary).
</label>
<div class="fc-form-group date-select" id="date-select" >
<input class="fc-form-control" placeholder="Click to select a send date (optional)" type="text" id="datepicker" value="" name="Date" />
</div>


Both the date-picker field and the show/hide action on the checkbox work as intended and without issue when the checkout first loads, but as I explained above this all breaks after the shipping address is entered and the Custom Flat Rates Shipping function has run. After that, neither the date-picker field works nor the show/hide action attached to the checkbox works. Looking at the source, I notice that when the checkout first loads, the #datepicker input is given an extra class of "hasDatepicker" by the jQueryUI script, but after the Custom Flat Rates Shipping function runs this class disappears from that input.

The Chrome developer console is not showing any explicit javascript errors when this happens, so I'm having difficulty determining exactly what the conflict is and what to do next. Do you have any insight on what the problem I'm encountering is? Please advise. Thanks!
Comments
  • fc_adamfc_adam FoxyCart Team
    edited November 2016
    @Geoffrey,

    Thanks for providing such a detailed overview as always! The issue you're seeing here is that when the page is dynamically re-rendered, the application of the date-picker is being lost, and similarly your jQuery event that you bound directly to the element is being lost as the element is re-rendered.

    To keep the date picker applied, you'll need to re-apply it whenever the re-render is undertaken. You can do that by applying it after a render.done event occurs like this:
    FC.client.on("render.done", function() {
    // Apply datepicker
    });
    For the jQuery event - you would want to apply it slightly differently - binding the event to an element that doesn't get rerendered, and allowing the change event to bubble up the DOM, like this:
    jQuery('body').on('change', 'input#shipto_custom_0_gift-email', function() {
  • @fc_adam,

    Great! I'll give that a try. Thanks so much for the help.
Sign In or Register to comment.