put an editor field as autocomplete combobox

xflamant

Hi,
I managed to have a select field as a field editor as follows

    var villeArray= new Array();
    function villeLoader(){
    $.ajax({
      url: contextPath + "/unsecure/getVilles.htm",
      async: false,
      dataType: 'json',
      success: function (json) {
          for(var i=0;i<json.records.length;i++){
            obj= { "label" : json.records[i].label, "value" : json.records[i].value};
            villeArray.push(obj);
          }
          $(function() {
                $( "#VilleEditorId" ).combobox();
              });             
        }
    });
    return villeArray;
    }

    var editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  contextPath + "/secure/createMembre.htm"
            },
            edit: {
                type: 'PUT',
                url:  contextPath + "/secure/updateMembre.htm"
            },
            remove: {
                type: 'DELETE',
                url:  contextPath + "/secure/deleteMembre.htm"
            }
        },
        table: "#listMembres",
        fields: [ {
                label: "Pr\u00e9nom:",
                name: "prenom"
            }, {
                label: "Nom:",
                name: "nom"
            }, {
                label: "Adresse:",
                name: "adresse"
            }, {
                id: "VilleEditorId",
                label: "Ville:",
                name: "idVille",
                type: "select",
                options: villeLoader()
            }, {

But I would like to have an autocomplete combobox in place of the "VilleEditorId" field

I found this link that shows exactly what kind of field I would like
https://jqueryui.com/autocomplete/#combobox

As I found it on internet it seems that I should create a special type of field, but it is far beyond my knowledge in jquery. Have you an idea of how it can be done ? Thank you in advance for your answers

xflamant

I forgot to remove this part from the code
$(function() {
$( "#VilleEditorId" ).combobox();
});

allan

Hi,

There is a jQuery UI AutoComplete plug-in available for Editor available here.

Allan

xflamant

Hi Allan,

I tried

    var editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  contextPath + "/secure/createMembre.htm"
            },
            edit: {
                type: 'PUT',
                url:  contextPath + "/secure/updateMembre.htm"
            },
            remove: {
                type: 'DELETE',
                url:  contextPath + "/secure/deleteMembre.htm"
            }
        },
        table: "#listMembres",
        fields: [ {
                label: "Pr\u00e9nom:",
                name: "prenom"
            }, {
                label: "Nom:",
                name: "nom"
            }, {
                label: "Adresse:",
                name: "adresse"
            }, {
                id: "VilleEditorId",
                label: "Ville:",
                name: "idVille",
                type: "autoComplete",
                source: function (request, response) {
                    var villeArray= new Array();
                    $.ajax({
                          url: contextPath + "/unsecure/getVilles.htm",
                          async: false,
                          dataType: 'json',
                          data: {
                              q: request.term
                          },
                          success: function (json) {
                                          var villeArray= new Array();
                              for(var i=0;i<json.records.length;i++){
                                obj= { "label" : json.records[i].label, "value" : json.records[i].value};
                                villeArray.push(obj);
                              } 
                              response ( villeArray )
                            }
                        });
                }
            }, {
                label: "Pays:",
                name: "idPays"
            }, {
                label: "Email:",
                name: "email"
            }, {
                label: "Telephone:",
                name: "telephone"
            }, {
                label: "Login:",
                name: "login"
            }, {
                label: "Mot de passe:",
                name: "password"
            }, {
                label: "Droits:",
                name: "droits"
            }, {
                label: "Cotisation:",
                name: "cotisation"
            }, {
                label: "Question:",
                name: "question"
            }, {
                label: "Reponse:",
                name: "reponse"
            }
        ]
    } );

But Firefox indicates me there is an error :

TypeError: this[H50][(m40 + K4)] is undefined in dataTables.editor.min.js

As you suggested in a former post, I tried to load jquery-ui.min.js at any place but the error is still present

xflamant

Hi,

the code above is in index.js

and I load the libraries this way

<script type="text/javascript"
src="<c:url value='/resources/js/external/jquery.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui.min.js'/>"></script> 

<script type="text/javascript"
src="<c:url value='/resources/js/index.js'/>"></script>

<script type="text/javascript"
src="<c:url value='/resources/js/galery.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery.dataTables.js'/>"></script>

<script type="text/javascript"
src="<c:url value='/resources/js/dataTables.tableTools.min.js'/>"></script>

<script type="text/javascript"
src="<c:url value='/resources/js/dataTables.editor.min.js'/>"></script>

xflamant

Hi,
as soon as i add autoComplete type there is the error

                label: "Adresse:",
                name: "adresse"
            }, {
                id: "VilleEditorId",
                label: "Ville:",
                name: "idVille",
                type: "autoComplete"
            }, {

allan

Have you added the AutoComplete plug-in code from the URL I gave above? I don't see it in the code you've posted.

Allan

xflamant

Hi Allan

I downloaded the jquery-ui library that includes all the component (including autocomplete) from this page http://jqueryui.com/download/#!
I understood that the autocomplete plugin is part of this download. But I have still the same error. I can't see another library to download

allan

I understood that the autocomplete plugin is part of this download.

The jQuery UI software included its AutoComplete library, yes. However, the page I linked to above has the code required for Editor to actually use that software. You need to code from that page in order to be able to use the AutoComplete library.

Allan

xflamant

Hello Allan,
I must confess I am completely lost. The only info on the page you linked is that I must use field-options or opts attributes and/or the field() methods and node() method. Could you give me a simple example so I can start ?

allan

Ah, I see the issue - you don't have a purchased Editor license. Does it not say on that page the following?:

License required
The Editor plug-ins are available to download for registered users of Editor only. If you already have an Editor license, please sign-in. Otherwise, an Editor license can be purchased to be able to access the plug-ins.

At this time the plug-ins are available only to those who have purchased a license.

Allan

xflamant

Hello Allan,

yes it is the issue. Unfortunately I can't afford the price of the licence. I develop an application for a non lucrative tennis association. Do you know a free jquery techno that meet my requirements. Otherwise, I will use EXTJS

allan

Unfortunately to use Editor after the 15 day free trial you would need a license. I would be happy to offer a 25% non-profit discount, but side from that I would suggest Googling other libraries that suit your needs.

Allan