Slideup function not working in JQuery call

I am trying to get a row to slideup when the selection has been made.  The selection works just fine, but for some reason, even though I have the id being called, the row does not slideup.  Any ideas?  The <?= $id ?> is being called from the top of the page in a php statement and is calling correctly.  The html itself is below the jquery statement.
JQuery
 
$(document).ready(function() {
		$("#change").change(function() {
			$.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $(this).val()}, function(resp) {
				if(resp == "Updated") {
					$("#move[<?= $id ?>]").slideUp();
				}
			});
		});
	});
 
 
HTML
 
<tr id="move[<?= $b['id'] ?>]">
                		<td><?= $b['company'] ?></td>
                    	<td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
                    	<td><?= $b['email'] ?></td>
                    	<td><?= $b['tax_id'] ?></td>
                    	<td>
                    		<select id="change" name="approval">
                    			<option>--select--</option>
                    			<option value="true">Approve</option>
                    			<option value="false">Decline</option>
                    		</select>
                    		<input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
                    	</td>
                    </tr>

Open in new window

LVL 1
pingeyegAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lanewayCommented:
You can't mix PHP and JavaScript in that way. The id of the row to be hidden has to be passed through JavaScript. In order to do this you need to define a JavaScript function that accepts the row id as a parameter. Try this:
JQuery / JavaScript
 
function changehandler(rowid) {
    
    $.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $(this).val()}, function(resp) {
            if(resp == "Updated") {
                    $("#move["+rowid+"]").slideUp(); // *notice the change here
            }
    });	
} 
 
HTML
 
<tr id="move[<?= $b['id'] ?>]">
    <td><?= $b['company'] ?></td>
    <td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
    <td><?= $b['email'] ?></td>
    <td><?= $b['tax_id'] ?></td>
    <td>
        <select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)"> <!-- *notice the change here -->
                <option>--select--</option>
                <option value="true">Approve</option>
                <option value="false">Decline</option>
        </select>
        <input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
    </td>
</tr>

Open in new window

0
pingeyegAuthor Commented:
That looked kind of logical enough, but the value of the select box is not being sent.
0
lanewayCommented:
Try this one, rather that using $(this).val() we are using $("#change").val(). Here's the code:
JQuery / JavaScript
 
function changehandler(rowid) {
    
    $.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) { // * change here
            if(resp == "Updated") {
                    $("#move["+rowid+"]").slideUp(); 
            }
    }); 
} 
 
HTML
 
<tr id="move[<?= $b['id'] ?>]">
    <td><?= $b['company'] ?></td>
    <td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
    <td><?= $b['email'] ?></td>
    <td><?= $b['tax_id'] ?></td>
    <td>
        <select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)">
                <option>--select--</option>
                <option value="true">Approve</option>
                <option value="false">Decline</option>
        </select>
        <input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
    </td>
</tr>

Open in new window

0
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

pingeyegAuthor Commented:
Well, now the value is being passed correctly, but the slide is not happening.
0
pingeyegAuthor Commented:
Oddly enough, the response I get in FireBug is:

Updated
<<Along with the rest of the html on the page>>
0
lanewayCommented:
Guess what. I just tried it and it looks like JQuery doesn't like "[]" characters in the id attribute. Try this:
JQuery / JavaScript
 
function changehandler(rowid) {
    
    $.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) {
            if(resp == "Updated") {
                    $("#move_"+rowid+"").slideUp(); // * change here
            }
    }); 
} 
 
HTML
 
<tr id="move_<?= $b['id'] ?>"> <!-- * change here -->
    <td><?= $b['company'] ?></td>
    <td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
    <td><?= $b['email'] ?></td>
    <td><?= $b['tax_id'] ?></td>
    <td>
        <select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)">
                <option>--select--</option>
                <option value="true">Approve</option>
                <option value="false">Decline</option>
        </select>
        <input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
    </td>
</tr>

Open in new window

0
pingeyegAuthor Commented:
Argh.  Still not working.  Could it be the extra " in the id call?
0
lanewayCommented:
> Argh.  Still not working.  Could it be the extra " in the id call?

Doubtful, but lets remove it anyway. I am adding in an alert() - I want to make sure that the rowid value is being passed, and that the slideUp() line is being run. You should see "#move_n" where n is the value of the rowid. Confirm that that's what you see.
JQuery / JavaScript
 
function changehandler(rowid) {
    
    $.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) {
            if(resp == "Updated") {
                     alert("#move_"+rowid); // * change here         
                     $("#move_"+rowid).slideUp(); // * change here
            }
    }); 
} 
 
HTML
 
<tr id="move_<?= $b['id'] ?>">
    <td><?= $b['company'] ?></td>
    <td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
    <td><?= $b['email'] ?></td>
    <td><?= $b['tax_id'] ?></td>
    <td>
        <select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)">
                <option>--select--</option>
                <option value="true">Approve</option>
                <option value="false">Decline</option>
        </select>
        <input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
    </td>
</tr>

Open in new window

0
pingeyegAuthor Commented:
Interesting enough, I didn't get an alert.
0
pingeyegAuthor Commented:
I wonder why the alert isn't working?
0
lanewayCommented:
Are you sure the ajax script is returning the string "Updated"? The code below will alert the value that is being returned so you can check:
JQuery / JavaScript
 
function changehandler(rowid) {
    
    $.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) {
            alert("response: "+resp); // * change here         
            if(resp == "Updated") {
                     alert("#move_"+rowid);         
                     $("#move_"+rowid).slideUp();
            }
    }); 
} 
 
HTML
 
<tr id="move_<?= $b['id'] ?>">
    <td><?= $b['company'] ?></td>
    <td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
    <td><?= $b['email'] ?></td>
    <td><?= $b['tax_id'] ?></td>
    <td>
        <select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)">
                <option>--select--</option>
                <option value="true">Approve</option>
                <option value="false">Decline</option>
        </select>
        <input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
    </td>
</tr>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
pingeyegAuthor Commented:
Sorry to have gotten back to this so late.  I have accepted the solution since I didn't have any more time at the present time to work with it and EE was asking me to close.  The following is what I get as a result to you last comment.
The page at http://www.prettypersuasions.net says:response: Not updated
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Company, Inc. Content Management System | Content</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<link href="company.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/csslayout_ltie7.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/csslayout_ie7.css">
<![endif]-->
 
<script type="text/javascript">
	function changehandler(rowid) {
		$.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) {
			alert("response: "+resp);
			if(resp == "Updated") {
				alert("#move_"+rowid); // * change here
				$("#move_"+rowid).slideUp(); // * change here
			}
		}); 
	} 
</script>
</head>
 
<body id="index">
<a name="top"></a>
<div id="headerwrap">
	<!-- BEGIN HEADER -->
    <div id="header">    	
        <div id="clientinfowrap">
        	<div id="divider"></div>
        	            <div id="clientinfo"><span class="clientname">Hello Administrator</span><a class="logout" href="/admin/logout.php">(logout)</a></div>
        </div>
    	<div id="clientlogo"><img src="/images/logo.png" height="65px" alt="Company" /></div>
    </div>
    <!-- END HEADER -->
</div>
<div id="outerwrap">      
    <div id="outer">
		
        <!-- BEGIN COLUMN ONE -->
        <div id="left"><img src="images/category.gif" alt="Category" width="206" height="30" border="0" />
        	<div id="vertmenu">
            <h1><a href="products.php">Products</a></h1>
            <h1><a href="content.php">Content</a></h1>
            <h1><a href="waitinglist.php">Waiting List</a></h1>
            <h1><a href="coupons.php">Coupons</a></h1>
            <h1><a href="customers.php">Customers</a></h1>
			<h1><a href="manage_orders.php">Orders</a></h1>
			<h1><a href="mass_email.php">Promotional Email</a></h1>
            <h1><a href="change_profile.php">Change Profile</a></h1>
            </div>
        </div>        <!-- END COLUMN ONE -->
        
        <!-- BEGIN COLUMN TWO -->
		<div id="content">
          <div id="navigation">                               
          	<div id="nav">
            	<ul>
                	<li><a href="index.php"><span>Home</span></a></li>
                    <li><a href="help.php"><span>Help</span></a></li>
                </ul>
           	</div>                
		  </div>          
          <div id="contentText">       
          	<h1>Waiting List</h1>
            <p>The list below displays all of the businesses requesting to havea wholesaler acoun with you.  Simply select Approve or Decline in the select box to make your choice.</p>
            <form action="/admin/waitinglist.php" method="post">
            <table cellpadding='0' cellspacing='0'>
            				<tr class='title'>
            					<th>Company</td>
            					<th>Name</td>
            					<th>Email</td>
            					<th>Tax ID</td>
            					<th>Validate</td>
            			</tr>            		<tr id="move[32]">
                		<td>hjghjgjh</td>
                    	<td>shukdeb paul</td>
                    	<td>shukdebp@gmail.com</td>
                    	<td></td>
                    	<td>
                    		<select id="change" name="approval" onchange="changehandler(32)">
                    			<option>--select--</option>
                    			<option value="true">Approve</option>
                    			<option value="false">Decline</option>
                    		</select>
                    		<input type="hidden" name="id" id="id" value="32" />
                    	</td>
                    </tr>
                	
                        		<tr id="move[28]">
                		<td>Company</td>
                    	<td>Person</td>
                    	<td>Email</td>
                    	<td></td>
                    	<td>
                    		<select id="change" name="approval" onchange="changehandler(28)">
                    			<option>--select--</option>
                    			<option value="true">Approve</option>
                    			<option value="false">Decline</option>
                    		</select>
                    		<input type="hidden" name="id" id="id" value="28" />
                    	</td>
                    </tr>
                	
            </table>		  </div>
        </div>
        
        <!-- END COLUMN TWO -->       
        
        <!-- BELOW CODE NEEDED FOR BACKGROUND COLOR AND DIVIDER LINES AND WIDTH. NO CONTENT SHOULD ACTUALL BE ADDED TO THESE DIVS -->
        <div class="clearer"></div>
		
        <!-- END CODE NEEDED .... -->
	</div>   
   
</div>
 
<!-- BEGIN FOOTER -->    
<div id="footerwrap">
	<div id="footer">
        <div id="copyright">Company, Inc. - Copyright 2009</div>
   </div>
</div>
<!-- END FOOTER -->
 
</body>
</html>

Open in new window

0
lanewayCommented:
There is an if-statement in you javascript code which checks if 'waitinglist.php' returns the string "Updated". The slideUp function will only run if "Updated" is returned. You say that the response that you received was "Not updated", and so the slideUp function is not being run. You will have to look into the code of 'waitinglist.php' to find out why it is not returning "Updated". If, instead, you'd like to have the script run slideUp when the response is "Not updated", you can change it as shown below:
// current if-statement which checks for "Updated"
if(resp == "Updated")
 
// modified if-statement which checks for "Not updated"
if(resp == "Not updated")
 
// another modified if-statement which checks for "Updated" or "Not updated"
if(resp == "Updated" || resp == "Not updated")

Open in new window

0
pingeyegAuthor Commented:
Well, actually, it is being Approved, but still isn't sliding up.
0
pingeyegAuthor Commented:
Also, why would the rest of the page's HTML be output to the Firebug display?
0
lanewayCommented:
If you are seeing an alert message that says anything other than "Updated" then the slide up effect will not be triggered. As a test, add the code below into the top of 'waitinglist.php' and then try everything again. The added code will print "Updated" and then exit before doing anything else. No information will be saved but you will able to confirm that the javascript code works.
<?php print "Updated"; exit; ?>

Open in new window

0
lanewayCommented:
> Also, why would the rest of the page's HTML be output to the Firebug display?

Did you see all that HTML in the alert message?
0
pingeyegAuthor Commented:
Yes I did.  The first alert message is the only one that worked.  The second one did not.
0
pingeyegAuthor Commented:
Yet, I am getting the Updated message followed by the rest of the page's HTML below it.
0
lanewayCommented:
Make sure you are stopping the execution of the PHP code after the script prints "Updated". If you don't, the script may continue and display the rest of the HTML.
<?php 
 
// ..php code...
 
print "Updated"; 
exit;
 
// ..php code...
 
?><!DOCTYPE ... >
<html>
 
<!-- the rest of the html -->
 
</html>

Open in new window

0
pingeyegAuthor Commented:
I'm not sure I'm following you on this.  You want me to place that at the top of the page before anything is done?  All that does is cause the page to not load and place the word Updated on the page.
0
lanewayCommented:
My apologies, I had misunderstood something. Rather than go back and forth a bunch more times, can you post all the code for 'waitinglist.php'? It will be easier if I see what you are doing.
0
pingeyegAuthor Commented:

<?php
	include("includes/db.php");
	include("includes/auth.php");
	include("includes/functions.php");
	
	if($_GET['act'] == "update") {
		$value = $_GET['value'];
		$level = "wholesale";
		$id = $_GET['id'];
		
		$updateAccount = sprintf("UPDATE customers
			SET valid='%s', level='%s'
			WHERE id=%d", $value, $level, $id);
		$accountUpdated = mysql_query($updateAccount) or die("Account was not updated because: " . mysql_error());
			if(mysql_affected_rows() > 0) {
				echo "Updated";
			} else {
				echo "Not updated";
			}
	}
	
	$username = $_SESSION['username'];
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Company, Inc. Content Management System | Content</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<link href="companycms.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/csslayout_ltie7.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/csslayout_ie7.css">
<![endif]-->
 
<script type="text/javascript">
	function changehandler(rowid) {
		$.get("waitinglist.php", {act: "update", id: $("#id").val(), value: $("#change").val()}, function(resp) {
			if(resp == "Updated") {
				$("#move_"+rowid).slideUp(); // * change here
			}
		}); 
	} 
</script>
</head>
 
<body id="index">
<a name="top"></a>
<div id="headerwrap">
	<!-- BEGIN HEADER -->
    <div id="header">    	
        <div id="clientinfowrap">
        	<div id="divider"></div>
        	<?php
        		$getName = sprintf("SELECT name
        			FROM login
        			WHERE username='%s'", $username);
        		$nameFound = mysql_query($getName) or die("Name was not grabbed because: " . mysql_error());
        		$n = mysql_fetch_array($nameFound);
        	?>
            <div id="clientinfo"><span class="clientname">Hello <?= ucfirst($n['name']) ?></span><a class="logout" href="/admin/logout.php">(logout)</a></div>
        </div>
    	<div id="clientlogo"><img src="/images/logo.png" height="65px" alt="Client" /></div>
    </div>
    <!-- END HEADER -->
</div>
<div id="outerwrap">      
    <div id="outer">
		
        <!-- BEGIN COLUMN ONE -->
        <?
		include('left-panel.php');
		?>
        <!-- END COLUMN ONE -->
        
        <!-- BEGIN COLUMN TWO -->
		<div id="content">
          <div id="navigation">                               
          	<div id="nav">
            	<ul>
                	<li><a href="index.php"><span>Home</span></a></li>
                    <li><a href="help.php"><span>Help</span></a></li>
                </ul>
           	</div>                
		  </div>          
          <div id="contentText">       
          	<h1>Waiting List</h1>
            <p>The list below displays all of the businesses requesting to havea wholesaler acoun with you.  Simply select Approve or Decline in the select box to make your choice.</p>
            <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
            <?php
            	$valid = "not valid";
            	$getBusiness = sprintf("SELECT id, fname, lname, email, company, tax_id, valid
            		FROM customers
            		WHERE valid='%s'
            		ORDER BY company", $valid);
            	$businessFound = mysql_query($getBusiness) or die("Business was not found because: " . mysql_error());
            	echo "<table cellpadding='0' cellspacing='0'>
            				<tr class='title'>
            					<th>Company</td>
            					<th>Name</td>
            					<th>Email</td>
            					<th>Tax ID</td>
            					<th>Validate</td>
            			</tr>";
            		if(mysql_num_rows($businessFound) < 1) {
            				echo "<tr><td colspan='5'>The Waiting List is currently empty</td></tr>";
            			} else {
            		while($b = mysql_fetch_array($businessFound)) {
            ?>
            		<tr id="move_<?= $b['id'] ?>">
                		<td><?= $b['company'] ?></td>
                    	<td><?= $b['fname'] ?> <?= $b['lname'] ?></td>
                    	<td><?= $b['email'] ?></td>
                    	<td><?= $b['tax_id'] ?></td>
                    	<td>
                    		<select id="change" name="approval" onchange="changehandler(<?= $b['id'] ?>)">
                    			<option>--select--</option>
                    			<option value="true">Approve</option>
                    			<option value="false">Decline</option>
                    		</select>
                    		<input type="hidden" name="id" id="id" value="<?= $b['id'] ?>" />
                    	</td>
                    </tr>
                	
            <?php
            		}
            	}
            echo "</table>";
            ?>
		  </div>
        </div>
        
        <!-- END COLUMN TWO -->       
        
        <!-- BELOW CODE NEEDED FOR BACKGROUND COLOR AND DIVIDER LINES AND WIDTH. NO CONTENT SHOULD ACTUALL BE ADDED TO THESE DIVS -->
        <div class="clearer"></div>
		
        <!-- END CODE NEEDED .... -->
	</div>   
   
</div>
 
<!-- BEGIN FOOTER -->    
<div id="footerwrap">
	<div id="footer">
        <div id="copyright">Company, Inc. - Copyright 2009</div>
   </div>
</div>
<!-- END FOOTER -->
 
</body>
</html>

Open in new window

0
lanewayCommented:
The problem is that after you echo "Updated" or "Not updated", you don't stop the script. So when you use $.get(..) you are going to get all of the HTML back. Use this PHP at the top of the page:
<?php
	include("includes/db.php");
	include("includes/auth.php");
	include("includes/functions.php");
	
	if($_GET['act'] == "update") {
		$value = $_GET['value'];
		$level = "wholesale";
		$id = $_GET['id'];
		
		$updateAccount = sprintf("UPDATE customers
			SET valid='%s', level='%s'
			WHERE id=%d", $value, $level, $id);
		$accountUpdated = mysql_query($updateAccount) or die("Account was not updated because: " . mysql_error());
			if(mysql_affected_rows() > 0) {
				echo "Updated";
				exit; // *added
			} else {
				echo "Not updated";
				exit; // *added
			}
	}
	
	$username = $_SESSION['username'];
?>

Open in new window

0
pingeyegAuthor Commented:
Ok, so now the rest of the page is not being displayed, but the slide effect still is not working.  It seems that if statement is being ignored.
0
pingeyegAuthor Commented:
Ok, scratch that;  now that the rest of the page is not being displayed, the slide effect is working, but now i have run into another issue.  You can only select on customer.  After the effect has happened to that one id, the others return Not Updated.
0
lanewayCommented:
All your hidden fields have the same id, because of this, javascript will be probably get the value of the wrong field. This code will change it so that they all have different ids so javascript can target the right one.
// javascript change
$.get("waitinglist.php", {act: "update", id: $("#id"+rowid).val(), value: $("#change").val()}, function(resp) { 
 
<!-- html change -->
<input type="hidden" name="id" id="id<?= $b['id'] ?>" value="<?= $b['id'] ?>" />

Open in new window

0
pingeyegAuthor Commented:
Awesome!  Thanks for the help.  Now I just need to figure out how to make the slide more smooth.  Thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.