Problem select data row from button

[amatostParticipant]

Good morning,
I have a problem in selecting a row and their data, the component works perfectly, but I can not give me my values in a row, it seems that it works if I call the code through an html page, but I used the code in a cms ( joomla) and it does not seem to work here.
Below here is the code:

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            
            var source1 = {
                datatype: "json",
                datafields: [
                    { name: 'id_giocatore', type: 'string'},
                    { name: 'gt_nome', type: 'string'},
                    { name: 'gt_squadra', type: 'string'},
                    { name: 'gt_quota', type: 'int'}
                ],
                url: '/libraries/jqx/portieri.php',
		cache: false
            };

            var dataAdapter = new $.jqx.dataAdapter(source1);
            var editrow = -1;
			
	    $("#jqxgrid1").jqxGrid( {
                width: 500,
                height: 600,
                source: dataAdapter,
                theme: 'ui-redmond',
                selectionmode: 'singlerow',
                rowsheight: 35,
                columns: [
                  { text: 'Id', datafield: 'id_giocatore', width: 50},
                  { text: 'Nome', datafield: 'gt_nome', width: 150 },
                  { text: 'Squadra', datafield: 'gt_squadra', width: 150 },
                  { text: 'Valore', datafield: 'gt_quota', width: 50 },
                  { text: 'Azione', datafield: 'Edit', width: 80, columntype: 'button', cellsrenderer: function () { 
                     return "Compra";
                  }, buttonclick: function (row) {
                     var editrow = row;
                     var dataRecord = $("#jqxgrid1").jqxGrid('getrowdata', editrow);
                     alert(dataRecord.id_giocatore);
                     }
                  }
              ]

            });        
        });
    </script>

where am I wrong?

Thanks a lot.

[DimitarParticipant]

Hello amatost,

Please take a look at our help topic How to Use jQWidgets in Joomla which shows some specific settings that have to be made in order to integrate jQWidgets in this CMS (such as using jQuery and not $ initially). If this does not help solve the issue, please share if there are any errors thrown in your browser’s console.

Best Regards,
Dimitar

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

[amatostParticipant]

thank you very much for your reply,
I did everything exactly as you explained, but I have not yet solved the problem described before

any idea?

Best Regards,
Amato

[DimitarParticipant]

Hi Amato,

Please share if there are any errors thrown in your browser’s console. If not, share your modified code for us to analyse.

Best Regards,
Dimitar

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

[amatostParticipant]

There is no error, that does not work is the piece of code that

                  }, buttonclick: function (row) {
                     var editrow = row;
                     var dataRecord = $("#jqxgrid1").jqxGrid('getrowdata', editrow);
                     alert(dataRecord.id_giocatore);

but beware, if I call this same code over via an external html file works, I believe that this is due to the interpretation of the url

anyway that’s all the code:

<?php
$user = JFactory::getUser();
if (!$user->guest) {
   $utente=$user->id;
}

$db = JFactory::getDBO();
          $query = $db->getQuery(true);
          $query->select('id_squadra, sq_id_utente, sq_nome_squadra, sq_crediti_iniziali, sq_crediti_iniziali, sq_crediti_residui, sq_valore_rosa');
          $query->from('fcw_squadre');
          $query->where('sq_id_utente='.$utente.'');
          $db->setQuery((string)$query);

$datasq=$db->loadObjectList();

echo "<div class=moduleclass_sfx $params->get('moduleclass_sfx', '') >";
echo '<form action="" method="post">';
echo "<select name='select_squadra'>";
echo "<option value=''>Seleziona la squadra</option>";
     foreach ( $datasq  as $i=>$datasq): 
           echo "<option value='$datasq->id_squadra'>$datasq->sq_nome_squadra</option>";
    endforeach;
echo "</select>";
echo "<input id='gobutton' type='submit' name='submit' value='Conferma'/>";
echo "</form>";
echo "</div>";

if(isset($_POST['select_squadra'])){
    $select_squadra = $_POST['select_squadra'];
    //echo "<div class='divbottoni'>";
    //echo "<a href='http://www.fantacalcioworld.it/libraries/jqx/compra_portiere.html?id_squadra=$select_squadra' target='_blank' rel='lightbox' class='jcepopup noicon link-button button-green'  data-mediabox-group='lightbox' data-mediabox-width='550' style='margin-bottom: 10px;'>Compra un Portiere</a>";	
    //echo "</div>";
}
?>

<!DOCTYPE html>
<html lang="it">
<head>

<style>
div#jqxgrid{
    margin-left:auto;
    margin-right:auto;
    float:left;

}
div#jqxgrid1{
    float:right;
}

input#gobutton{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:2px 15px; /*add some padding to the inside of the button*/
margin: 10px;
margin-bottom: 22px;
background:#35b128; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;

.divBottoni button{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:2px 15px; /*add some padding to the inside of the button*/
margin: 10px;
margin-bottom: 22px;
background:#35b128; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
    display:inline;
    margin : 0.1%;  	
 }
}

input#gobutton:hover, input#gobutton:focus{
background-color :#399630; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
</style>

</head>
<body class='default'>
   <div id="jqxgrid"></div>
   <div id="jqxgrid1"></div>
</body>
</html>
	
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            // prepare the data
            
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'rs_ruolo', type: 'string'},
                    { name: 'gt_nome', type: 'string'},
                    { name: 'sqc_logo', type: 'string'},
                    { name: 'sqc_squadra', type: 'string'},
                    { name: 'rs_valore', type: 'int'}
                ],
                url: '/libraries/jqx/rosa.php?select_squadra=<?php echo $select_squadra;?>',
		cache: false
            };

            var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px; margin-top: 5px;" height="35" width="auto" src="' + value + '"/>'; };

            var dataAdapter = new $.jqx.dataAdapter(source);
			
	    $("#jqxgrid").jqxGrid( {
                width: 610,
                height: 600,
                source: dataAdapter,
                theme: 'base',
                rowsheight: 35,
                columns: [
                  { text: 'Ruolo', datafield: 'rs_ruolo', width: 50},
                  { text: 'Nome', datafield: 'gt_nome', width: 180 },
                  { text: '', datafield: 'sqc_logo', width: 50, cellsrenderer: imagerenderer },
                  { text: 'Squadra', datafield: 'sqc_squadra', width: 180 },
                  { text: 'Valore', datafield: 'rs_valore', width: 50 },
                  { text: 'Azione', datafield: 'Edit', width: 100, columntype: 'button', cellsrenderer: function () { 
                     return "Vendi";
                  }, buttonclick: function (row) {
                     editrow = row;
                     alert("premuto");
                     }
                  }
              ]

            });        
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            // prepare the data
            
            var source1 = {
                datatype: "json",
                datafields: [
                    { name: 'id_giocatore', type: 'string'},
                    { name: 'gt_nome', type: 'string'},
                    { name: 'gt_squadra', type: 'string'},
                    { name: 'gt_quota', type: 'int'}
                ],
                url: '/libraries/jqx/portieri.php',
		cache: false
            };

            var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px; margin-top: 5px;" height="35" width="auto" src="' + value + '"/>'; };

            var dataAdapter = new $.jqx.dataAdapter(source1);
            var editrow = -1;
			
	    $("#jqxgrid1").jqxGrid( {
                width: 500,
                height: 600,
                source: dataAdapter,
                theme: 'base',
                selectionmode: 'singlerow',
                rowsheight: 35,
                columns: [
                  { text: 'Id', datafield: 'id_giocatore', width: 50},
                  { text: 'Nome', datafield: 'gt_nome', width: 150 },
                  { text: 'Squadra', datafield: 'gt_squadra', width: 150 },
                  { text: 'Valore', datafield: 'gt_quota', width: 50 },
                  { text: 'Azione', datafield: 'Edit', width: 80, columntype: 'button', cellsrenderer: function () { 
                     return "Compra";
                  }, buttonclick: function (row) {
                     var editrow = row;
                     var dataRecord = $("#jqxgrid1").jqxGrid('getrowdata', editrow);
                     var id_squadra = $id_squadra;
                     alert(id_squadra);
                     //alert("Premuto");
                     }
                  }
              ]

            });        
        });
    </script>

If you want you can give the site access to private Credentials

thanks.

[DimitarParticipant]

Hi Amato,

Actually, the code from your snippet is nowhere to be seen in your larger code sample. If you implement this:

buttonclick: function(row) {
    var editrow = row;
    var dataRecord = $("#jqxgrid1").jqxGrid('getrowdata', editrow);
    alert(dataRecord.id_giocatore);
}

what is alerted? And is your grid populated with data at all?

Best Regards,
Dimitar

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

[amatostParticipant]

Hi Dimitar,

actually this code with id_squadra was only a test as:

                  }, buttonclick: function (row) {
                     var editrow = row;
                     var dataRecord = $("#jqxgrid1").jqxGrid('getrowdata', editrow);
                     var id_squadra = $id_squadra;
                     alert(id_squadra);

you can see in the first post the code that I had put was correct but it worked, but now works with your directives.

Thanks for your patience and professionalism you showed.

how do I close the discussion resolved?

Best regards,
Amato

[Author]

Posts