Jump to content

JS / JQ Variable Problem?

kingnutter

By kingnutter
in Javascript Help

Recommended Posts

kingnutter Member

kingnutter

Posted
Posted

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'");

}   

*/
}

?>

Link to comment
https://forums.phpfreaks.com/topic/201783-js-jq-variable-problem/
Share on other sites
kingnutter Member

kingnutter

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.