Post 1st and after every clicked row

[drakiParticipant]

Hello!

I’ve got a table and I’ve got a left column of my site. In the left column I want to show more information than in the row but I need an e-mail from the row therefore there I able to make an sql query. When the page loaded I want the e-mail form the first row what is automatically seleted. And after on every click i want to post the e-mail from the clicked row. Can someone help me in this solution?

      <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
			var source =
			{
				url: 'data.php',
				dataType: 'json',
				datatype: "json",
				cache: false,
				datafields: [
					 { name: 'ContactID', type: 'string' },
					 { name: 'ContactFirst', type: 'string' },
					 { name: 'ContactLast', type: 'string' },
					 { name: 'ContactEmail', type: 'string' },
					 { name: 'ContactCell', type: 'string' },
					 { name: 'ContactCompany', type: 'string' }
				],
				root: 'Rows',
				cache: false,
				sortcolumn: 'ContactFirst',
                sortdirection: 'asc',
				beforeprocessing: function (data) {
				source.totalrecords = data[0].TotalRows;
				} 
			};
			
			var renderEdit = function (row, columnfield, value, defaulthtml, columnproperties, rowData) {
                    return ' <div style="height: 27px; margin-top: 2px; text-align: center;"><a href="contact.php?id='+rowData.ContactID+' "><img src="images/edit.png" width="20px" height="20px"></a></div>';
                }
				
				var renderWorksheet = function (row, columnfield, value, defaulthtml, columnproperties, rowData) {
                    return '  <div style="height: 27px; margin-top: 2px; text-align: center;"><a href="worksheetwdata.php?email='+rowData.ContactEmail+' "><img src="images/munkalap.png" width="20px" height="20px"></a></div>';
                }
				
				var renderDelete = function (row, columnfield, value, defaulthtml, columnproperties, rowData) {
                    return '<div style="height: 27px; margin-top: 2px; text-align: center;"><a href="delete.php?contact='+rowData.ContactID+'"><img src="images/bin.png" width="20px" height="20px" /></a></div>';
                }
			
            var dataAdapter = new $.jqx.dataAdapter(source);
			
			$("#jqxgrid").jqxGrid(
            {
			    width: 830,
				height: 800,
                source: dataAdapter,
                theme: 'classic',
				filterable: true,
				showfilterrow: true,
				sortable: true,
				rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
				columns: [
					  { text: 'ID', datafield: 'ContactID', columntype: 'textbox', filtertype: 'input', width: 50, hidden: true },
					  { text: 'Vezetéknév', datafield: 'ContactFirst', columntype: 'textbox', filtertype: 'input', width: 125},
					  { text: 'Keresztnév', datafield: 'ContactLast', columntype: 'textbox', filtertype: 'input', width: 125 },
					  { text: 'Cég', datafield: 'ContactCompany', columntype: 'textbox', filtertype: 'input', width: 280 },
					  { text: 'Email', datafield: 'ContactEmail', width: 180, hidden: true },
					  { text: 'Mobiltelefon', datafield: 'ContactCell', columntype: 'textbox', filtertype: 'input', width: 130 },
					  { text: ' ', width: 40, cellsrenderer: renderEdit, filterable: false, showfilterrow: false, sortable: false},
					  { text: ' ', width: 40, cellsrenderer: renderWorksheet, filterable: false, showfilterrow: false, sortable: false},
					  { text: ' ', width: 40, cellsrenderer: renderDelete, filterable: false, showfilterrow: false, sortable: false}
					  
				  ]
            });	
        });
    </script>

[DimitarParticipant]

Hello draki,

Initially, you can get the “ContactEmail” cell of the first row and make your Ajax call in the grid’s ready callback function, i.e.:

ready: function() {
    var value = $('#jqxgrid').jqxGrid('getcellvalue', 0, "ContactEmail");
    // Ajax call
},

Afterwards, you can get the clicked row’s “ContactEmail” cell in the rowclick event handler:

$('#jqxgrid').on('rowclick', function(event) {
    var boundIndex = event.args.rowindex;
    var value = $('#jqxgrid').jqxGrid('getcellvalue', boundIndex, "ContactEmail");
    // Ajax call
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[drakiParticipant]

Hello Dimitar!

Thanks for your reply. I’m trying to do the in this way after load to post the first line but is not works. 🙁 The post is blank. I’m trying in this way:

$(document).ready(function() {
  // Select the first row in the table automatically
   $('#jqxgrid').jqxGrid('selectrow', 0);

                var first_row = 0;		
                var loaddata = $('#jqxgrid').jqxGrid('getrowdata', first_row);
                    $.ajax({
                  type: "POST",
                  url: "onload.php", //beállítod a php fájlod
                  data:  loaddata, //itt küldöd el az adatokat
                  success: function(data){
				  $('#leftc_mid_top').html(data);
                  }
              });
 });

Can you help me what is the problem?

Thanks,
Draki

[drakiParticipant]

I’m tried with : 'getcellvalue', 0, "ContactEmail" too. And its a same.

[DimitarParticipant]

Hi draki,

I meant the jqxGrid ready callback, not $(document).ready(). For example:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,
    selectionmode: 'multiplecellsadvanced',
    ready: function () {
        var value = $('#jqxgrid').jqxGrid('getcellvalue', 0, "ProductName");
        // Ajax call
    },
    columns: [
        { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
        { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
        { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
        { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
        { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
    ],
    columngroups: [
        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
    ]
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[drakiParticipant]

Hello Dimitar!

Yes, it is my fault but now it is works fine.
Thanks very much your help!

Best Regards,
Draki

[Author]

Posts