AJAX, JQuery and PHP.
I'm new to JQuery and AJAX. I've only been learning them for ~1 day. I'm trying to make a form where the user puts in the data, hits submit and ajax takes the data and ships it off to my PHP script. The PHP script writes the data to two separate files and then returns 'OK' on success or the error on failure. This should then be printed out accordingly and the form hidden. The input is being written to the file ok but it's everything after that that's not working.
Here's the AJAX/JQuery script:
<html>
<head>
<title>JQuery trials</title>
<script type="text/javascript" src="http://notmyfault.comxa.com/trial/ajaxForm/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
$ (document).ready(function()
{
$("p.toggle").click(function()
{
$("p.intro").toggle("slow");
});
});
</script>
<p class="intro" style="display:none;">Here's how it works: I have a couple of songs in my music library. I want to get more into music so if you have just heard a song or you want to tell me to listen to one, just add it here!
</p>
<p class="toggle" style="text-align:center; border:1px solid #BBBBBB;">Hide/Show</p>
<p>Here's my music library right now!</p>
<div class="library">
<div class="artists" style="float:left; width:100px; margin-bottom:20px;">
<?php include("artists.txt"); ?>
</div>
<div class="songs" style="float:left; width:100px; margin-bottom:20px;">
<?php include("songs.txt"); ?>
</div>
</div>
<script type="text/javascript">
// we will add our javascript code here
$(document).ready(function(){
var result=' ';
$("#ajax-form").submit(function(){
// 'this' refers to the current submitted form
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"http://notmyfault.comxa.com/blog/widgetScript.php",
data: str,
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == "OK") // Message Sent? Show the 'Thank You' message and hide the form
{
$ ("#fields").hide();
$ ("#note").html('Your song has been added. Thank you!');
}
else
{
$ ("#ajax-form").html(msg);
}
});
}
});
return false;
});
});
</script>
<br/><br/>
<div id="note" syle="clear:left;"></div>
<div id="fields" style="clear:left;">
<form id="ajax-form" method="POST" action="javascript:alert('Success?');">
Artist: <input type="text" name="artist" />
<br />
<br />
Song: <input type="text" name="song" />
<br />
<br />
<input type="submit" name="submit" value="Add Song" />
</form>
</div>
</body>
</html>
And here's the PHP script:
<?php
$post = (!empty($_POST)) ? true : false;
if($post)
{
$artist = stripslashes( htmlentities($_POST['artist']) );
$song = stripslashes( htmlentities($_POST['song'] ) );
$error = '';
// Check artist
if(!$artist)
{
$error .= 'Please enter an artist.';
}
if(!$song)
{
$error .= 'Please enter a song.';
}
if(!$error)
{
$artistFile='artists.txt';
$songFile='songs.txt';
$artistFileHandle=fopen($artistFile, 'a') or die($error.='Server-Side Error');
$songFileHandle=fopen($songFile, 'a') or die($error.='Server-Side Error');
fwrite($artistFileHandle, "$artist\n") or die($error.='Server-Side Error');
fwrite($songFileHandle, "$song\n") or die($error.='Server-Side Error');
fclose($artistFileHandle) or die($error.='Server-Side Error');
fclose($songFileHandle) or die($error.='Server-Side Error');
if(!error)
{
echo "OK";
}
}//end of file write loop
else
{
echo $error;
}
}
?>
Thanks
EDIT———————–– Also, I got most of the jquery/ajax script from http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html I took the idea for the php script from there too… /EDIT————————
I haven't run this on my own server to test it, but one thing that jumps out at me is the die($error.="texthere"); statements. AFAIK, die ends php execution, so the echo $error you've got at the bottom won't be run. You may be getting some sort of error after the files were written that isn't being written out and is preventing the echo "Ok" from being reached.
I think you need to change those lines, as suggested in the previous post for example: expression: $artistFileHandle=fopen($artistFile, 'a')
But you also might need to change echo $error; for die($error); or add an exit; after the echo statement.
if(!(expression)){
$error .= 'string here';
}
...
//Do this for all the expressions
}else{
die($error);
}
Hope that helps…