put an editor field as autocomplete combobox

put an editor field as autocomplete combobox

xflamantxflamant Posts: 10Questions: 2Answers: 0

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

Answers

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi,

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

    Allan

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

    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

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

    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>
    
  • xflamantxflamant Posts: 10Questions: 2Answers: 0

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

                    label: "Adresse:",
                    name: "adresse"
                }, {
                    id: "VilleEditorId",
                    label: "Ville:",
                    name: "idVille",
                    type: "autoComplete"
                }, {
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

    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 ?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • xflamantxflamant Posts: 10Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.