[Craig MatthewsParticipant]

Hello Martin,

That path was what I needed.

Thank you.

[Craig MatthewsParticipant]

Hello Martin,

I looked at the example, and the example has the “image missing” icon next to the word “Folder”, so it looks like I am not the only one that can’t tell where the images need to be located.

Line 26 of the example app.vue is:
text: "<img src='../../images/folder.png'></img> Folder",

What I am asking is: where is “../../images/” supposed to be relative to where the npm run server localhost:8080 is looking?

[Craig MatthewsParticipant]

Hello Martin,

The css was part of the problem. Since I couldn’t post a png file here, I couldn’t show what it was actually doing. It is mostly fixed now.

The problem I am still having is that I am using the JqxMenu with images and UL/LI when what I really want to use is the JqxMenu from an array, so that I can programmatically modify the menu contents before JqxMenu renders the menu. When using the UL/LI approach, the img src points to a predictable location (relative to src/components) but I can’t determine where the array contents img src needs to reference.

Once that is solved, the menu will be fine.

[Craig MatthewsParticipant]

Hi Peter Stoev,

I would never have suspected I needed:
inputField.jqxMaskedInput('clear');

Now if there were only a way to control cursor positioning within the jqxMaskedInput field.

Thank you for the assistance.

[Craig MatthewsParticipant]

Hi Peter Stoev,

I have checked my code – repeatedly – for anything that would carry the last two characters from the cell above to the current cell.

The only time this happens is when multiple cells in the same column are edited.

The first cell edited in this column correctly starts out as nine zeroes. After that row is edited, the same column in the next row carries the last two characters from the row above, such as when entering 123-45-6789 the next row starts as 000-00-0089 and after changing that to 987-65-4321 the next row will incorrectly start as 000-00-0021.

There is nothing in my code that would do this.

In initeditor I have verified the cell contents as being nine zeroes before setting inputField.val. As of the end of the initeditor, control passes back into the jqxGrid code, which I have neither the time nor expertise to delve into.

I have included a stripped-down version of my code that demonstrates this. If you save it as html and run it, you will see what I am experiencing.

Throughout my career, I seem to find things that no one else has run into before. I think I have done so once again.

Please investigate this further.

Thank you.

<!-- Written by Craig R. Matthews -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.edit.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.selection.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcalendar.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcheckbox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcombobox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdatetimeinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdragdrop.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdatatable.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxmaskedinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxnotification.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxnumberinput.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxpanel.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxradiobutton.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxtooltip.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxtree.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxmenu.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxwindow.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxvalidator.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" type="text/css" href="js/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" type="text/css" href="js/jqwidgets/styles/jqx.energyblue.css" />

<script language='javascript' type='text/javascript'>
  var dependents = [ ['Self', 'Doe', 'John', 'M', '19941023', '100101000' ],
                     ['Spouse', '', '', '', '00000000', '000000000' ],
                     ['Child 1', '', '', '', '00000000', '000000000' ],
                     ['Child 2', '', '', '', '00000000', '000000000' ],
                     ['Child 3', '', '', '', '00000000', '000000000' ],
                     ['Child 4', '', '', '', '00000000', '000000000' ],
                     ['Child 5', '', '', '', '00000000', '000000000' ],
                     ['Child 6', '', '', '', '00000000', '000000000' ],
                     ['Child 7', '', '', '', '00000000', '000000000' ],
                     ['Child 8', '', '', '', '00000000', '000000000' ],
                     ['Child 9', '', '', '', '00000000', '000000000' ],
                     ['Legal Ward', '', '', '', '00000000', '000000000' ],
                   ];
  $(document).ready(function() {
    addSubPageEventListeners();
    createSubPageElements();
    setEmployee();
  });
  function addSubPageEventListeners() {
  }
  function createSubPageElements() {
  }
  function setEmployee() {
    var i = 0,
        parts,
        w = '';
    var data = new Array(),
        row = {};
    for (i = 0; i < dependents.length; i++) {
        row = {};
        row['a'] = dependents[i][0];
        row['b'] = dependents[i][1];
        row['c'] = dependents[i][2];
        row['d'] = (dependents[i][3] == 'M' ? 'Male' : (dependents[i][3] == 'F' ? 'Female' : ''));
        row['e'] = createJSDate(dependents[i][4]);
        row['f'] = dependents[i][5];
        row['g'] = (dependents[i][6] == 'Y');
        row['h'] = (dependents[i][7] == 'Y');
        row['i'] = (dependents[i][8] == 'Y');
        row['j'] = (dependents[i][9] == 'Y');
        data[i] = row;
    }
    var Dependents = { localdata: data,
                       datatype: 'array',
                       datafields: [ { name: 'a', type: 'string' },
                                     { name: 'b', type: 'string' },
                                     { name: 'c', type: 'string' },
                                     { name: 'd', type: 'string' },
                                     { name: 'e', type: 'date' },
                                     { name: 'f', type: 'string' }
                                   ]
    };
    var dataAdapter = new $.jqx.dataAdapter(Dependents);
    var editableCheck = function(row, datafield, columntype, value) {
                          if (row == 0) {
                             return false;
                          }
                        }
    $('#dependentsGrid').jqxGrid(
      { height: (data.length + 2) * 25,
        width: 760,
        theme: 'energyblue',
        source: dataAdapter,
        editable: true,
        altrows: true,
        selectionmode: 'singlecell',
        editmode: 'selectedcell',
        disabled: false,
        columns: [ { text: 'Relationship', datafield: 'a', columntype: 'textbox', width: 90, align: 'left', cellsalign: 'left', editable: false, pinned: true },
                   { text: 'Last Name', datafield: 'b', columntype: 'textbox', width: 230, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck, pinned: true },
                   { text: 'First Name', datafield: 'c', columntype: 'textbox', width: 170, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck, pinned: true },
                   { text: 'Sex', datafield: 'd', columntype: 'dropdownlist', width: 70, align: 'center', cellsalign: 'left', cellbeginedit: editableCheck,
                     createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                     var dataSource = [ '', 'Male', 'Female' ];
                                     editor.jqxDropDownList({ autoDropDownHeight: true, source: dataSource });
                                   }
                   },
                   { text: 'Birth Date', datafield: 'e', columntype: 'datetimeinput', width: 100, align: 'center', cellsalign: 'left', cellsformat: 'yyyy-MM-dd', cellbeginedit: editableCheck },
                   { text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
                     cellsrenderer: function(row, columnfield, cellvalue, defaulthtml, columnproperties) {
                                      //console.log('cellsrenderer - cellvalue = "' + cellvalue + '", defaulthtml = "' + defaulthtml + '"');
                                      if (cellvalue == stringOf(9, '0') || cellvalue == stringOf(7, '0') || cellvalue.substr(0, 9) == '000-00-00') {
                                         return '';
                                      } else {
                                         var parts = defaulthtml.split('>'),
                                             subparts = parts[1].split('<'),
                                             w = cellvalue;
                                         if (w.indexOf('-') == -1) {
                                            w = w.substr(0, 3) + '-' + w.substr(3, 2) + '-' + w.substr(5, 4);
                                         }
                                         return parts[0] + '>' + w + '<' + subparts[1] + '>';
                                      }
                                    },
                     createeditor: function(row, cellvalue, editor, cellText, width, height) {
                                     //console.log('createeditor - cellvalue = "' + cellvalue + '", cellText = "' + cellText + '"');
                                     var inputElement = $('<input/>').prependTo(editor);
                                     inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                                   },
                     initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                                   //console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
                                   var inputField = editor.find('input');
                                   //console.log(inputField);
                                   if (pressedkey) {
                                      inputField.val(pressedkey);
                                      //inputField.jqxMaskedInput('selectLast');
                                   } else {
                                      inputField.val(cellvalue);
                                      //inputField.jqxMaskedInput('selectAll');
                                   }
                                 },
                     geteditorvalue: function(row, cellvalue, editor) {
                                       //console.log('geteditorvalue - cellvalue = "' + cellvalue + '"');
                                       return editor.find('input').val();
                                     }
                   }
                 ]
    });
  }
  // Create a JavaScript Date item (or null) from a passed ISO-8601/RFC-3339 date value
  function createJSDate(dateValue) {
    if (dateValue.length != 8 || dateValue == '00000000') {
       return null;
    }
    return new Date(parseInt(dateValue.substr(0, 4)), (parseInt(dateValue.substr(4, 2)) - 1), parseInt(dateValue.substr(6)));
  }
  // Create a string of repeated characters  (from StackOverflow.com user disfated)
  function stringOf(count, chr) {
    if (count < 1) return '';
    var x = '';
    while (count > 1) {
          if (count & 1) x += chr;
          count >>= 1;
          chr += chr;
    }
    return x + chr;
  }
</script>

<fieldset style='position: relative; width: 770px;'>
  <legend>Dependents</legend>
  <div id='dependentsGrid'></div>
</fieldset>

[Craig MatthewsParticipant]

Hi Peter Stoev,

I realize I have a custom cellsrenderer, so what I see should be the result of my code.

However, it is not.

I modified cellsrenderer as follows:

initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
               console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
               var inputField = editor.find('input');
               console.log(inputField);
               if (pressedkey) {
                  inputField.val(pressedkey);
               } else {
                  inputField.val(cellvalue);
               }
             }

When the above code is executed, I get the following in the console window:
initeditor – cellvalue = “000000000”, celltext = “000000000”

As you can see from this, a value of nine zeroes is being passed.

The console.log(inputField) produced this in the console window:
+ Object[input#jqxWidget3e73b777.jqx-input.jqx-input-energyblue.jqx-rc-all.jqx-rc-all-energyblue.jqx-widget.jqx-widget-energyblue.jqx-widget-content.jqx-widget-content-energyblue.jqx-reset.jqx-reset-energyblue.jqx-input-content.jqx-input-content-energyblue property value = “123-45-6789” attribute value = “null”]

After clicking on the ‘+’ in front of “Object”, I was able to copy the following from the console window:
+ 0 input#jqxWidget3e73b777.jqx-input.jqx-input-energyblue.jqx-rc-all.jqx-rc-all-energyblue.jqx-widget.jqx-widget-energyblue.jqx-widget-content.jqx-widget-content-energyblue.jqx-reset.jqx-reset-energyblue.jqx-input-content.jqx-input-content-energyblue property value = “000-00-0089” attribute value = “null”

The cell is ready to edit, and already contains 000-00-0089. After clicking on “Inspect element” and clicking on this cell, I copied this from the console window:
<input id=”jqxWidget3e73b777″ role=”textbox” data-role=”input” aria-valuenow=”000-00-0089″ aria-disabled=”false” aria-multiline=”false” aria-readonly=”false” class=”jqx-input jqx-input-energyblue jqx-rc-all jqx-rc-all-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-reset jqx-reset-energyblue jqx-input-content jqx-input-content-energyblue” autocomplete=”off” autocorrect=”off” autocapitalize=”off” spellcheck=”false” style=”text-align: left; height: 24px; width: 99px;”>

I have nothing in my code that passes the 000-00-0089 value, and the cell above that had just been edited contains 123-45-6789.

So, where does the “89” come from?

The only other clue I can provide is that the mask is 11 characters long (###-##-####) and the data being passed is 9 characters (000000000), the difference being 2 which is the length of the “89”.

I really need some assistance with this. It looks very unprofessional to have incorrect data appear on the screen, even if it can be changed.

Thank you.

[Craig MatthewsParticipant]

Greetings.

I am still unable to get the jqxMaskedInput with the jqxGrid to work properly.

As you can see from my last two posts, there are unentered characters appearing within the cell and I know I am not putting them there.

Can someone please have a look and tell me what I am doing wrong?

Or provide a jqxMaskedInput within jqxGrid specific example to follow?

Thank you.

[Craig MatthewsParticipant]

Hi Peter Stoev,

Can you think of a place where that “89” could be coming from?

I dumped what looked like the relevant variables, and I am not putting the “89” into the grid for that cell.

After further testing, if I put 987654321 in the FICA Number cell, it shows correctly as 987-65-4321.

When I edit the cell in the row below, it starts out as 000-00-0021.

For some reason, the end of the cell value from the row above is being used in the current row.

What could cause this?

What am I missing?

Thank you.

[Craig MatthewsParticipant]

Hi Peter Stoev,

Is there a way to get selectLast and selectAll functionality in jqxMaskedInput?

Also, the problem with the jqxMaskedInput in the grid is more complicated now. I added some console.log to display some values.

The involved code in the jqxGrid columns for this column is now:

{ text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
  cellsrenderer: function(row, columnfield, cellvalue, defaulthtml, columnproperties) {
                   console.log('cellsrenderer - cellvalue = "' + cellvalue + '", defaulthtml = "' + defaulthtml + '"');
                   if (cellvalue == stringOf(9, '0')) {
                      return '';
                   } else {
                      if (cellvalue.indexOf('-') > -1) {
                         return cellvalue;
                      } else {
                         return cellvalue.substr(0, 3) + '-' + cellvalue.substr(3, 2) + '-' + cellvalue.substr(5, 4);
                      }
                   }
                 },
  createeditor: function(row, cellvalue, editor, cellText, width, height) {
                  console.log('createeditor - cellvalue = "' + cellvalue + '", cellText = "' + cellText + '"');
                  var inputElement = $('<input/>').prependTo(editor);
                  inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                },
  initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
                var inputField = editor.find('input');
                if (pressedkey) {
                   inputField.val(pressedkey);
                } else {
                   inputField.val(cellvalue);
                }
              },
  geteditorvalue: function(row, cellvalue, editor) {
                    console.log('geteditorvalue - cellvalue = "' + cellvalue + '"');
                    return editor.find('input').val();
                  }
},

—–
Upon loading the grid from existing data, the console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
(11)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
When I set the grid editable=true, the console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
(11)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
createeditor – cellvalue = “000000000”, cellText = “000000000”
T?id=01001010000 (line 688)
initeditor – cellvalue = “000000000”, celltext = “000000000”
T?id=01001010000 (line 693)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”

—–
After double-clicking on the 2nd row FICA Number column, the cell displays 000-00-0000
After entering 123456789 and pressing tab, the cell contains 123-45-6789
The console.log output is:
geteditorvalue – cellvalue = “000000000”
T?id=01001010000 (line 704)
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
So far, so good, however after double-clicking on the 3rd row FICA Number column and before entering anything the cell displays 000-00-0089

The console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
initeditor – cellvalue = “000000000”, celltext = “000000000”
T?id=01001010000 (line 693)
(9)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
All of the empty FICA Number column cells contain 000000000.
Where is the “89” coning from? I can’t find it in any of the console.log displays.

Thank you.

[Craig MatthewsParticipant]

After examining the referenced demo code, I worked up what I thought would be the appropriate changes.

Here is the relevant section of the jqxGrid columns definition:

                   { text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
                     createeditor: function(row, cellvalue, editor, cellText, width, height) {
                                     var inputElement = $('<input/>').prependTo(editor);
                                     inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                                   },
                     initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                                   var inputField = editor.find('input');
                                   if (pressedkey) {
                                      inputField.val(pressedkey);
                                      inputField.jqxMaskedInput('selectLast');
                                   } else {
                                      inputField.val(cellvalue);
                                      inputField.jqxMaskedInput('selectAll');
                                   }
                                 },
                     geteditorvalue: function(row, cellvalue, editor) {
                                       return editor.find('input').val();
                                     }
                   },

Unfortunately, what I got back in the console.log window was:
uncaught exception: jqxCore: Invalid parameter ‘[selectAll]’ does not exist.
uncaught exception: jqxCore: Invalid parameter ‘[selectLast]’ does not exist.
every time I double-clicked on the cell.

What am I missing?

Thank you.

[Craig MatthewsParticipant]

Hello Vladimir,

Thank you very much.

[Craig MatthewsParticipant]

Hi Peter Stoev,

I posted in this forum as I wasn’t sure where to post it, since this is not just related to jqxInput. It also happens with jqxMaskedInput and jqxNumberInput. It may apply to any of the input widgets.

I don’t understand your

For now, you can use “removeClass” jquery function to remove unnecessary CSS classes if necessary.

I was looking for a workaround like maybe jqxToolTip.

[Craig MatthewsParticipant]

Hi Peter Stoev,

The root problem was that the accept attribute does not work in Firefox, and I was using Firefox. It works properly in Chrome.

Thank you.

[Craig MatthewsParticipant]

What is not clear is that the documentation says that file extensions are acceptable, but the example uses the “IANA Media Types” codes and I am looking for an example that shows specifying (multiple) file extensions, because, as I indicated I cannot get that to work.

Thank you.

[Craig MatthewsParticipant]

Hi Peter Stoev,

I tried the example from the jqxFileUpload documentation under the accept property.

accept: ‘image/*,audio/*’
returns all images and audio files.

accept: ‘jpg,pdf’
accept: ‘.jpg,.pdf’
accept: ‘*.jpg,*.pdf’
all return all files.

The INPUT with type “file” accept refers to the “IANA Media Types”, whereas your documentation states that jqxFileUpload accepts those and “any file extension, for example: ‘.gif’, ‘.jpg’, ‘.png’, ‘.doc’, etc.”.

I cannot find “IANA Media Types” for the types of files I want to allow to be uploaded.

So, I am asking how to specify the acceptable file extensions.

I realize that I can intercept the request and not allow an extension that I do not want to allow to be uploaded. but it would certainly look more professional if I simply did not allow the selection of non-allowed file types in the first place.

Thank you.

[Author]

Posts