links not working in iPad touchscreen

[dujmovicvParticipant]

Hi All,

my script is displaying some user data in a grid (username, full name, email, etc…). I have formatted the ‘username’ to be a link in the controller .php file :

// SELECT COMMAND
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$users_list[] = array(
			'id' => $row['id'],
			'username' => "<a href='".$config['WEB_ROOT']."users/".$row['username']."'>".$row['username']."</a>",
			'full_name' => $row['full_name'],
			'email' => $row['email'],
			'phone' => $row['phone'],
			'userlevel' => $row['permission_name']
		  );
	}
	 
	echo json_encode($users_list);

The script is working fine except in touchscreen platform (iPad)….. I have tried almost everything (including the ‘callsrenderer’ as described at http://www.jqwidgets.com/community/topic/displaying-links-in-jqxgrid/
The example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customcolumn.htm?classic is also working fine in my iPad so I suppose it CAN be done. Any help is appreciated! Thanks!

[Peter StoevKeymaster]

Hi,

Do you use Paging with “autoheight” set to true on your application?

Best Regards,
Peter Stoev

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

[dujmovicvParticipant]

That’s correct Peter. Here’s my .js.php file :

<?
$link = mysql_connect(DB_SERVER, DB_USER, DB_PASS);
if (!$link) {
    die('Not connected : ' . mysql_error());
}
// make foo the current db
$db_selected = mysql_select_db(DB_NAME, $link);
if (!$db_selected) {
    die ('Can\'t use foo : ' . mysql_error());
}
$sel_pers = mysql_query("SELECT id, permission_name FROM user_permissions WHERE permission_name != 'superadmin' ORDER BY id ASC");
    $state_cou = mysql_num_rows($sel_pers);
	
	$permission_name = "";
	
	$ri = '1';
    while($state_row = mysql_fetch_array($sel_pers))
    {
        if($ri <= $state_cou)
        {
			$permission_name .= "'".$state_row['permission_name']."', ";
        }
        else
        {
			$permission_name .= "'".$state_row['permission_name']."'";
        }
        $ri++;
    }
?>
<script type="text/javascript">
$(document).ready(function () {
            // prepare the data
            var data = {};
            var theme = 'classic';
			
            var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'id', type: 'number' },
					 { name: 'username', type: 'string' },
					 { name: 'full_name', type: 'string' },
					 { name: 'userlevel', type: 'string' },
					 { name: 'email', type: 'string' },
					 { name: 'phone', type: 'string' }
                ],
                id: 'id',
                url: 'grid/jqwidgets/controllers/users_controller.php',
                
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    var data = "delete=true&id=" + rowid;
                    $.ajax({
                        dataType: 'json',
                        url: 'grid/jqwidgets/controllers/users_controller.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // delete command is executed.
							commit(true);
                        }
                    });
                },
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command
                    var data = "update=true&" + $.param(rowdata);
                    $.ajax({
                        dataType: 'json',
                        url: 'grid/jqwidgets/controllers/users_controller.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                        }
                    });
                }
            };
			
			var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                var format = { target: '"_blank"' };
                var html = $.jqx.dataFormat.formatlink(value, format);
                return html;
            };
			
			// filter
			var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = '';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            };
			
			var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
				width: "100%",
				<?
				if ($permisssionToEditUser == 1) { echo "editable: true,"; }
				?>
                theme: theme,
				pageable: true,
                autoheight: false,
				columnsresize: true,
				filterable: true,
				autoshowfiltericon: true,
				sortable: true,				
                columns: [
                      //{ text: 'ID', datafield: 'id', editable: false, width: 35 },
					  { text: 'Username', datafield: 'username', cellsrenderer: linkrenderer, editable: false },
                      { text: 'Full Name', datafield: 'full_name' },
					  { text: 'Userlevel', datafield: 'userlevel', columntype: 'dropdownlist',
							createeditor: function (row, cellvalue, editor) {
								var dataSource = [<?=$permission_name;?>];
								editor.jqxDropDownList({source: dataSource });
							}
					  },
					  { text: 'Email', datafield: 'email' },
					  { text: 'Phone', datafield: 'phone' }
                  ]
            });
			
            $("#deleterowbutton").jqxButton({ theme: theme });
            
            // delete row.
            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });
			
			// trigger the column resized event.
			$("#jqxgrid").bind('columnresized', function (event) {
				var column = event.args.columntext;
				var newwidth = event.args.newwidth
				var oldwidth = event.args.oldwidth;
				$("#eventlog").html("Column: " + column + ", " + "New Width: " + newwidth + ", Old Width: " + oldwidth);
			});         
        });
</script>

I’ve tried to set ‘autoheight’ to FALSE but the result was the same : still can’t click the link on a touchscreen platform (iOS, iPad)…
Any other suggestion? I appreciate your help!!!!!

[Peter StoevKeymaster]

Hi,

Ok, do you use jQWidgets 2.8.3? I have asked for paging and auto-height because on our demo which you said that it work – Paging is enabled and “autoheight” is set to true. So if “pageable” and “autoheight” are true like in our demo and you use the very latest version as on our demo, this should work.

Best Regards,
Peter Stoev

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

[dujmovicvParticipant]

Thank you Peter! All I had to do is to UPDATE to the newest version…

[Author]

Posts