Hi I need help with the following code. I have searched a number of posts and other sites but to no avail.
This is a stripped down version from a site I'm building which has admin pages with numerous divs that are editable using CKeditor, so serialize is not an option for me(I don't think). I can pass the array to PHP when I hard code the $.post indexes and use variables for the content.
This is ok for one page, but I have many. And so when I try to construct the array string as a variable and pass this as a second argument to $.post, it fails. Firebug shows json being passed, although the values are in red(the hard coded version is not being identified as json! Just Index Value). I believe this is probaly just a syntax issue but I've hit a wall. Can anybody show me the light.
The PHP handler tries various methods of reading the POST.
The dynamic HTML with the js :
<html>
<head>
<title>jQuery POST Test</title>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
function getElementsByClass(searchClass) {
var classElements = new Array();
var node = document;
var tag = 'div';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function getDivs(){
var divArry = getElementsByClass('editable')
var postElmnts = '';
for(i=0; i<divArry.length; i++){
pageName = divArry[i].id;
pageContent = document.getElementById(pageName).innerHTML;
//alert(pageName + ': ' + pageContent);//Test if divs are identified properley
postElmnts= postElmnts + pageName + ': ' + pageContent + ', ';
};
postElmnts = postElmnts.slice(0, -2);
postArry = '{' + postElmnts + '}';
$.post("process_jQuery_test.php",postArry, function(data){alert(data + 'Original: ' + postArry);});
}
function grabText(){
var one = document.getElementById( 'block1' ).innerHTML;
var two = document.getElementById( 'block2' ).innerHTML;
var three = document.getElementById( 'block3' ).innerHTML;
$.post("process_jQuery_test.php", { block1: one, block2: two, block3: three}, function(data){alert( data );} );
}
</script>
</head>
<body>
<button onClick="getDivs();">Get Divs dynamically</button>
<button onClick="grabText();">Grab Text to hard coded index</button>
<div id="block1" class="editable"><p>This is Block 1 content</p></div>
<div id="block2" class="editable"><p>This is Block 2 content</p></div>
<div id="block3" class="editable"><p>This is Block 3 content</p></div>
</body>
</html>
This is the PHP test handler:
<?php
$data = json_decode($_POST, true);
$decode = json_decode($_POST,true);
$decodeNstrip = json_decode(stripslashes($_POST),true);
echo "Post 0: ".$_POST[0]."
";
echo "
Post block1: ".$_POST['block1']."
";
echo "
Post loop
";
foreach($_POST as $key => $value){
echo $key.': ' .$value."
";
}
echo "
Post decode: ";
print_r($decode)."
";
echo "
Post decode and strip: ";
print_r($decodeNstrip)."
";
echo "
Post Array: ";
print_r($_POST)."
";
?>
In grabText you pass an array/object but in getDivs you're trying to send text. The text could be formatted as a query string, but I prefer this method.
function getDivs(){
var divArry = getElementsByClass('editable')
var postElmnts = '';
var msg = {}
for(i=0; i<divArry.length; i++){
pageName = divArry[i].id;
pageContent = document.getElementById(pageName).innerHTML;
msg[pageName] = pageContent
};
$.post("handle.php",msg, function(data){alert(data);});
}
Here's the jQuery way of doing it. I still prefer the more traditional method (plus it's a bit faster).
function getDivs(){
var msg = {}
$('.editable').each(function(e){
msg[$(this).attr('id')] = $(this).html();
});
$.post("handle.php",msg, function(data){alert(data);});
}
The data passing to .post only accepts String and Object
String as in query string, e.g. year=2000&month=11
or
Object in key-value/paired, e.g. {"year":2000,"month":11}