jQuery Grid Plugin - jqGrid

hi my friend,

A little more information about my code.

Full code

$("#list").jqGrid({

url:'queryEnlacesW.php',

datatype: 'xml',

mtype: 'POST',

colNames:['ID','URL Imagen','URL'],

colModel :[

{name:'idEnlaceweb', index:'idEnlaceweb', width:80,editable:false},

{name:'fileToUpload', index:'fileToUpload', width:300, editable:true,edittype:'file',editoptions:{size:40},editrules:{required:true}},

{name:'url', index:'url', width:250, editable:true,editoptions:{size:40},editrules:{required:true /*,url:true*/}},

],

pager: '#pager',

rowNum:10,

rowList:[10,20,30],

sortname: 'idEnlaceweb',

sortorder: 'desc',

viewrecords: true,

caption: 'Módulo de Enlaces Web',

width:700,

height:300,

editurl:"server.php",

});

$("#list").navGrid('#pager',{

view:true,

del:true,

add:true,

edit:true,

refresh:true,

},

prmEdit = {

width:400,

height:'100%',

},

prmAdd = {

width:400,

height:'100%',

beforeSubmit:function(postdata, formid)

{

$(formid).attr("method","POST");

$(formid).attr("action","");

$(formid).attr("enctype","multipart/form-data");

var complete=false;

var message="";

var namefile="";

$.ajaxFileUpload({

url:'../ajaxfileupload1.0/doajaxfileupload.php',

secureuri:false,

fileElementId:'fileToUpload',

dataType: 'json',

success: function (data, status) {

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

//alert(data.error);

message=data.error;

}else{

$("#fileToUpload").val("");

complete=true;

message=data.msg;

namefile=message;

newurl='server.php?nameFile='+namefile;

$("#list").setGridParam({editurl:newurl});

}

}

},

error: function (data, status, e)

{

complete=false;

message=e;

}

});//PROBLEM ;(

return [complete,message];

},

afterSubmit: function (response, postdata)

{

//alert(postdata.url);

var success=true;

var message="";

var json=response.responseText; //obtengo el json ;D

var result=$.parseJSON(json);//vuelvo el json en otro json valido

if(result.query==true){

alert("Se ejecuto todo correctamente");

}

else{

message="Hubo un error en el servidor:"+result.query;

success=false;

}

return [success,message];

}

},

prmDel = {},

prmSearch = {multipleSearch:false},

prmView = {}

);

This code works perfect, but if the plugin is first run ajaxfileupload. The problem I have in the beforeSubmit is that this does not expect to finish the ajaxfileupload. Then the function returns the result first, before running the ajaxfileupload.

One solution is that the ajax call should be synchronous, but this plugin does not.

Another possible solution is that there is another way to return. (?) :DDD

Thank you,

Regards

Sergio

Thanks oleg, I've resolved.

thank you very much for the help.

Regards

Sergio 

hi handelcamilo,

To solve the problem I did this.

1) use the formatter module to create a button that allows me to upload the file.

function uploadButton(cellvalue, opts, rowObject) {

/*

opts - a set of options containing

rowId - the id of the row

colModel - the colModel for this column

rowData - the data for this row

//*/

rowId=opts.rowId;

input="<input style='height:22px;width:20px;' type='button' value='...' onclick=uploadfile("+rowId+"); />";

return cellvalue+input;

}

2) in the colmodel describe the uploadButton function. 

{name:'fileToUpload', index:'fileToUpload', width:300, editable:false,edittype:'file',editoptions:{size:40},editrules:{required:true}, formatter:uploadButton}

3) uploadfile function

$( "#formupload" ).hide();

uploadfile=function(rowId){

$("#fileToUpload").val("");

$( "#formupload" ).dialog({

autoOpen: false,

height: 110,

width: 280,

modal: true,

buttons: {

"Subir": function() {

value=$("#fileToUpload").val();

//SI DA CLICK EN SUBIR PROCEDO A SUBIR EL ARCHIVO MEDIANTE EL PLUGIN

$.ajaxFileUpload({

url:'../ajaxfileupload1.0/doajaxfileupload.php',

secureuri:false,

fileElementId:'fileToUpload',

dataType: 'json',

path:'../../images/originales/',

success: function (data, status) { 

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

message=data.error;

alert(message);

}else{

message=data.msg;

namefile=message;

$("#formupload").dialog( "close" );

//ACTUALIZO LA CELL, 1 ES EL NUMERO DE LA COLUMNA, SI LA COLUMNA PARA SUBIR ARCHIVOS ES OTRA DEBES CAMBIAR

$('#list').setCell(rowId,1,"images/thumbnails/enlacesweb/"+namefile); //READ READ

} 

}

},

error: function (data, status, e)

{

complete=false;

message=e;

alert(e);

}

});//TERMINA AJAX FILE UPLOAD

},

Cancel: function() {

$( this ).dialog( "close" );

}

}

});

$("#formupload").dialog( "open" );//ABRO LA VENTANA

}

5) HTML

<form id="formupload" enctype="multipart/form-data" name="formupload" method="post" action="" title="Subir Imagen para Enlace Web">

<input id="fileToUpload" name="fileToUpload" type="file" size="40" value="" /> 

</form>

6) SCRIPTS

<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>

<script src="../js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>

<script src="../js/i18n/grid.locale-es.js" type="text/javascript"></script>

<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../ajaxfileupload1.0/ajaxfileupload.js" type="text/javascript"></script>

That is the code, what to do. If for some reason you could not do it, then send me an email.

The other option is to contact me by email and I of the plugin that I modified to be more optimistic and to work with this code.

The ajaxfileupload download link: http://www.phpletter.com/Our-Projects/AjaxFileUpload/