jQWidgets Forums

jQuery UI Widgets › Forums › Grid › reload jqgrid on submit button

This topic contains 2 replies, has 2 voices, and was last updated by  ae50042 8 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    reload jqgrid on submit button Posts
  • September 19, 2016 at 10:09 pm reload jqgrid on submit button #87506

    ae50042
    Participant

    Hi guys,

    I’m trying to do a very simple window with two datetime picker, a submit button and a grid, basically I have would like to reload the grid with the new datetime values everytime I press the submit button. When I press the button I receive the message:

    TypeError: jQuery(...).jqGrid is not a function 
jQuery("#jqxgrid").jqGrid("setGridParam", {datatype: "json"})

    Questions are:

    1 – Googling I read that depends on the scripts import order, but it’s seems ok, can you tell more about this?
    2 – Should I define first the grid and then populate it with fresh data each time the submit button is pressed? If so, could you post code about it?

    P.S. I’m not very expert, any suggestion about the code will be appreciated.

    This is the main part of the code:

    Html:

    <!DOCTYPE html>
<html lang="it-it" dir="ltr" xml:lang="it-it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<base href="http://localhost/JOOMLA/index.php/it/tabella-dati">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="Super User" name="author">
<meta content="Sito per Steiel per la configurazione e gestione dei dispositivi RW14" name="description">
<meta content="Joomla! - Open Source Content Management" name="generator">
<title>Tabella Dati</title>
<link rel="canonical" href="http://localhost/JOOMLA/index.php/it/tabella-dati?id_dispositivo=16&nome_dispositivo=s15_007">
<link type="image/vnd.microsoft.icon" rel="shortcut icon" href="/JOOMLA/templates/protostar/favicon.ico">
<link type="text/css" href="/JOOMLA/media/system/css/jqx.base.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/media/system/css/jqx.orange.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/templates/protostar/css/template_blue.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/media/mod_languages/css/template.css" rel="stylesheet">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery.min.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery-noconflict.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery-migrate.min.js">
<script type="text/javascript" src="/JOOMLA/media/system/js/caption.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcore.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.sort.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.pager.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.selection.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.edit.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdatetimeinput.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcalendar.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxtooltip.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxbuttons.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/globalization/globalize.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdata.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxmenu.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcheckbox.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxlistbox.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdropdownlist.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxinput.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxscrollbar.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxwindow.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxtabs.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxchart.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxchart.rangeselector.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdata.export.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.export.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/bootstrap.min.js">
<script type="text/javascript" src="/JOOMLA/templates/protostar/js/template.js">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
</head>
.... //jqGrid and other stuff definition
</html>

    Javascript:

    jQuery(document).ready(function() {

	lang = jQuery("#lang").val();

	jQuery.get("../../media/system/labels_inth/lang.php", {
		"lang" : lang,
		"mode" : 2
	}, 
	function(data, success) {
		labels = JSON.parse(data);
		main_function();
	});

});

function main_function() {
    createGrid();
    jQuery("#jqxButton_submit").on('click', function() {
          jQuery("#jqxgrid").jqGrid("setGridParam", {datatype: "json"}).trigger("reloadGrid", [{current: true}]);
    });
};

function createGrid(){
	var dataFields = [
	                  { name: 'utc', map:'can>utc', type:'date'},
	                  { name: 'local', map:'can>local', type:'date'},
	                  { name: 'ch01', map:'can>ch01'},
	                  { name: 'ch02', map:'can>ch02'},
	                  { name: 'ch03', map:'can>ch03'},
	                  { name: 'ch04', map:'can>ch04'},
	                  { name: 'ch05', map:'can>ch05'},
	                  { name: 'ch06', map:'can>ch06'},
	                  { name: 'al01', map:'can>al01'},
	                  { name: 'al02', map:'can>al02'},
	                  { name: 'al03', map:'can>al03'},
	                  { name: 'al04', map:'can>al04'},
	                  { name: 'al05', map:'can>al05'},
	                  { name: 'al06', map:'can>al06'}
	                  ];
	                  
	var data_da = jQuery("#jqxDaData").jqxDateTimeInput("value");
	var data_a = jQuery("#jqxAData").jqxDateTimeInput("value");
	var da_def = data_da.getFullYear() + "-" + (data_da.getMonth() + 1 ) + "-" + data_da.getDate() + " 00:00:00";
	var a_def = data_a.getFullYear() + "-" + (data_a.getMonth() + 1) + "-" + data_a.getDate() + " 23:59:59";
	var id_face = jQuery("#jqxDDLiface").jqxDropDownList("getSelectedItem").originalItem.id;
	var url_get_new = url_get + "?iface=" + id_face + "&id_disp=" + id_dispositivo + "&a=" + a_def + "&da=" + da_def + "&type_date=" + type_date;

	jQuery.get(url_get, {
		"type" : "columns_series",
		"iface" : id_face,
		"id_disp" : id_dispositivo,
		"a" : a_def,
		"da" : da_def
	})
	.done(function(data) {
		var phpColumns = JSON.parse(data).columns;
		var phpSeries = JSON.parse(data).seriesGroup;

		var source = {
			datatype : "json",
			datafields : dataFields,
			id : 'Data',
			url : url_get_new,
			root : 'dati',
			updaterow: function (rowid, rowdata, commit) {
				var year = rowdata.local.getFullYear();
				var month = rowdata.local.getMonth() + 1;
				var day = rowdata.local.getDate();
				var hours = rowdata.local.getHours();
				var minutes=rowdata.local.getMinutes();
				var seconds = rowdata.local.getSeconds();
				var date = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds ;
                                jQuery.ajax({
                                      dataType: 'json',
                                      url: url_get,
                                      data: "type=update&id_disp=" + id_dispositivo + "&local=" + date + "&note=" + rowdata.note,
                                      success: function (data, status, xhr) {alert("SI");commit(true);},
                                      error: function () {alert("NO");commit(false);}
                               });
                        }
                };
					
		if (jQuery('#jqxTabs').jqxTabs('selectedItem') == 0) {		
			var dataAdapter = new jQuery.jqx.dataAdapter(source);
			jQuery("#jqxgrid").jqxGrid({
				width : "98%",
				height : "520",
				autoHeight : false,
				source : dataAdapter,
				scrollmode : 'logical',
				editable: true,
				pageable: false,
	            		selectionmode: 'singlecell',
	            		editmode: 'click',
				columns : phpColumns,
			});
		} 
		jQuery("#jqxgrid").on('bindingcomplete', function(event) {
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "utc", 'hidden', true);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'width', 140);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch01", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch02", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch03", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch04", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch05", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch06", 'editable', false);
		});
	});
}
    September 20, 2016 at 11:24 am reload jqgrid on submit button #87525

    Christopher
    Participant

    Hi ae50042,

    We are not familiar with the jqGrid. It is not part of our framework. We have a jqxGrid offering a variety of functions. You can check it’s API here:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm?search=jqxGrid

    You can also look at the demos we offer for the jqxGrid here:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    September 20, 2016 at 4:42 pm reload jqgrid on submit button #87553

    ae50042
    Participant

    Hi Christopher,

    Sorry, sad mistake!:( I’m using jqxGrid and I just googled the wrong API.

    Thanks

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

You must be logged in to reply to this topic.