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