Multiple Datepicker Conflict WordPress
- SOLVED
I am using a gravity form within a loop, so the form is displayed multiple times, and each time is prepopulated with the post meta of each post in the loop. However, one of the empty boxes on the form (i.e. an input that is not pre populated) is the datepicker box.
The problem is since it is the same form being displayed several times the jquery is not recognizing the individual datepicker inputs (I'm guessing). So regardless of which input you select, it will only fill in the first input.
Please see this page [[LINK href="https://hookahi.com/guides/hucks-charters/"]]here[[/LINK]]
You can see to forms with add to cart buttons, those date inputs are the ones malfunctioning.
I am pretty much at a loss on a solution for this. I thought perhaps appending a unique id for each instance so that the input ids were separated, but I am not sure if that even solves the underlying jquery conflict. All ideas and solutions welcome
Answers (3)
Christianto answers:
The id cannot be same..
you can edit the id before jquery datepicker initialize
but I'm not sure if it will affect the form if the id change.
open wp-content/plugins/gravityforms/js/datepicker.js
passing the iterate var to each(), and change the id, so it become:
jQuery(document).ready(gformInitDatepicker);
function gformInitDatepicker(){
jQuery('.datepicker').each(
function (i){ // passing iterate number var i;
var element = jQuery(this);
var format = "mm/dd/yy";
element.attr('id', element.attr('id')+'-'+i); // change all id
if(element.hasClass("mdy"))
format = "mm/dd/yy";
else if(element.hasClass("dmy"))
format = "dd/mm/yy";
else if(element.hasClass("dmy_dash"))
format = "dd-mm-yy";
else if(element.hasClass("dmy_dot"))
format = "dd.mm.yy";
else if(element.hasClass("ymd_slash"))
format = "yy/mm/dd";
else if(element.hasClass("ymd_dash"))
format = "yy-mm-dd";
else if(element.hasClass("ymd_dot"))
format = "yy.mm.dd";
var image = "";
var showOn = "focus";
if(element.hasClass("datepicker_with_icon")){
showOn = "both";
image = jQuery('#gforms_calendar_icon_' + this.id).val();
}
element.datepicker({ yearRange: '-100:+20', showOn: showOn, buttonImage: image, buttonImageOnly: true, dateFormat: format });
}
);
}
let me know if this not working
Kyle comments:
Worked perfectly, thank you for your help!
John Cotton answers:
Your problem is that you've given both inputs the same ID. THe code will work if they have different IDs.
Kyle comments:
Do you know of someway to append-info-to or modify the ids so that they are unique?
John Cotton comments:
HMTL id attributes must be unique. There's nothing to stop you reusing an ID, but often code will break when you do!
John Cotton comments:
<blockquote>Do you know of someway to append-info-to or modify the ids so that they are unique?</blockquote>
How are they being generated now? Sorry I don't use gravity forms...
John Cotton comments:
Since you're in a loop, I'll bet your calling some gravity forms function. Check the parameters of that function - particularly the optional ones. I wouldn't be surprised if there was an optional id (I notice both forms have this hidden element: <input type="hidden" name="gform_form_id" id="gform_form_id" value="6"> - both set to 6, which is being used as the base name for form elements by the look of it.)
Kyle comments:
Gf generates the input ids based on like the form order, in sequence. So like #gf_input_3_2 where the first number is the form and the second is the input. Is there a script perhaps to force an id for all datepickers and insert a counter so each liek it becomes #datepickerx1 #datepickerx2 #datepickerx3 or something?
John Cotton comments:
<blockquote>Is there a script perhaps to force an id for all datepickers and insert a counter</blockquote>
I would have thought so, others GF is useless in many situations and too many people use it for that to be the case surely.
But, as someone who doesn't use it, I can't say what the function is. I had a quick look at their documentation, but I can't see anything.
I'm certain this is a GF problem - change the ids and the code will work. So I'd ask in their support forum.
Kyle comments:
I did, they don't really offer an official solution. The issues has been posted here and there asking about posting the same form multiple times on a page. The reason this works for the other inputs is that it is being used with Woocommerce, so it is really just submitting the meta to the cart, rather than making a true form submission, this form actually works if I do the other datepicker options, like just blank boxes, just not with the datepicker. That's why I asked here, hoping for a jquery solution, but yeah
John Cotton comments:
<blockquote>I did, they don't really offer an official solution. </blockquote>
Well that's crap. I knew there was a reason I don't use Gravity Forms.
John Cotton comments:
I'll try to think of something you could do, but at the moment, the only thing that strikes me is to parse the HTML that gets generated. But that would almost certainly mean that you can't use the GF callbacks when then form gets posted back.
Arnav Joy answers:
can you explain some more points about your problem
Kyle comments:
If you click the second date picker input, labeled start time, you will see that when you select a date on the datepicker it fills in the input for the first form and not the second form
Arnav Joy comments:
i clicked on the button but it did not opened any picker?