Hey, guys. I’ve been working on a simple CMS for a client and have an issue I can’t resolve.
So, I guess I’ll focus on the Index page which is where I’m testing these changes until they’re complete. There’s three pages, index.php, index-edit.php, index-edit-complete.php - index.php just displays the content normally, index-edit.php displays the content in a WYSIWYG script, and index-edit-complete.php updates & displays the data in the db. When a user clicks the submit button on index-edit.php, the content is then updated in the database. The problem is that when the form is submitted, the page refreshes, but retains the old “content” - the database reflects the changes made, but I have to do a 2nd refresh on index-edit.php in order to see the changes.
Of course, I did lots of research on how to solve this and mostly came up with AJAX being the solution - which it seems like an easy option, but for whatever reason it’s not working properly for me.
header.inc.php:
[code]function UpdateUser() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert (“Browser does not support HTTP Request”);
return;
}
var url=“index-edit-complete.php”;
url=url+"?page_id="+page_id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==“complete”)
{
document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}[/code]
index-edit.php:
<form name="content_form" id="content_form" method="post">
<input type="hidden" name="page_id" id="page_id" value="<?php echo $page_id ?>" />
<textarea id="page_content" name="page_content" class="textarea" style="width: 710px; height: 200px"><?php echo $page_content ?></textarea>
<input type="button" class="send submit-sprite" value="Submit" name="submit" id="submit" onClick="UpdateUser()" />
<div id="txtHint"></div>
</form>
index-edit-complete.php:
[php]<?php
include(‘includes/db.inc.php’);
$page_idP = $_GET[‘page_id’];
$query = mysql_query(“SELECT * FROM pages WHERE id = ‘$page_idP’”);
$row = mysql_fetch_array($query);
$page_content = $row[‘page_content’];
$page_id = $row[‘id’];
$idP = mysql_real_escape_string($_POST[‘id’]);
$page_titleP = mysql_real_escape_string($_POST[‘page_title’]);
$page_contentP = mysql_real_escape_string($_POST[‘page_content’]);
mysql_query(“SELECT * FROM pages WHERE id = ‘$idP’”);
if(isset($_POST[‘submit’])) {
mysql_query(“UPDATE pages SET page_content=’$page_contentP’ WHERE id=’$page_idP’”);
}
?>
If you look at index-edit.php you’ll notice on the last that the type is classified as a button. This is a predicament. It appears as though if I use type=“button” the AJAX script works properly and displays index-edit-complete.php in on index-edit.php - But it does NOT submit the form, therefore it’s completely useless, at least in the state it’s currently in. If I change type=“button” to type=“submit”, the form submits, but the AJAX does not; index-edit-complete.php does not show up in .
Any help would be greatly appreciated it.
Thanks,
Andrew