I am a begier programmer and I am trying to figure out how the x-editable fields work before I can attempt to implement them in a website. I've seen a couple of examples around the web and even on here but the solutions I've found haven't worked for me. I have an index.php file with a test page that presents two sample fields (text and drop down selector). I was able to get data from a specific table row to show up in the fields. Here's my index.php code.
<?php
$dbCon = mysqli_coect("localhost", "#", "#", "#");
// Check coection
if (mysqli_coect_ero())
{
echo "Failed to coect: " . mysqli_coect_error();
}
$sql="SELECT * FROM user WHERE id ='7' ";
$records=mysqli_query($dbCon,$sql);
$user=mysqli_fetch_assoc($records)
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>X-editable Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- x-editable (bootstrap version) -->
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<!-- main.js -->
<script src="main.js"></script>
</head>
<body>
<div class="container">
<h1>Sample Editing Page</h1>
<div>
<span>Useame:</span>
<a href="#" id="useame" data-type="text" data-placement="right" data-url="save.php" data-name="useame" data-title="Enter useame"><?php echo $user['useame'];?> </a>
</div>
<div>
<span>Country:</span>
<a href="#" id="country" data-type="select" data-placement="right" data-url="save.php" data-name="country" data-title="Select country"><?php echo $user['country'];?></a>
</div>
</div>
</body>
</html>
I reference a coection.php file:
<?php
$dbCon = mysqli_coect("localhost", "#", "#", "#");
if (mysqli_coect_ero()) {
echo "Failed to coect: " . mysqli_coect_error();
}
?>
I am still wrapping my head around the js script and how it gets used. In the "url:" line, I referenced "save.php" which is supposed to update the table data in the database. Here's the js script, which is pretty much taken straight from the example file downloaded from the website:
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'inline';
//make useame editable
$('#useame').editable({
type: 'text',
url: 'save.php',
pk:7
}
);
//make status editable
$('#country').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 1,
source: [
{value: 1, text: 'USA'},
{value: 2, text: 'Australia'},
{value: 3, text: 'Other'}
]
/*
//uncomment these lines to send data on server
*/
,pk: 7
,url: 'save.php'
});
});
Everything seems to work just fine. The data from the specific row I'm calling (id=7) is showing up just fine. I can click on the field and it becomes an inline editable field. It'll hold the changes I make, but it doesn't stay that way when I reload the page and it doesn't update in the database table. I'm pretty sure that the issue lies in my save.php file:
<?php
include("coection.php");
if(isset($_POST['useame'])){
$useame=$_POST['useame'];
$country=$_POST['country'];
}
$mysql_query= "UPDATE user SET useame=$useame WHERE id='7'";
?>
The version that I have provided here is where I'm at. I've tried at least a dozen different things and then deleted them to try over again. I know this isn't a difficult thing to do, I'm not seeing it yet because I don't fully understand the programming language and its functions, hence why I'm going through this to figure it out. Eventually, this will be implemented in a larger project for a website. I'll worry about the security issues at before I get to that, first I need to figure out to get it working in the first place.