KDA on File upload problem

Sat, 28 Dec 2013 23:41:16 +0200

Hi,

I've been using jqgrid to manage data in my database quite successfully, but now I need to add a 'file' field.

If I set the field as 'required', then I'm getting a Javascript error when I 'save' a new record:

Error: TypeError: val is undefined
Source File: https://lopc-dev-0831/LOPCapp/js/jquery/jqGrid/js/jquery.jqGrid.src.js
Line: 6281

(I'm using version 4.5.4)

This is in the function isEmpty - which makes sense.

Tracing back the stack, this is called from

checkValues (line 6329)

saveRow (line 9395)

jqGrid (line 747)

onClickButton (line 9799)

If I don't mark the field as 'required' I get data posted back to my php server app, but the element in the $_POST variable that I would expect to contain the name of the file (so I can then use the AjaxUploader as explained elsewhere) is not defined either.

I'm seeing similar behaviour from both inline editting and form editting.

The source of my page is below. It's the field modFilename that's giving the problem.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LOPC Data Management - View data</title>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" /><link rel="stylesheet" type="text/css" href="../style/LOPC.css?v=650432440" />
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui.custom.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../style/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="../js/jquery/jqGrid/css/ui.jqgrid.css" />
<style>
.ui-jqgrid,
.ui-jqgrid .ui-jqgrid-view,
.ui-jqgrid .ui-jqgrid-pager,
.ui-jqgrid .ui-pg-input {
    font-size: 12px;
}
</style>
</head>
<body >
<span class="Header">User-defined Modules</span><br/>
<script src="../js/jquery/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery/jqGrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<table id="LOPCgridtable">
</table>
<div id="LOPCgridnavbar" width="200%">
</div>
<script type="text/javascript">
$(document).ready(function(){
var lastsel = -1;
var fileuploadfield = "modFilename";
function afterEdit(id, result) {
    if (result.responseText.substring(0,3) != '## ') {
        alert('Update successful: ' + result.responseText);
        if (fileuploadfield != '') {
            alert('Need to upload file for field ' + fileuploadfield);
        }
       $("#LOPCgridtable").trigger("reloadGrid");
    } else {
        alert('Update failed: ' + result.responseText);
    }
}
$("#LOPCgridtable").jqGrid({
   datatype: "xml",
   url: "/LOPCapp/data/displaylist.php",
   mtype: "POST",
   postData: {table: "tblModule"},
   colNames: ["Name", "Filename", "Actions"],
   colModel: [{name: "modName", index: "modName", editable: true, edittype: 'text', editrules: {required: true}, editoptions: {maxlength: 50}}
, {name: "modFilename", index: "modFilename", editable: true, hidden: false, width: 200, align: 'left', edittype: 'file', editoptions: {enctype: "multipart/form-data"}, editrules: {required: true, edithidden: false}}
, {name: "Actions", width: "100%"}],
   pager: "#LOPCgridnavbar",
   rowNum: 20,
   rowList: [10,20,30,50,100],
   altrows: true,
   viewrecords: true,
   caption: "",
    shrinktofit: true,
   height: "auto",
    onSelectRow: function(id) {
        if (id && id !== lastsel && lastsel != -1) $("LOPCgridtable").restoreRow(lastsel);
        $("#LOPCgridtable_ilsave").removeClass('ui-state-disabled');        $("#LOPCgridtable").editRow(id, true, null, null, "/LOPCapp/data/displaylist.php", {table: 'tblModule'}, afterEdit, null, null);
        lastsel = id;
        },
    editurl: "/LOPCapp/data/displaylist.php",
    editData: {table: "tblModule"}
});
$("#LOPCgridtable").navGrid("#LOPCgridnavbar",
    {view: false, edit: false, add: false, del: true, search: false, refresh: true},
    {},
    {},
    { delData:
       {table: "tblModule"},
      afterSubmit: function (result, postdata) {
        if (result.responseText.substring(0,3) != '## ') {
            alert(result.responseText);
            $("#LOPCgridtable").trigger("reloadGrid");
        } else {
            alert('Deletion failed: ' + result.responseText);
        }
        return [true]      }
    }
);
$("#LOPCgridtable").inlineNav("#LOPCgridnavbar",
    {view: false, edit: true, add: true, del: true,
      editParams: { extraparam: {table: "tblModule"}, aftersavefunc: afterEdit},
      addParams: { addRowParams: {extraparam: {table: "tblModule"}, aftersavefunc: afterEdit}}
    });
$("#LOPCgridtable").gridResize ({minWidth: 900});
});
</script>
</body>
</html>

Thanks for any help you can provide to solve this problem - which is really annoying me!

Kevin

jQuery Grid Plugin - jqGrid - Topic: File upload problem

KDA on File upload problem