Hello!
I'm using the jQuery ui datepicker on a few different pages and it's working perfectly on all but one.
I set up two datepickers on the same page, one on the main page area which is working with no issues at all. The second is on a modal and is the one I'm having issues with.
Initially the datepicker wasn't populating at all so I had to force it with an inline onclick. Now it's populating but isn't reflecting my minDate or any other functions,...basically not picking up any of the script at all (excluding dates, weekends, display button, etc).
It seems likely this is a conflict with the jQuery iModal it's located within. This is a BigCommerce site and there's a lot going on from their backend so could also be a conflict with some of their javascript.
I'll go ahead and post code altho I'm certain viewing source will be the best way to get a picture of what's going on. For anyone willing to do that, I've set up a test site: Link to My Poor Not Working Cart Page
Note: the non-working datepicker is within a modal. Only way to see it is by going to the store, adding an item to the cart . Be sure to pick a delivery date from the product page. Then there will be a link under the product name, "Change", that, when clicked, brings up the modal.
Also: For those not familiar with BigCommerce, anything wrapped in %% is a Global Bigcommerce variable and refers to either a text string or code block generated by their servers.
This is the area with the modal and non-working datepicker:
- <script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery/plugins/validate/jquery.validate.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/cart.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery/plugins/jquery.form.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/product.attributes.js?%%GLOBAL_JSCacheToken%%"></script>
<link rel="stylesheet" type="text/css" media="screen"href="%%GLOBAL_ShopPath%%/javascript/jquery/themes/cupertino/ui.all.css?%%GLOBAL_JSCacheToken%%" />
<link rel="stylesheet" type="text/css" media="screen"href="%%GLOBAL_ShopPath%%/templates/__master/Styles/product.attributes.css?%%GLOBAL_JSCacheToken%%" />
<div id="ModalTitle">%%GLOBAL_CustomizeProductTitle%%</div>
<form id="CartEditProductFieldsForm" method="post" action="cart.php" onsubmit="return Cart.saveItemCustomizations();" enctype="multipart/form-data">
<input type="hidden" name="action" value="EditProductFieldsInCart" />
<input type="hidden" name="item_id" value="%%GLOBAL_ItemId%%" />
<div id="ModalContent" style="overflow: auto;">
<dl class="HorizontalFormContainer ProductFields">
</dl>
<div class="productAttributeList">
%%SNIPPET_ProductFieldsList%%
%%GLOBAL_ProductAttributeList%%
</div>
<div id="CartdatepickerDiv" class="ml25">
<label for="datepicker2" class="name">Desired Delivery Date:</label><br />
<input id="datepicker2" onclick="$('#datepicker2').datepicker();$('#datepicker2').datepicker('show');"placeholder="ex. 01/01/2013" readonly />
</div>
</div>
<div id="ModalButtonRow">
<div class="FloatLeft"><a href="#" onclick="$.modal.close();">%%LNG_Cancel%%</a></div>
<input class="Submit" class="Submit" type="submit" value="%%LNG_Save%%" />
</div>
</form>
<script type="text/javascript">
lang.EnterRequiredField = "%%LNG_EnterRequiredField%%";
lang.InvalidFileTypeJS = "%%LNG_InvalidFileTypeJS%%";
lang.DeleteProductFieldFileConfirmation = "%%LNG_DeleteProductFieldFileConfirmation%%";
</script>
Sorry I can't post more code or screenshots...I keep trying but it exceeds the content limit. Please view source for the link above and/or let me know if you have any questions.
Thanks so much!
Susan