Menu
I was trying to make a page content editable using html 5 and save the data in json file for later use.
I would also like if the page loads using AJAX just the part which is edited and a php file which modifies the json file.
Any inputs on this would be really helpful.
So far I have gone through the AJAX PHP JSON from head first AJAX, and have a pretty good knowledge abut it, but what I need to know is how do that from a JSON file which has a format like this -
{
"itemGuitar": {
"id": "itemGuitar",
"description": "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
"price": 5695.99,
"urls": [
"thewho",
"Pete_Townshend"
]
},
"itemShades": {
"id": "itemShades",
"description": "Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.",
"price": 258.99,
"urls": [
"beatles",
"johnlennon",
"yoko-ono"
]
},
"itemCowbell": {
"id": "itemCowbell",
"description": "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
"price": 299.99,
"urls": [
"Saturday_Night_Live",
"More_cowbell"
]
},
"itemHat": {
"id": "itemHat",
"description": "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
"price": 1699.99,
"urls": [
"abc",
"def"
]
}
}
I need help in getting the data which was edited using ajax, modifying it in the json using php and load the data again into the web page using ajax.
and this json is kept in a file.
Thanks in advance!!
Gaurav Nagar
The HTML so far is --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test HTML to save content editable on the go!!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function sendData () {
var val = document.getElementById('editMe').innerHTML;
var cuenta = new Object();
cuenta.editMe = val;
$.ajax({
type: 'post'
, url: '/processDataFilePHP.php'
, dataType: 'json'
, data: { cuenta: editMe }
});
}
</script>
</head>
<body>
<h1 id="editMe" contenteditable="true">Hurray!!!</h1>
<button id="save" type="submit" onclick="sendData()">Save</button>
</body>
</html>
I also want to know how I can swap the new test which is saved in json and is returned by php.
610
Ok, there are two different problems: Send Json data from PHP, and get Json data in PHP from client side.
To get your json data, you should write in a way PHP can understand it, and be sent. So, the rewritting to the json data will be:
PHP jsonConfig.php
$var = array(
'itemGuitar' => array(
"id" => "itemGuitar",
"description"=> "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
"price" => 5695.99,
"urls" => array(
"thewho",
"Pete_Townshend"
)
),
"itemCowbell" => array(
"id" => "itemCowbell",
"description"=> "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
"price"=> 299.99,
"urls"=> array(
"Saturday_Night_Live",
"More_cowbell"
)
),
"itemHat"=> array(
"id"=> "itemHat",
"description"=> "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
"price"=> 1699.99,
"urls"=> array(
"abc",
"def"
)
)
);
echo json_encode($var);
In this way, when you'll call jsonConfig.phpp you'll get the json. If you can get your data in a PHP file in this way, would be perfect, if not, you'll have to parse from this way to a PHP way (with 'array()' instead of '{}' for grouping data and '=>' instead of ':' to write indexes.
if you don't want to transform the file (because you really only have a json formated file), you may also output the data with Nowdoc (PHP 5.3) or Heredoc strings (lower PHP versions), to avoid problems with double and simple quotes (See more info at http://www.php.net/manual/en/language.types.string.php):
$str = <<<'EOD'
{
"itemGuitar": {
"id": "itemGuitar",
"description": "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
"price": 5695.99,
"urls": [
"thewho",
"Pete_Townshend"
]
},
"itemShades": {
"id": "itemShades",
"description": "Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.",
"price": 258.99,
"urls": [
"beatles",
"johnlennon",
"yoko-ono"
]
},
"itemCowbell": {
"id": "itemCowbell",
"description": "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
"price": 299.99,
"urls": [
"Saturday_Night_Live",
"More_cowbell"
]
},
"itemHat": {
"id": "itemHat",
"description": "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
"price": 1699.99,
"urls": [
"abc",
"def"
]
}
}
EOD;
About getting the data from client side, if you send data with, let's say jquery, in a json way, you only have to catch them with json_decode function. I mean:
fileToEdit.php
<script>
//Data to be sent
var cuenta = new Object();
cuenta.red = 'Facebook';
cuenta.tipo = 'UserAccount';
cuenta.cuenta = '11002032030100202120';
$.ajax({
type: 'post'
, url: '/processDataFilePHP.php'
, dataType: 'json'
, data: { cuenta: cuenta }
});
</script>
processDataFilePHP.php
$postear = (array) json_decode($_POST['cuenta']);
// For seeing the received data:
print_r($postear);
This way you'll get the data from the application, and with $.ajax function you can change your way editing and getting data.
I think this may be useful, if you have more restrictions, tell me what and we'll try to workaround, ;)
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
