After update demo field name to mysql own field name, cannot load data - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ajax, data load, jqxgrid

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

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

Author

After update demo field name to mysql own field name, cannot load data Posts
May 21, 2015 at 7:00 am After update demo field name to mysql own field name, cannot load data #71385

lammiu
Participant

In Index.php
$(document).ready(function () {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘EmployeeID’, type: ‘string’},
{ name: ‘FirstName’, type: ‘string’},
{ name: ‘Email’, type: ‘string’},
{ name: ‘Mobile’, type: ‘string’}
],
cache: false,
id: ‘EmployeeID’,
url: ‘data.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&FirstName=” + rowdata.FirstName + “&Email=” + rowdata.Email + “&Mobile=” + rowdata.Mobile;
data = data + “&EmployeeID=” + rowid;

$.ajax({
dataType: ‘json’,
url: ‘data.php’,
type: ‘POST’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
}
});
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize the input fields.
$(“#firstName”).jqxInput({width: 150, height: 23});
$(“#email”).jqxInput({width: 150, height: 23});
$(“#mobile”).jqxInput({width: 150, height: 23});

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataAdapter,
autoheight: true,
columns: [
{ text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 100 },
{ text: ‘Email’, columntype: ‘dropdownlist’, datafield: ‘Email’, width: 100 },
{ text: ‘Mobile’, datafield: ‘Mobile’, width: 180 },
{ text: ‘Edit’, datafield: ‘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();
$(“#popupWindow”).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);
$(“#firstName”).val(dataRecord.FirstName);
$(“#email”).val(dataRecord.Email);
$(“#mobile”).val(dataRecord.Mobile);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 280, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});

$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton();
$(“#Save”).jqxButton();

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { FirstName: $(“#firstName”).val(), Email: $(“#email”).val(), Mobile: $(“#mobile”).val()};

var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘close’);
}
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Email:</td>
<td align=”left”><input id=”email” /></td>
</tr>
<tr>
<td align=”right”>Mobile:</td>
<td align=”left”><input id=”mobile”/></td>
</tr>
<tr>

May 21, 2015 at 7:02 am After update demo field name to mysql own field name, cannot load data #71386

lammiu
Participant

Instructor is mysql db, similar to Northwind except, I have changed the field name Title to mobile, Last name to Email

<?php
#Include the connect.php file
include(‘connect.php’);
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print “can’t find $database”;
}
// get data and store in a json array
$query = “SELECT * FROM instructor”;

if (isset($_POST[‘update’]))
{
// UPDATE COMMAND
$update_query = “UPDATE ‘instructor’ SET FirstName='”.mysql_real_escape_string($_POST[‘FirstName’]).”‘,
Email='”.mysql_real_escape_string($_POST[‘Email’]).”‘,
Mobile='”.mysql_real_escape_string($_POST[‘Mobile’]).”‘ WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
$result = mysql_query($update_query) or die(“SQL Error 1: ” . mysql_error());
echo “in update”;
console.log(“in update”);
echo $result;
}
else
{
// SELECT COMMAND
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
‘EmployeeID’ => $row[‘EmployeeID’],
‘FirstName’ => $row[‘FirstName’],
‘Email’ => $row[‘Email’],
‘Mobile’ => $row[‘Mobile’]
);
}

echo json_encode($employees);
}
?>

May 21, 2015 at 10:19 am After update demo field name to mysql own field name, cannot load data #71394

ivailo
Participant

Hi lammiu,

Probably the problem can be in your database settings(i can’t se how you are change the schema). Do you have in your database table fields Email and Mobile, and also are they correctly set.
The other problematic thing is your ajax function. You use type: ‘POST’ but with parameters prepared for GET request. To fix it if you want to use POST – use data package as object or add traditional: true,. The other variant is to use GET if you want that type of formatting.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 22, 2015 at 1:19 am After update demo field name to mysql own field name, cannot load data #71430

lammiu
Participant

Hi Ivailo,

Thx for the prompt reply.

The database table only has 5 column, I have modified the northwind db by removing other columns and just updating 2 field names. The rest of the code are same as php demo for server_side_grid_editing_with_popup except with the 2 updated field names for the whole file
EmployeeID
LastName
Email
Mobile
TitleOfCourtesy

May 22, 2015 at 10:42 am After update demo field name to mysql own field name, cannot load data #71469

ivailo
Participant

Hi lammiu,

Send the type of errors that you received. This will be very helpful.

Best Regards,
Ivailo Ivanov

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

Posts

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

You must be logged in to reply to this topic.