jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

File upload problem

Tags: file upload undefined

28/12/2013
23:41

KDA

New Member

Members

Forum Posts: 1

Member Since:
29/12/2013

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
21 Guest(s)

Currently Browsing this Page:
1 Guest(s)