Gravity Forms List Field JS Issue WordPress
- SOLVED
I am trying to apply an autocomplete function to a list field input with GF. Something about the core GF function, the .autocomplete function isn't recognized on any fields after the first.
Example: [[LINK href="http://ktrusak.com/test/"]]http://ktrusak.com/test/[[/LINK]]
Use the letter 'a' to show the autocomplete example
----
Here is code being used
jQuery(document).ready(function($){
$( ".gfield_list_1_cell1 input" ).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
});
and the source for the autocomplete function:[[LINK href="http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js"]] http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js[[/LINK]]
Answers (2)
Giri answers:
It works fine in google chrome. What browser you are using to test your site?
Kyle comments:
Thanks for the reply, I'm using chrome.
Are you sure that you had autocomplete work on a cloned input (so not the first input, you have to click + and then try it on the new one)?
Giri comments:
Sorry my bad.. I didn't see the cloned field. Let me try to fix it.
Kyle comments:
Thanks, yes the tricky part is that I can't touch the cloning function in GF
Giri comments:
Try this
jQuery(document).ready(function($){
$( ".gfield_list_cell input" ).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
});
Kyle comments:
Okay, I did. No luck
Giri comments:
Hmm let me see.
Giri comments:
How about this?
jQuery(document).ready(function($){
$('.gfield_list_cell input').focus(function() { {
$(this).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
});
});
Kyle comments:
No luck
It worked with .on('keyup' instead of focus, but not well
Giri comments:
Checkout this solution. This guy did it perfectly by creating a separate function.
http://jsfiddle.net/Za3Vu/
Kyle comments:
Yeah, that does
Can you try to apply that to the html on my site there. I'm trying too but not succeeding
Giri comments:
Yes i'm working on it
Kyle comments:
This is where I'm at so far
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
$('#gfield_list_1_col1 input:first').clone().val('').appendTo('#gfield_list_1_col1');
enable_autocomplete($('#gfield_list_1_col1 input:last'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Giri comments:
$(document).ready(function() {
enable_autocomplete($('.ac_input'));
$('.add_list_item').click(function() {
enable_autocomplete($('.gfield_list_cell input:last'));
});
});
function enable_autocomplete(InputField) {
$(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Kyle comments:
Yours didn't work, this is what I have, now it works for the first 2 but that's it, very strange (but getting closer)
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
enable_autocomplete($('.gfield_list_1_cell1 input'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Giri comments:
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
enable_autocomplete($('.gfield_list_1_cell1 input:last'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Kyle comments:
No change
Giri comments:
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
$('#gfield_list_1_col1 input:first').clone().val('').appendTo('#gfield_list_1_col1');
enable_autocomplete($('#gfield_list_1_col1:last input'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Kyle comments:
That broke it
Giri comments:
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
enable_autocomplete($('.gfield_list_1_cell1:last input'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Giri comments:
Try the last one
Kyle comments:
I did, no luck
Kyle comments:
I tried this, which would have absolutely worked, but it still only worked for the first two, so the problem must be with the click function not being triggered on the second click
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
var inputs = document.getElementsByTagName('input');
enable_autocomplete($(inputs));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
Giri comments:
Hello kyle,
The idea they were using is they point the current cloned element using :last pseudo class. So your click function points only the first clicked input.
To point last cloned element you must use :last pseudo class
In this jsfiddle
http://jsfiddle.net/Za3Vu/
They are using the :last pseudo class
Kyle comments:
isp charlie's solution below works. I will award you a part of prize tho, thanks awnyway
Giri comments:
jQuery(document).ready(function($) {
enable_autocomplete($('.gfield_list_1_cell1 input'));
$('img.add_list_item').click(function() {
enable_autocomplete($('.gfield_list tr:last-child input.ac_input'));
});
});
function enable_autocomplete(InputField) {
jQuery(InputField).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
isp_charlie answers:
code for you here, it work now :)
function dfAutoComplete(){
jQuery( ".gfield_list_1_cell1 input" ).autocompleteArray(["Allen","Albert","Alberto","Alladin"]);
}
jQuery(document).ready(function($){
jQuery(".add_list_item").click(function(){
$(".gfield_list_icons").attr("onClick","dfAutoComplete()");
})
dfAutoComplete();
});
isp_charlie comments:
Hi try my suggestion, it work 100%.
Kyle comments:
That worked :) thanks