JS / JQ Variable Problem?

kingnutter · May 14, 2010

Hi everyone,

The JQ form in tracks.php below is working fine on first submit. However a subsequent entry will append (and be entered into my database add_track_to_db.php) twice. A third time it will do it three times etc.

Should I be clearing variables somehow or is a page refresh necessary?

Any thoughts welcome,

Thanks

KN

tracks.php

<?php


define ('ROOT', $_SERVER['DOCUMENT_ROOT']);

// start session. Put it above define
/*
session_start('username');


$username = ($_SESSION['username']);

*/


?>


<!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=iso-8859-1" />

<meta http-equiv="Content-Language" content="EN" />
<meta name="charset" content="ISO-8859-1" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content="Copyright © 2010" />
<link rel="shortcut icon" href="../images/favicon.ico" type="images/favicon" />
<link type="text/css" href="/style/mojo_home.css" rel="stylesheet" />
<script src="/style/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/style/prepareImageSwap.js"></script>


</head>

<body>

<?php


if (isset($_POST['submit'])) {	

// nothing happens with these errors yet. Could apend to form or just highlight bad fields in red.

$errorList = array();

	if (trim($_POST['track_no']) == '')
		{
			$errorList[] = 'Invalid Entry: Track No.';
		}

	if (trim($_POST['track_title']) == '')
		{
			$errorList[] = 'Invalid Entry: Track Title';
		}

	if (trim($_POST['track_artist']) == '')
		{
			$errorList[] = 'Invalid Entry: Track Artist';
		}

// Check for errors. If none found go to add_to_db page and insert data.

	if (sizeOf($errorlist) == 0)
		{


			$moj_id = $_POST['moj_id'];
			$track_no = ($_POST['track_no']);
			$track_title = ($_POST['track_title']);
			$track_artist = ($_POST['track_artist']);
			$track_asinuk = (trim($_POST['track_asinuk']));
			$track_asinus = (trim($_POST['track_asinus']));
			include '../includes/add_track_to_db.php';
		// } dont forget to put this back when reinstating error check

}

}


?>

<div id = "wrapper">
<div id = "left">

<?php

include (ROOT.'/includes/header.php');
include (ROOT.'/includes/conf.php');




// Check for issue number

if(!isset($_GET['id']) || trim($_GET['id'] == ''))
	{
		trigger_error('No issue  present' . mysql_error($db), E_USER_ERROR);
	}

// Open DB connection
	$connection = mysql_connect($host, $user, $pass)
	or trigger_error('Unable to connect: ' . mysql_error($connection), E_USER_ERROR);

// Select database
	mysql_select_db($db) or trigger_error('Unable to select database: ' . mysql_error($connection), E_USER_ERROR);

// Retrieve current "issue" (Will be project dependent too)
$id = $_GET['id'];

	$query = "
	SELECT moj_title, moj_date, moj_issue, moj_summary
	FROM mojocd
	WHERE moj_id = '$id'";

	$result = mysql_query($query) or trigger_error('Query failed: ' . mysql_error($connection), E_USER_ERROR);

// There should only be one issue
		if (mysql_num_rows($result) > 0) {

			while($row = mysql_fetch_object($result)){ ?>

			<p />

<div id="cover">

			<img src="../images/<?php echo $id; ?>.jpg" width="200" height="200" alt="Mojo CD: <?php echo $row->moj_title; ?>" title="mojo CD: <?php echo $row->moj_title; ?>"/>

</div> <!-- closes cover -->

<div id="cover-text">

			<h1 class="top"><?php echo $row->moj_title; ?></h1>
			<h2 class="top"><font size="4">Issue No. <?php echo $row->moj_issue; ?>  (<?php echo $row->moj_date; ?>) </font></h2>
			<b><?php echo $row->moj_summary; ?></b>

<?php			} // end while

		} // end if

		else { ?>

			<font size="-1">NO ISSUE PRESENT</font>

<?php		} // end else  ?>

</div> <!-- close cover-text -->


<div id = "content">

<?php

// Retrieve the tracks

	$id = $_GET['id'];
	$query = "
	SELECT track_id, track_no, track_title, track_artist, track_asinuk, track_asinus
	FROM tracks
	WHERE moj_id = '$id'
	ORDER BY track_no
	";

	$result = mysql_query($query)
	or trigger_error('Query failed: ' . mysql_error($connection), E_USER_ERROR); ?>

<p />



<?php

// if records present

	if (mysql_num_rows($result) > 0) { ?>

		<p class="strap"><b>Links go directly to full artist's album on which each track appears</b>

<!-- removed to allow simple list while experimenting 
<div="tracks-table">
<p>
<table class = "tracks">
-->	

			<ul id="tracks">

<?php 			while($row = mysql_fetch_object($result)) {

				echo '<li>' . $row->track_no . ': ' . $row->track_title . ' - ' . $row->track_artist . ' ::: UK:' . $row->track_asinuk . ' ::: US:' . $row->track_asinus . '</li>';

			} // end while

		echo '</ul>';

	} // end if (rows present)

	else {

	echo '<p /><b>NO TRACKS ENTERED.</b>';

	} // end else 

		?>

<a href="add_track.php?id=<?php echo $id; ?>" id="add">Add a "track"</a><p />


<!-- FORM CODE GOES HERE. IDEALLY IT WILL DROP OUT AS ANOTHER TABLE ITEM IN REAL THING $_SERVER['PHP_SELF']-->

<div id="form_block">

<form action="tracks.php?id=<?php echo $id; ?>" method="post" id="form" name="form">

			<input type="hidden" name="moj_id" id="moj_id" value="<?php echo $id; ?>">

			<label for="track_no">Track No:</label>
			<input type="text" size="4" maxlength="4" name="track_no" id="track_no" value="<?php 
				if (sizeOf($errorlist)== 0) {
					echo $_POST['track_no']; 
					} ?>" /><br /> <!-- add this IF to all -->

			<label for="track_title">Track Title:</label> 
			<input type="text" size="50" maxlength="254" name="track_title" id="track_title" value="<?php 
				if (sizeOf($errorlist)== 0) {
					echo $_POST['track_title']; 
					} ?>" /><br />

			<label for="track_artist">Track Artist:</label> 
			<input type="text" size="50" maxlength="254" name="track_artist" id="track_artist" value="<?php 					
				if (sizeOf($errorlist)== 0) {
					echo $_POST['track_artist']; 
					} ?>" /><br />

			<label for="track_asinuk">Amazon Asin UK:</label>
			<input type="text" size="50" maxlength="254" name="track_asinuk" id="track_asinuk" value="<?php 					
				if (sizeOf($errorlist)== 0) {
					echo $_POST['track_asinuk']; 
					} ?>" /><br />

			<label for="track_asinus">Amazon Asin US:</label>
			<input type="text" size="50" maxlength="254" name="track_asinus" id="track_asinus" value="<?php 
				if (sizeOf($errorlist)== 0) {
					echo $_POST['track_asinus']; 
					} ?>" />

			<input type="submit" name="submit" id="submit" value="Add" />

	</form>

</div> <!-- end form_block -->
<p />

<?php

if (isset ($_GET['fromsearch'])) { ?>

	<br />
		<form>
		<input type="button" value="Back to search results" onClick="history.back()">
		</form>

<?php

} //end if (fromsearch) 

	include(ROOT.'/includes/random_cds.php'); ?>

</div> <!-- closes Content -->

<!-- PAGE SPECIFIC CONTENT ENDS HERE -->

<?php

// Sidebar, Tag Cloud and Footer as include

	include(ROOT.'/includes/footer.php'); ?>

</div> <!-- closes left -->

<div id = "right">

<?php
	include (ROOT.'/includes/extra.php'); ?>

</div> <!-- closes right -->
</div> <!-- closes wrapper -->

<?php	include_once(ROOT.'/includes/analyticstracking.php'); ?>

<script type="text/javascript" charset="utf-8">

	$(function(){
		$('a#add').click(function(){
			$('#form_block').slideDown(1000);



	$('#submit').click(function() {

		var moj_id = $('#moj_id').val(),
		    track_no = $('#track_no').val(),
			track_title = $('#track_title').val(),
			track_artist = $('#track_artist').val(),
			track_asinuk = $('#track_asinuk').val(),
			track_asinus = $('#track_asinus').val();

		$.post('../includes/add_track_to_db.php', {
		    'moj_id' : moj_id,
		    'track_no' : track_no,
		    'track_title' : track_title,
			'track_artist' : track_artist,
			'track_asinuk' : track_asinuk,
			'track_asinus' : track_asinus
			},


			function(r) {

				$('<div class="overlay"></div>')
				    .appendTo('#form_block')
					.fadeIn(1000, function() {  


						$('<li>' + r + '</li>')
							.appendTo('ul#tracks')
							.hide()
							.slideDown(1000, function(){

							    $('#form_block').slideUp(1000, function() {

									$('.overlay').hide()

								});

							});

				// clears form
				document.getElementById('form').reset('track_no', 'track_title', 'track_artist', 'track_asinuk', 'track_asinus'); 

				//

				});

			}



		);

		return false; // disable submit click




	});


		return false;
		});


	});


</script>



</body>
</html>

add_track_to_db.php

<?php

include ('conf.php');


if(IS_AJAX) {
$moj_id = $_POST['moj_id'];
$track_no = $_POST['track_no'];
$track_title= $_POST['track_title'];
$track_artist= $_POST['track_artist'];
$track_asinuk= "Its JQ"; // $_POST['track_asinuk'];
$track_asinus= $_POST['track_asinus'];
}



$connection = mysql_connect($host, $user, $pass)
or trigger_error('Unable to connect: ' . mysql_error($connection), E_USER_ERROR);

// select database
mysql_select_db($db)
or trigger_error('Query failed: ' . mysql_error($connection), E_USER_ERROR);



	// generate and execute query
$query = "INSERT INTO
tracks(moj_id, track_no, track_title, track_artist, track_asinuk, track_asinus)
VALUES ('$moj_id', '$track_no', '$track_title', '$track_artist', '$track_asinuk', '$track_asinus')";


$result = mysql_query($query)
or trigger_error('Query failed: ' . mysql_error($connection), E_USER_ERROR);


$_POST = array();


if (!$result){

echo "There was an error on the add_track_to_db page";

}


else{
if(IS_AJAX) {
	/* echo '<h3>' . $track_title . '</h3>';

	echo '<li>' . $row->track_no . ': ' . $row->track_title . ' - ' . $row->track_artist . ' ::: UK:' . $row->track_asinuk . ' ::: US:' . $row->track_asinus . '</li>';
	echo '<p>' . $track_artist . '</p>'; */

	echo $track_no . ': ' . $track_title . ' - ' . $track_artist . ' ::: UK:' . $track_asinuk . ' ::: US:' . $track_asinus; 


}

/*
else{ 

	header("location:ROOT.'/pages/tracks.php?id=$moj_id'");

}   

*/
}

?>

kingnutter · May 16, 2010

OK I've done a bit of error checking and I'm pretty sure the error is to do with this section:

$('#submit').click(function() {

		var moj_id = $('#moj_id').val();
		var track_no = $('#track_no').val();
		var track_title = $('#track_title').val();
		var track_artist = $('#track_artist').val();
		var track_asinuk = $('#track_asinuk').val();
		var track_asinus = $('#track_asinus').val();

		$.post('../includes/add_track_to_db.php', {
		    'moj_id' : moj_id,
		    'track_no' : track_no,
		    'track_title' : track_title,
			'track_artist' : track_artist,
			'track_asinuk' : track_asinuk,
			'track_asinus' : track_asinus
			},

...

I expect it is due to the fact that as the page is unrefreshed, the script is actioning previous submit clicks as well.

So what I need to know is how do I only allow it to fire the post once only for each submit click?

Cheers,

KN

Sign In

JS / JQ Variable Problem?

Recommended Posts

kingnutter

Link to comment

Share on other sites

kingnutter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information