Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2013-06-14

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"]);



}

2013-06-14

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