Edit in jqgrid with popup - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by drv232 9 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Edit in jqgrid with popup Posts

June 3, 2015 at 3:04 pm Edit in jqgrid with popup #71979

drv232

Participant

I’ve been breaking my head over this but for some reason I am unable to reflect any edits to my backend. I think I have issuses with my php file. But I am unable to debug it or find out what’s wrong.
My code is:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>TIG Current Holdings</title>
    <link rel="stylesheet" href="../widgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../widgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxdropdownbutton.js"></script>   
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.columnsreorder.js"></script>  
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.filter.js"></script>   
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../widgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../widgets/scripts/demos.js"></script>
    <script type="text/javascript">

 
        $(document).ready(function () {

            var theme = getDemoTheme();
           
            var url = "CurHold_data.php"
            // prepare the data
            var source =
            {
                datatype: "json",
                unboundmode: true,
                datafields: [
                  { name: 'CUSIP' },
                   { name: 'Description' },
                   { name: 'OrigFace', type: 'float' },
                   { name: 'Factor' , type: 'float'},
                   { name: 'CurrentFace', type: 'float' },
                   { name: 'Mark' , type: 'float'},
                   { name: 'MarketVal', type: 'float' },
                   { name: 'Sector' },
                   { name: 'SubSector' },
                   { name: 'Strategy' },
                   { name: 'Portfolio' },
                   { name: 'Edit' }
                ],
                root: "rows",
//               record: "Product",
               // id: 'Cusip',
                url: url,
               
                
                //update bids
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    //var data = "update=true&Cusip=" + rowdata.Cusip + "&Bid=" + rowdata.Bid + "&Cover=" + rowdata.Cover + "&Comments=" + rowdata.Comments;
                    //var data="update=true&CUSIP=" + rowdata.CUSIP + "&Description=" + rowdata.Description + "&Mark=" + rowdata.Mark +"&MarketVal=" + rowdata.MarketVal + "&Sector=" + rowdata.Sector +"&SubSector=" + rowdata.SubSector +"&Strategy=" + rowdata.Strategy +"&Portfolio=" + rowdata.Portfolio + "&CurrentFace=" + rowdata.CurrentFace +"&OrigFace=" + rowdata.OrigFace + "&Factor=" + rowdata.Factor;
                    var data = "update=true&" + $.param(rowdata);
                    console.log(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'CurHold_data.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        }
                    });
                }//updaterow ends
            };//var source ends
            
    

            var toThemeProperty = function (className) {
                return className + " " + className + "-" + theme;
            }
  
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1550,
                height: 650,
                source: dataAdapter,
                pageable: false,
//                pagesize: 20,
//                pagesizeoptions: ['20','50','100'],
                filterable: true,               
 //               autoheight: true,
                sortable: true,
                altrows: true,
                columnsresize: true,
                columnsreorder: true,
                enabletooltips: true,
                editable: true,
                showstatusbar: true,
                showfilterrow: true,
                showaggregates: true,
                groupable: true,
                groupsexpandedbydefault: true,       
                groupsrenderer: groupsrenderer,        
                selectionmode: 'multiplecellsadvanced',
                columns: [
                
                    { text: 'Description', datafield: 'Description', align: 'left',  width: 150, pinned:true },
                    { text: 'Cusip', datafield: 'CUSIP', align: 'left',  width: 100 },
                    { text: 'OrigFace', datafield: 'OrigFace', cellsformat: 'F0', cellsalign: 'right', align: 'right',  width: 100 },
                    { text: 'Factor', datafield: 'Factor', cellsformat: 'F8', cellsalign: 'center', align: 'center',  width: 100 },
                    { text: 'CurrentFace', datafield: 'CurrentFace', cellsformat: 'F0', cellsalign: 'right', align: 'right',  width: 90 },
                    { text: 'Mark', datafield: 'Mark', cellsformat: 'F2', cellsalign: 'right', align: 'right',  width: 100},
                    { text: 'MarketVal', datafield: 'MarketVal', cellsformat: 'F0', cellsalign: 'right', align: 'right',  width: 100}, 
                    { text: 'Sector', datafield: 'Sector', cellsalign: 'left',align: 'left',  width: 100 },
                    { text: 'SubSector', datafield: 'SubSector', cellsalign: 'left',align: 'left',  width: 100 },
                    { text: 'Strategy', datafield: 'Strategy', cellsalign: 'left',align: 'left',  width: 150 },
                    { text: 'Portfolio', datafield: 'Portfolio', cellsalign: 'left',align: 'left',  width: 75 },
                    { text: 'Product', datafield: 'Product', cellsalign: 'left', align: 'left', width: 75},
                    { text: 'Edit', columntype: 'button', cellsrenderer: function () {
                        return "Edit";
                        }, buttonclick: function (row) {
                        // open the popup window when the user clicks a button.
                        editrow = row;
                        var offset = $("#jqxgrid").offset();
                        $("#EditFormulier").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                        // get the clicked row's data and initialize the input fields.
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                        $("#Description").val(dataRecord.Description);
                        $("#CUSIP").val(dataRecord.CUSIP);
                        $("#OrigFace").val(dataRecord.OrigFace);
                        $("#Factor").val(dataRecord.Factor);
                        $("#CurrentFace").val(dataRecord.CurrentFace);
                        $("#Mark").val(dataRecord.Mark);
                        $("#MarketVal").val(dataRecord.MarketVal);
                        $("#Sector").val(dataRecord.Sector);
                        $("#SubSector").val(dataRecord.SubSector);
                        $("#Strategy").val(dataRecord.Strategy);
                        $("#Portfolio").val(dataRecord.Portfolio);
                        // show the popup window.
                        $("#EditFormulier").jqxWindow('show');
                        }
                    },
       //groups: ['list'],

                    
                ],//columns ends
            });//jqxgrid ends********************************************

            $("#EditFormulier").jqxWindow({ width: 800, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });

            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { Description: $("#Description").val(), CUSIP: $("#CUSIP").val(), OrigFace: $("#OrigFace").val(),Factor: $("#Factor").val(), CurrentFace: $("#CurrentFace").val(), Mark: $("#Mark").val(),MarketVal: $("#MarketVal").val(), Sector: $("#Sector").val(), SubSector: $("#SubSector").val(),Strategy: $("#Strategy").val(), Portfolio: $("#Portfolio").val()};
                    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                    $("#EditFormulier").jqxWindow('hide');
                }
             });

            // trigger the columnreordered event.
            $("#jqxgrid").on('columnreordered', function (event) {
                var column = event.args.columntext;
                var newindex = event.args.newindex
                var oldindex = event.args.oldindex;
                $("#eventlog").text("Column: " + column + ", " + "New Index: " + newindex + ", Old Index: " + oldindex);
 
            });

 
});
       
 
// Search Button       
        
        
    </script>
 
</head>
<a style=color:white; href="/saf/default.php">Main Menu</a></h4>
  
<body bgcolor=#1C1C1C class=class='default'>
   
 
    
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        
        <div id="EditFormulier">
            <div>Edit</div>
            <div style="overflow: hidden;">
            
                 <div class="formeditgroup2">
                    <div class="formeditgroup1">
                    <fieldset>
                    <div class="formedittext">Description:</div>                        
                    <div class="formeditinput"><input size="10" id="Description" /></div>
                    
                    <div class="formedittext">CUSIP:</div> 
                    <div class="formeditinput"><input size="10" id="CUSIP" /></div>

                    <div class="formedittext">OrigFace:</div> 
                    <div class="formeditinput"><input size="10" id="OrigFace" /></div>

                    <div class="formedittext">Factor:</div> 
                    <div class="formeditinput"><input size="10" id="Factor" /></div>

                    <div class="formedittext">CurrentFace:</div> 
                    <div class="formeditinput"><input size="10" id="CurrentFace" /></div>

                    <div class="formedittext">Mark:</div> 
                    <div class="formeditinput"><input size="10" id="Mark" /></div>

                    <div class="formedittext">MarketVal:</div> 
                    <div class="formeditinput"><input size="10" id="MarketVal" /></div>

                    <div class="formedittext">Sector:</div> 
                    <div class="formeditinput"><input size="10" id="Sector" /></div>

                    <div class="formedittext">SubSector:</div> 
                    <div class="formeditinput"><input size="10" id="SubSector" /></div>

                    <div class="formedittext">Strategy:</div> 
                    <div class="formeditinput"><input size="10" id="Strategy" /></div>

                    <div class="formedittext">Portfolio:</div> 
                    <div class="formeditinput"><input size="10" id="Portfolio" /></div>
                    
                    </fieldset>
                    </div>
                    <div class="formeditgroup1">
                    <fieldset>                         
                        <div>
                        <input style="margin-right: 5px;" type="button" id="Save" value="Save" />
                        <input id="Cancel" type="button" value="Cancel" />
                        </div>
                    </fieldset>     
                    </div>
                </div>
                    
            </div>
     </div> <?php//EditFormulierends?>
       
    <div id="jqxgrid"></div>

        
 
</body>
</html>

My php code in other files as follows:


<?php
    //    ini_set('display_errors', 1);
//error_reporting(E_ALL);
include('connect.php');

if (isset($_GET['update']))
{
	// UPDATE COMMAND 
	$update_query = "UPDATE 'rep_cur_holdings' SET 'Description'='".$_GET['Description']."',
	'OrigFace'='".$_GET['OrigFace']."',
	'Factor'='".$_GET['Factor']."',
	'CurrentFace'='".$_GET['CurrentFace']."',
	'Mark'='".$_GET['Mark']."',
	'MarketVal'='".$_GET['MarketVal']."',
	'Sector'='".$_GET['Sector']."',
	'SubSector'='".$_GET['SubSector']."',
	'Strategy'='".$_GET['Strategy']."',
	'Portfolio'='".$_GET['Portfolio']."' WHERE 'CUSIP'='".$_GET['CUSIP']."'";
	 $result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
     echo $result;
}

else{

$query = $conn->prepare("SELECT * FROM rep_cur_holdings WHERE origface<>0 and factor>0 and sector <>'CDS' and sector <>'EquityOptionFut'");
$query->execute();
$result = $query->fetchAll(PDO::FETCH_CLASS);
$temp = array();
$data = array();
foreach($result as $key => $val){
    foreach($val as $key2 => $val2){
        $temp[$key2] = $val2;
    }
    array_push($data, $temp);      
}
echo json_encode($data);

}
?>

June 4, 2015 at 6:49 am Edit in jqgrid with popup #71993

ivailo

Participant

Hi drv232,

Can you send also the content of connect.php.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 5, 2015 at 1:27 pm Edit in jqgrid with popup #72090

drv232

Participant

Hi ivailo, Thank You.
I managed to debug my program.

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.