Forum Replies Created

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts

  • SJ
    Participant

    Hi dimitar,

    I am able to figured it out. It was problem in my code caused by jQuery bubble events. I have resolved it.

    Thank you for your time and patience.

    Shweta


    SJ
    Participant

    Hi Dimitar,

    in jsp page, i have below:
    <div id=”jqxFileUpload” class=”windowDiv”></div>

    <div style=”float: left; margin-left: 50px;”>
    <div>Events log:</div>
    <div id=”eventsPanel”></div>
    </div>

    Thanks,
    Shweta


    SJ
    Participant

    Hi Dimitar,

    Sorry for the late response. I have upgraded with the latest version 6.0.5 and used the jqxfileupload feature outside the jqxwindow, the problem is still coming ie. all the upload events call twice. :-(.

    Please HELP!

    var token = $("input[name='_csrf']").val();
    			var header = "_csrf";
    			var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;
    
    			$('#jqxFileUpload').jqxFileUpload({
    				width : 300,
    				theme : 'bootstrap',
    				browseTemplate : 'default',
    				uploadTemplate : 'default',
    				cancelTemplate : 'default',
    				accept : '.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip',
    				fileInputName : 'fileInput',
    				uploadUrl : uu
    
    			});
    
    			$('#eventsPanel').jqxPanel({
    				width : 300,
    				height : 150,
    				theme : 'bootstrap',
    			});
    		}
    
    	});
    
    ----
    Click a button to open window:
    if (!uploadViewDatButton.jqxButton('disabled')) 
    {
      $("#uploadDatViewWindow").jqxWindow('open');
      $('#eventsPanel').jqxPanel('clearcontent');
    }
    -------
    Server side code:
    
    	@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
    	public @ResponseBody String uploadFile(HttpServletRequest request, @RequestParam("fileInput") MultipartFile fileInput, @RequestParam String selectedProjectId, @RequestParam String libName) {
    
    		if (!fileInput.isEmpty()) {
    			try {
    				byte[] bytes = fileInput.getBytes();
    
    				// Creating the directory to store file
    
    				File dir = new File("\\\\sas-vm\\" + selectedProjectId + "\\Data\\" + libName + File.separator + "other");
    				if (!dir.exists())
    					dir.mkdirs();
    
    				// Create the file on server
    				File serverFile = new File(dir.getAbsolutePath() + File.separator + fileInput.getOriginalFilename());
    				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
    				stream.write(bytes);
    				stream.close();
    
    				logger.info("Server File Location=" + serverFile.getAbsolutePath());
    
    				return fileInput.getOriginalFilename() + " :Successfully uploaded ";
    			} catch (Exception e) {
    				return fileInput.getOriginalFilename() + ": Failed to upload! " + e.getMessage();
    			}
    		} else {
    			return fileInput.getName() + ": Empty file, Failed to upload! ";
    		}
    	}

    SJ
    Participant

    Hi Dimitar,

    Please see my comments:

    Thanks,

  • What version of jQWidgets are you using? [Shweta:- jQWidgets v4.1.2 (2016-Apr). This is licensed version.]
    What browser does the issue occur in?[Shweta in all the browsers.]
    Is (was) there a configuration (on your side) that did not cause the issue and are there other jqxFileUploads in your project that upload files as expected?
    Are you sure you have made a correct use of the fileInputName property? Here is its description from the API documentation: Sets or gets the name attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property. This name is applied to the file input of the file about to be uploaded and after the upload the name attribute is removed so that it can be set to the next hidden file input (if any). As a result, there is only one file input with this name attribute at a time.
    [Shweta: this error is coming when i opened the jqxwindow where it has jqxfileupload feature. please see the code]
  • 
    
    $("#uploadDatViewWindow").jqxWindow({
    		height : 400,
    		width : 400,
    		theme : 'bootstrap',
    		resizable : false,
    		isModal : true,
    		autoOpen : false,
    		initContent : function() {
    			var token = $("input[name='_csrf']").val();
    			var header = "_csrf";
    			var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;
    
    			$('#jqxFileUpload').jqxFileUpload({
    				width : 300,
    				theme : 'bootstrap',
    				browseTemplate : 'default',
    				uploadTemplate : 'default',
    				cancelTemplate : 'default',
    				accept : '.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip',
    				fileInputName : 'fileInput',
    				uploadUrl : uu
    
    			});
    
    			$('#eventsPanel').jqxPanel({
    				width : 300,
    				height : 150,
    				theme : 'bootstrap',
    			});
    		}
    
    	});
    
    ----
    Click a button to open window:
    if (!uploadViewDatButton.jqxButton('disabled')) 
    {
      $("#uploadDatViewWindow").jqxWindow('open');
      $('#eventsPanel').jqxPanel('clearcontent');
    }
    -------
    Server side code:
    
    	@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
    	public @ResponseBody String uploadFile(HttpServletRequest request, @RequestParam("fileInput") MultipartFile fileInput, @RequestParam String selectedProjectId, @RequestParam String libName) {
    
    		if (!fileInput.isEmpty()) {
    			try {
    				byte[] bytes = fileInput.getBytes();
    
    				// Creating the directory to store file
    
    				File dir = new File("\\\\sas-vm\\" + selectedProjectId + "\\Data\\" + libName + File.separator + "other");
    				if (!dir.exists())
    					dir.mkdirs();
    
    				// Create the file on server
    				File serverFile = new File(dir.getAbsolutePath() + File.separator + fileInput.getOriginalFilename());
    				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
    				stream.write(bytes);
    				stream.close();
    
    				logger.info("Server File Location=" + serverFile.getAbsolutePath());
    
    				return fileInput.getOriginalFilename() + " :Successfully uploaded ";
    			} catch (Exception e) {
    				return fileInput.getOriginalFilename() + ": Failed to upload! " + e.getMessage();
    			}
    		} else {
    			return fileInput.getName() + ": Empty file, Failed to upload! ";
    		}
    	}
    
    

SJ
Participant

Hi Dimitar,

I have handled the csrf issue but i am getting this exception and because of this issue all the upload events call twice.
Please let me know where i need to set the fileName value.

Uncaught TypeError: Cannot read property 'fileName' of undefined
    at HTMLIFrameElement.<anonymous> (jqxfileupload.js:formatted:703)
    at HTMLIFrameElement.dispatch (jquery-1.11.1.js:4641)
    at HTMLIFrameElement.elemData.handle (jquery-1.11.1.js:4309)
var token = $("input[name='_csrf']").val();
var header = "_csrf";
var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;

$(‘#jqxFileUpload’).jqxFileUpload({
width : 300,
theme : ‘bootstrap’,
browseTemplate : ‘default’,
uploadTemplate : ‘default’,
cancelTemplate : ‘default’,
accept : ‘.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip’,
fileInputName : ‘fileInput’,
uploadUrl : uu
});

Thanks,
Shweta


SJ
Participant

Well the example doesn’t solve the problem. But allowDrop:false solved the problem.


SJ
Participant

Thank you Hristro! it works!


SJ
Participant

Hi Hristo,

Finally i am able to populate the table but still unable to load dynamic columns. when i hard code the columns, it works but not the dynamic way.
Please suggest!
Thanks,
SJ
json:
readDatViewFilejsonArray{
“columns”: [{
“datafield”: “PATCD”,
“text”: “PATCD”,
“width”: 100
},
{
“datafield”: “AETERM”,
“text”: “AETERM”,
“width”: 100
},
{
“datafield”: “AEBODSYS”,
“text”: “AEBODSYS”,
“width”: 220
}],
“rows”: [{
“PATCD”: “0”,
“AETERM”: “0001”,
“AEBODSYS”: “1”
},
{
“PATCD”: “1”,
“AETERM”: “0002”,
“AEBODSYS”: “2”
},
{
“PATCD”: “0”,
“AETERM”: “0004”,
“AEBODSYS”: “1”
}]
}


Code:

var source = {
dataType : “json”,
url : “readDatViewFile.do”
};
var columns;

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;
return data.rows;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
},
beforeLoadComplete : function(records, original) {
columns = original.columns;
return original.rows;
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,//not work:dynamic
columns : [ {//worked
text : ‘PATCD’,
dataField : ‘PATCD’,
width : 100,
filterable : false,
editable : false
}, {
text : ‘AETERM’,
dataField : ‘AETERM’,
width : 100,
editable : false
} ],

pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});


SJ
Participant

Thank you Hristo for quick reply.

I followed as you suggested but in dataAdapter , datafield is empty (i saw in debug mode) thats the reason my table is empty. Please correct me where I am wrong.

Note:- Columns and datafield are generated dynamically. I dont know how many columns, rows and dataField will be there in my dynamic datatable. In other words, datatable is generated on fly with serverPRocessing so when user will do sorting, filtering it will hit the server to get more data.

Please help!
Thanks,

var datafields = new Array();
source = {
dataType : “json”,
datafields : datafields,
url : “readDatViewFile.do”,
beforeprocessing : function(data) {
columns = obj.columns;
rows = obj.rows;
for (var i = 0; i < columns.length; i++) {
datafields.push({
name : columns[i].datafield
});
}
}

};

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;

return data;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,
pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

in reply to: toolbar toolbar #89993

SJ
Participant

Thank you

in reply to: toolbar toolbar #89970

SJ
Participant

Thank you Hristo!

I need to make the button enable/disable based on the row level permission and my permission code is outside the renderToolbar function.
when the user change the row, i refreshed the grid with the new data rather than create the grid again. so i need to make the toolbar buttonss enable/disable.

Are you suggesting me to add the id like below:

var editButton = $(<div id=”editButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var hideButton = $(<div id=”hideButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var deleteButton = $(<div id=”deleteButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var historyButton = $(<div id=”historyButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);

Please let me know , if you have any other suggestion.

Thank you very much!


SJ
Participant

Hi
I have added a boolean variable to check if the dropdownlisted is loaded or not. So this way I have achieved the thing I want, but not sure is that a correct way. Please let me know, if there is any other way. Thank you for your help.
Thanks

addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
var isDropdownLoaded=false;
$(‘#sectionDropDown’).on(‘open’, function (event) {
if(!isDropdownLoaded){
var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
isDropdownLoaded=true;
}
});

$(“#teamPermwindow”).jqxWindow(‘open’);
}
});


SJ
Participant

Hi Nadezhda,

Thanks for replying. I added the coded in “open” event as you suggested, its calling the database everytime when the dropdown expanded or open (as event suggested).I don’t want to call the database every time , it makes the event slow and not able to select the value from the dropdown or may be I am doing something wrong in the below code. Could you please have a look and help me to get the correct value in dropdown list from the database, not to call everytime the database.

addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
$(‘#sectionDropDown’).on(‘open’, function (event) {

var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
});

$(“#teamPermwindow”).jqxWindow(‘open’);
}
});

Thanks,
SJ


SJ
Participant

Hi,

Looks like it solved my modal problem but generate another issue. Now my dynamic dropDown content is not executing. First time the sectionDropDown is getting the data from the backend or populating correctly but next time is not calling to the server. ie. getSectionName() is not executing or not getting the data it shows the old information.
I can see initContent() initialize first time, is there any way to refresh the dropdown list or call again and get the fresh records from the backend.

Thank you in advance.

$(“#teamPermwindow”).jqxWindow({ maxHeight: 350, maxWidth: 600, minHeight: 30, minWidth: 250,height: 250, width: 500, theme: ‘summer’, resizable:false, isModal: true, autoOpen: false,
initContent: function () {
var permissionlist = [“Read”, “Write”, “No Access”];
$(“#permissionDropDown”).jqxDropDownList({ source: permissionlist, selectedIndex: 0, autoDropDownHeight: true});

var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});

}
});

Thanks,
SJ


SJ
Participant

Thank you. its working now.

Viewing 15 posts - 1 through 15 (of 24 total)