Home › Forums › Guriddo Suito PHP › HTML showing instead of action custom button
I have three grids on a page. Each has an icon in Actions on each row which when clicked pops up data related to the row. The code for this is identical in all three grids, however, while the top two work as expected, the bottom one carries out the required action when the icon is clicked but when complete displays the text for the icon instead of the icon.
$loadevent = <<<LOADCOMPLETE
function(rowid){
var ids = jQuery(“#qtlist”).getDataIDs();
for(var i=0;i<ids.length;i++){
var rowd = $(“#qtlist”).getRowData(ids);
var cl = ids;
sq = ‘
</ids>’;
jQuery(“#qtlist”).setRowData(ids,{act:sq});
}
}
LOADCOMPLETE;
$grid->setGridEvent(“loadComplete”,$loadevent);
The icon displays to begin with but after being activated displays
</ids>
Any idea why this should happen.
Hello,
No idea why is this. Suppose something wrong into the definition of the icon or the third grid has id identical to some of the other two or this is a css problem.
Without example demonstrating the problem we can not help.
Kind Regards,
Will
Guriddo Support Team
Hi Will
First grid code:-
<?php
include_once ‘../includes/jq-config.php’;
// include the jqGrid Class
require_once “../javascript/Guriddo/php/PHPSuito/jqGrid.php”;
// include the PDO driver class
require_once “../javascript/Guriddo/php/PHPSuito/DBdrivers/jqGridPdo.php”;
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// enable debugging
$grid->debug = true;
// the actual query for the grid data
$grid->SelectCommand = “SELECT
tr_cyoquestion.CYOQuestionID,
tr_cyoquestion.Title,
tr_cyoquestion.CuratorReference,
” as Category,
” as Type,
” as Subtest1,
” as Subtest2
FROM
tr_cyoquestion”;
// set the ouput format to json
$grid->dataType = ‘json’;
// Let the grid create the model
$grid->setColModel(null);
// Set the url from where we obtain the data
$grid->setUrl(‘getQuestions.php’);
// Set some grid options
$grid->setGridOptions(array(
“caption”=>”Available Questions”,
“rowNum”=>20,
“sortname”=>”Title”,
“altRows”=>true,
“rowList”=>array(20,100,200),
“height”=>250,
“width”=>950
));
$grid->addCol(array(“name”=>”act”),”last”);
// Change some property of the field(s)
$grid->setColProperty(“CYOQuestionID”, array(“label”=>”ID”, “width”=>30));
$grid->setColProperty(“Title”, array(“label”=>”Title”, “width”=>170));
$grid->setColProperty(“CuratorReference”, array(“label”=>”Curator”, “width”=>120));
$grid->setColProperty(“Question”, array(“label”=>”Question”,”width”=>30, “hidden”=>true, “searchoptions”=>array(“searchhidden”=>true)));
$grid->setColProperty(“Category”, array(“label”=>”Category”, “width”=>30, “hidden”=>true));
$grid->setColProperty(“Type”, array(“label”=>”Type”, “width”=>30, “hidden”=>true));
$grid->setColProperty(“Subtest1”, array(“label”=>”Subtest 1”, “width”=>30, “hidden”=>true));
$grid->setColProperty(“Subtest2”, array(“label”=>”Subtest 2”, “width”=>30, “hidden”=>true));
$grid->setColProperty(“act”, array(“label”=>”Actions”, “width”=>50));
//$grid->setSubGrid(“getQuestionText.php”, array(‘Question’), array(860), array(‘left’));
$loadevent = <<<LOADCOMPLETE
function(rowid){
var ids = jQuery(“#qavlist”).getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids;
var rowd = $(“#qavlist”).getRowData(ids);
sq = ‘
</ids>’;
jQuery(“#qavlist”).setRowData(ids,{act:sq});
}
}
LOADCOMPLETE;
$grid->setGridEvent(“loadComplete”,$loadevent);
$drag = <<< DRAG
jQuery(‘#qavlist’).jqGrid(‘gridDnD’,{connectWith:’#qtlist,#qfolist’});
DRAG;
$grid->setJSCode($drag);
// Enable navigator
$grid->navigator = true;
// Disable some actions
$grid->setNavOptions(‘navigator’, array(“excel”=>true,”add”=>false,”edit”=>false,”del”=>false,”view”=>false));
// Run the script
$grid->renderGrid(‘#qavlist’,’#qavpager’,true, null, null,true,true,true);
//$conn = null;
?>
Second grid code:-
<?php
include_once ‘../includes/jq-config.php’;
// include the jqGrid Class
require_once “../javascript/Guriddo/php/PHPSuito/jqGrid.php”;
// include the PDO driver class
require_once “../javascript/Guriddo/php/PHPSuito/DBdrivers/jqGridPdo.php”;
if(!isset($TestID) ) {
$TestID = jqGridUtils::GetParam(‘id’,”);
}
$id = $TestID;
if(!isset($sTypes) ) {
$sTypes = jqGridUtils::GetParam(‘types’,”);
}
$types = $sTypes;
if(!isset($sSubtest1) ) {
$sSubtest1 = jqGridUtils::GetParam(‘subtest1’,”);
}
$subtest1 = $sSubtest1;
if(!isset($sSubtest2) ) {
$sSubtest2 = jqGridUtils::GetParam(‘subtest2’,”);
}
$subtest2 = $sSubtest2;
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Set the url from where we obtain the data
$grid->setUrl(‘getTestQuestions.php?id=’.$TestID.’&types=’.$sTypes);
// enable debugging
//$grid->debug = true;
// the actual query for the grid data
$grid->SelectCommand = “SELECT
tr_cyotestquestion.CYOTestQuestionID,
tr_cyoquestion.Title,
tr_cyoquestion.CuratorReference,
tr_cyocategory.Title AS Category,
testtype.Name as TestType,
(SELECT
subtest.Name AS Name1
FROM
subtesttype
INNER JOIN subtest ON subtesttype.SubTestTypeID =
subtest.SubTestTypeID
INNER JOIN test ON test.SubTestTypeID = subtesttype.SubTestTypeID
where test.TestID = tr_cyotestquestion.TestID
and subtest.TestSubTestID = tr_cyotestquestion.SubTestID) as SubTest1,
(SELECT
subtest.Name AS Name1
FROM
subtesttype
INNER JOIN subtest ON subtesttype.SubTestTypeID =
subtest.SubTestTypeID
INNER JOIN test ON test.SubTestTypeID = subtesttype.SubTestTypeID
where test.TestID = tr_cyotestquestion.TestID
and subtest.TestSubTestID = tr_cyotestquestion.SubTest2ID) as SubTest2
FROM
tr_cyotestquestion
INNER JOIN tr_cyoquestion ON tr_cyotestquestion.CYOQuestionID = tr_cyoquestion.CYOQuestionID
LEFT JOIN tr_cyoquestioncategory ON tr_cyoquestion.CYOQuestionID = tr_cyoquestioncategory.CYOQuestionID
LEFT JOIN tr_cyocategory ON tr_cyoquestioncategory.CYOCategoryID = tr_cyocategory.CYOCategoryID
INNER JOIN testtype ON tr_cyotestquestion.TestTypeID = testtype.TestTypeID
WHERE
tr_cyotestquestion.FixedOrder IS NULL and
tr_cyotestquestion.TestID = “.$id;
// set the ouput format to json
$grid->dataType = ‘json’;
// Let the grid create the model
$grid->setColModel();
// Set some grid options
$grid->setGridOptions(array(
“caption”=>”Random Order questions for Test “.$id,
“rowNum”=>500,
“sortname”=>”Title”,
“altRows”=>true,
“rowList”=>array(500,1000),
“cellEdit”=>true,
“height”=>200,
“width”=>950
));
$grid->addCol(array(“name”=>”tact”),”last”);
// Change some property of the field(s)
$grid->setColProperty(“CYOTestQuestionID”, array(“label”=>”ID”, “width”=>30));
$grid->setColProperty(“Title”, array(“label”=>”Title”, “width”=>150, “editable”=>false));
$grid->setColProperty(“CuratorReference”, array(“label”=>”Curator”, “width”=>120, “editable”=>true));
$grid->setColProperty(“Category”, array(“label”=>”Category”, “width”=>50, “editable”=>true));
$grid->setColProperty(“TestType”, array(“label”=>”Type”, “width”=>70, “editable”=>true, “edittype”=>”select”, “formatter”=>”select”, “editoptions”=>array(“value”=>”{$types}”)));
$grid->setColProperty(“SubTest1”, array(“label”=>”Subtest 1”, “width”=>60, “editable”=>true, “edittype”=>”select”, “formatter”=>”select”, “editoptions”=>array(“value”=>”{$subtest1}”)));
$grid->setColProperty(“SubTest2”, array(“label”=>”Subtest 2”, “width”=>60, “editable”=>true, “edittype”=>”select”, “formatter”=>”select”, “editoptions”=>array(“value”=>”{$subtest2}”)));
$grid->setColProperty(“tact”, array(“label”=>”Actions”, “width”=>50));
//$grid->setSubGrid(“getQuestionTextNO.php”, array(‘Question’), array(860), array(‘left’));
$loadevent = <<<LOADCOMPLETE
function(rowid){
var ids = jQuery(“#qtlist”).getDataIDs();
for(var i=0;i<ids.length;i++){
var rowd = $(“#qtlist”).getRowData(ids);
var cl = ids;
st = ‘
</ids>’;
jQuery(“#qtlist”).setRowData(ids,{tact:st});
}
}
LOADCOMPLETE;
$grid->setGridEvent(“loadComplete”,$loadevent);
$dragdrop = <<< DRAG
jQuery(‘#qavlist’).jqGrid(‘gridDnD’,{connectWith:’#qavlist,#qtlist,#qfolist’});
DRAG;
$grid->setJSCode($dragdrop);
// Enable navigator
$grid->navigator = true;
// Disable some actions
$grid->setNavOptions(‘navigator’, array(“excel”=>true,”add”=>false,”edit”=>false,”del”=>false,”view”=>false));
// Run the script
$grid->renderGrid(‘#qtlist’,’#qtpager’,true, null, null,true,true,true);
$conn = null;
?>
Icons display correctly but when clicking on icon in second grid the icon disappears and the text
appears where 933 is the id of that row’s item.
Clicking on another icon and the text disappears and that rows’s icon reappears and the next icon clicked disappears to be replace with the text. I do not see any duplicate references that may make this happen other than both are calling the same function. Actually changing that so each calls a function of a different name makes no difference.
Hello,
As I say in my previous post – we need a full example including css, js and etc – i.e full demo. This maybe is a CSS problem.
Another unknown point is : which CSS framework is used.
If you change the theme (if possible) what is happen?
Kind Regards,
Will
Guriddo Support Team
Hi Will, sorry to waste your time. The issue turned out to be cellEditing was true but the action column did not have “editable”=>false which when added sorted out the issue.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top