Editting a news story using AJAX

abitlikehomer · December 17, 2009

Hi All

Hoping you can help me. I am currently trying to get AJAX to first select the news story that needs editting (which I have successfully completed) and to then display the data in the various text boxes for a user to edit. I can currently pull the data from the server and the data shows in a div tag but I don't know how to get it to go into a text box to edit rather than just be echoed onto the page. This hopefully is still making sense.

I also have another problem and get the following error message as well:

Warning: mysql_query() expects parameter 1 to be string, resource given in /customers/2asmooth.com/2asmooth.com/httpd.www/Kingfisher_Trust/editStory2.php on line 63

:wtf: :'(

My code is below:

editStory2.php

<?php
session_start();
?>
<!--
Design by 2A Smooth Ltd
http://www.2asmooth.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Kingfisher Trust</title>
<meta name="keywords" content="Homeless, People, Bridlington, Kingfisher, Trust" />
<meta name="description" content="The Kingfisher Trust - Helping the Homeless" />
<link href="default.css" rel="stylesheet" type="text/css"/>
<script src="calendar.js" type="text/javascript" language="javascript"></script>
<style type="text/css" media="screen,projection">
@import url(calendar.css);
</style>
<script type="text/javascript" src="selectNews.js"></script>
</head>
<body>
<!--Header Start-->
<div id="header">
<div id="menu">
	<ul>
            <li class="active"><a href="index.php" title="">Homepage</a></li>
            <li><a href="news.php" title="">News</a></li>
            <li><a href="about_us.php" title="">About Us</a></li>
            <li><a href="login.php" title="">Login</a></li>
            <li><a href="contact us.php" title="">Contact Us</a></li>
        </ul>
</div>
</div>
<!--Header End-->
<!--Content Start-->
<div id="content">
<div id="sidebarleft">
    	<div id="linksleft" class="boxed">
        	<div class="title">
            	<h2>Latest News</h2>
            </div>
            	<!--I will use this part of the page to do a dynamic link up to the database where it will display the latest news.-->
                <p> </p>
                <p>You can now register an account with us and also log in. To do so please <a href="login.php">login here</a> or 
                <a href="registration.php">register here.</a></p>
        </div>
    </div>
    <div id="main">
    	<div class="post">
        	<h2 class="title"><span>Edit News Story</span></h2>
        	<div class="intro"><img src="images/logo.jpg" alt="" width="120" height="120" class="left" />
            <p>Please select which news story you wish to edit using the drop-down box below:
			<?php
					include "connection.php"
			?>

			<?php
				//database connection				
				$query = mysql_query("SELECT * FROM News");
				$result = mysql_query($query);
			?>
				<form action="getNews.php" method="POST">
                    <select name="News" onchange="showNews(this.value)"><option value="" "selected">Select News article to edit</option>
					<?php
						// loop through the records
						while ($row = mysql_fetch_array($query))
						{
							echo "<option value=\"{$row['NewsID']}\">{$row['Title']}</option>";
						}							
					?>
				</select>
                    </form>
            </p>
            	<div id="txtHint"><b>News story will appear here</b></div>
              <br /> <br />
                <br /> <br />
                <!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
			<script type="text/javascript" src="tinymce_3_2_7/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>                
                <script type="text/javascript">
				tinyMCE.init({
				theme : "advanced",
				mode : "textareas",
				plugins : "fullpage",
				theme_advanced_buttons3_add : "fullpage"
				});
			</script>

                <!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
                <form method="post" action="editNews.php">
                	<p>
                    	Title: 
                        <input name="txtTitle" type="text" id="txtTitle">
                    </p>
                	<p>
                    	Date: 
                        <input name="txtDate" type="text" id="txtDate" value="" class="calendarSelectDate" />
                  </p>
                    <p>	
               	    Content: <br />
                        <textarea name="txtContent" cols="50" rows="15" id="txtContent">Please type your story here.</textarea>
                    	<input type="submit" value="Save" />
                	</p>
                </form>
    		</div>
    	</div>
    </div>
    <div id="calendarDiv"></div>
<div id="sidebarright">
    	<div id="linksright" class="boxed">
            <div class="title">
            <h2>Useful Links</h2>
            </div>
                <ul>
                    <li><a href="http://www.shelter.org.uk">Shelter</a><br />
                    The UK's biggest homeless charity</li>
                    <li><a href="http://www.eastriding.gov.uk/az/az_details_new?az_selected=599">Homeless form</a><br />
                    Complete this form for help and assistance from East Riding Council</li>
                    <li><a href="http://homelessuk.org/">HomelessUK</a></li>
                </ul>
            <div id="sponsorlogo"><!--<img src="images/United logo.jpg" alt="united coop logo" />--></div>
    	</div>
    </div>
</div>
<!--Content End-->
<!--Footer Start-->
<div id="footer">
    <p id="legal">Copyright © 2009 Kingfisher Trust. All Rights Reserved. Designed by <a href="http://www.2asmooth.com/">2A Smooth Ltd</a>.</p>
    <p><a href="http://validator.w3.org/check?uri=referer"><img src= "http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p>
</div>
<!--Footer End-->
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;"><a href="http://www.2asmooth.com/">2A Smooth Ltd</a>
</div>
</body>
</html>

getNews.php

<?php
include "connection.php";
$NewsID=$_GET['NewsID'];
//$NewsID=$_POST['News'];
//$NewsID=$_GET["News"];

$query = "SELECT * FROM News WHERE NewsID = $NewsID"; 
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 
	while ($row = @ mysql_fetch_array($result)) 
	{	 
		$NewsID = $row['NewsID'];
		$Title = $row['Title'];
		$Date = $row['Date'];
		$Content = $row['Content'];
		$Link = $row['Link'];
	}
	// close connection 
	//mysql_close($connection); 

echo "News ID :". $NewsID;
echo "Title :". $Title;
echo "Date :". $Date;
echo "Content :". $Content;

?>

selectNews.js

// JavaScript Document
var xmlhttp

function showNews(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getNews.php";
url=url+"?NewsID="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
//document.getElementById("txtContent").value=req.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

I look forward to the replies and being told how easy it is - Thanks guys.

Sign In

Editting a news story using AJAX

Recommended Posts

abitlikehomer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information