Jump to content
Stef's Coding Community
jbwebdesign

JQuery PHP loop not working help please

Recommended Posts

Hey everyone, i am working on a site that uses JQuery and PHP. I have a PHP for loop that loops through my database and gets all the info. the JQuery is working fine but the problem is that it only works for the first record from the PHP loop. Can anyone help me make it work for all records?

 

here is my JQuery code:

 

<script type="text/javascript">

var user_id = document.getElementById("user_id").value

$("#delete").click(function() {
 $.msgbox("Are you sure that you want to delete student?<br>id: "+user_id, {
 type: "confirm",
 buttons : [
   {type: "submit", value: "Yes"},
   {type: "cancel", value: "No"}
 ]
}, function(result) {
if(result){
 $.ajax({  
             type: "GET",  
             url: "ajax/afterschool/ajax_afterschool_delete.php",  
             data: "delete="+ user_id,  
             success: function(){  

                 $.msgbox("<strong>You have successfully deleted student!</strong>", {type: "info"});  

            } 

        }); 
}//end if result
else{
		$.msgbox("<strong>You have Not Deleted Anything!</strong>");
	}


});

});
</script>

 

Here is part of my PHP code:

echo '<tbody>
                                               <tr>
                                                       <td class="left"><img hspace="5" height="80" width="80" style="float: left;" alt="" src="images/avatar.jpg">
                                                           <ul class="circles">
														<input type="hidden" id="user_id" name="user_id" value="' . $id . '">

																	<li>Student Id : ' . $id . '</li>
                                                                       <li>Student Name : ' . $student_name . '</li>
                                                                       <li>Address : ' . $address . '</li>
                                                                       <li>City: ' . $city . '</li>
                                                                       <li>Home Phone  : ' . $home_phone . '</li>
                                                                       <li>Emergency Phone: ' . $emergency_phone . '</li>
                                                               </ul></td>
                                                       <td>
													<ul class="circles" style="float:left;">
														<li><a href="#">Contracts</a></li>
														<li><a href="#">Print Invoice</a></li>
													</ul>
                                                       </td>
                                                       <td>Payment Due! </td>
                                                       <td><a class="iconsmini" href="#"> <img src="images/icon-edit.gif" alt=""> </a> <a class="iconsmini" href="#"> <img src="images/icon-add.gif" alt=""> </a> <a class="iconsmini" href="#"> <img src="images/icon-success.gif" alt=""> </a> <a class="iconsmini" id="delete" href="#"> <img src="images/icon-delete.gif" alt=""> </a> </td>
                                               </tr>
                                       </tbody>';

Edited by jbwebdesign

Share this post


Link to post
Share on other sites

I'm not seeing any code that controls the loop in your code samples... The jquery code (as far as I can tell) has nothing to do with the loop, and the PHP sample contains the contents of the loop, but not the loop itself. I'm assuming you have a while/for/foreach loop somewhere in your code, probably surrounding the PHP sample you posted?

Share this post


Link to post
Share on other sites

this is the full php code:

 

<?php 
//echo $afterschool->table();
for ($i = 0; $i < $num_rows; $i++) {

$student_name = mysql_result($result, $i, "student_name");
$address = mysql_result($result, $i, "address");
$city = mysql_result($result, $i, "city");
$home_phone = mysql_result($result, $i, "home_phone");
$emergency_phone = mysql_result($result, $i, "emergency_phone");
$student_name = mysql_result($result, $i, "student_name");
$id = mysql_result($result, $i, "id");
echo '<tbody>
                                               <tr>
                                                       <td class="left"><img hspace="5" height="80" width="80" style="float: left;" alt="" src="images/avatar.jpg">
                                                           <ul class="circles">
														<input type="hidden" id="user_id" name="user_id" value="' . $id . '">

																	<li>Student Id : ' . $id . '</li>
                                                                       <li>Student Name : ' . $student_name . '</li>
                                                                       <li>Address : ' . $address . '</li>
                                                                       <li>City: ' . $city . '</li>
                                                                       <li>Home Phone  : ' . $home_phone . '</li>
                                                                       <li>Emergency Phone: ' . $emergency_phone . '</li>
                                                               </ul></td>
                                                       <td>
													<ul class="circles" style="float:left;">
														<li><a href="#">Contracts</a></li>
														<li><a href="#">Print Invoice</a></li>
													</ul>
                                                       </td>
                                                       <td>Payment Due! </td>
                                                       <td><a class="iconsmini" href="#"> <img src="images/icon-edit.gif" alt=""> </a> <a class="iconsmini" href="#"> <img src="images/icon-add.gif" alt=""> </a> <a class="iconsmini" href="#"> <img src="images/icon-success.gif" alt=""> </a> <a class="iconsmini" id="delete" href="#"> <img src="images/icon-delete.gif" alt=""> </a> </td>
                                               </tr>
                                       </tbody>';
}
echo '<tfoot>						<!-- Show All Students in AfterSchool -->
               <tr>
                       <th colspan="8"> Search For: <input type="text" id="field" value="type here"> <a class="add" href="#">Go</a> </th>
               </tr>
               <tr>
                       <td colspan="8">
					<span style="float:left;">' . $nav_info . ' of ' . $total_recs . '</span>
					<!-- Pagination -->
                     	' . $nav_links . '	             
				</td>
               </tr>
       </tfoot>';
?>

Share this post


Link to post
Share on other sites

EDIT: Sorry, reread this topic... I misread things and thought you were having an issue where your PHP code wasn't displaying all the records correctly.

 

OK, in regards to the javascript question, the issue is that you have multiple "user_id" id's in the page -- id's have to be unique per page. This is throwing your Javascript off.

Share this post


Link to post
Share on other sites

I'm not completely sure... I'd need to experiment. You'd probably still want to keep the hidden field with the user_id value, but perhaps instead of giving it a id, give it a class. Then once the delete icon was clicked on (similarly, you'd need to make that a .delete class, rather than having multiple ids with the same #delete name) you'd use jquery to look for the closest hidden field with that classname and get the value.

Share this post


Link to post
Share on other sites

Without actually testing it and playing with it looks to me like if you changed

<input type="hidden" id="user_id" .....

 

with

 

<input type="hidden" class="user_id" .....

 

it may work. Like falken mentioned, when you use id it needs to be unique. Your code gets looped, so the output gives multiple id's the way it is.

Share this post


Link to post
Share on other sites

What J Stern posted above is the start... You'd want to change "id='user_id'" to "class='user_id'" and also do the same for any other elements that share the same id (#delete, for example).

 

Since you can't then use "var user_id = document.getElementById("user_id").value" any more, you'd need to use jQuery to get the value of the closest hidden field to the element that was clicked on. Probably something along the lines of the .closest() function... As I said, this would require some experimentation.

Share this post


Link to post
Share on other sites

There may be a better way to do this (I'm still learning some aspects of jQuery) but here's one way of approaching it that I got working:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$(".delete").click(function() {
	var productid = $(this).parents().find(".productid").val();
	alert(productid);
	return false;
});

});


</script>

<div>
<input type="hidden" name="product4" value="4" class="productid">
<a class="delete" href="#">Delete</a>
</div>

<div>
<input type="hidden" name="product5" value="5" class="productid">
<a class="delete" href="#">Delete</a>
</div>

Share this post


Link to post
Share on other sites

Falken, Would getElementbyclassname("user_id") work now in its place instead of searching the elements for a value?

 

(Im pretty new to jquery myself so I'm pretty interested on how this works out)

Share this post


Link to post
Share on other sites

I'm not sure, I'm not really familiar with that function. My impression is that it may not be fully supported by all browsers, and secondly, it may return an array of all elements that have that class name, not the specific one you want.

 

If I understand things correctly, this line in my sample "$(this).parents().find(".productid").val();" works by

 

-- finding the clicked element ("this")

-- finding the parent element to the clicked element (the wrapper div)

-- and then searching anything within that parent element for a .productid class

-- once it finds the hidden element with a .productid class, it returns the value.

Share this post


Link to post
Share on other sites

Falken, I like how that works a lot better than the way I was thinking.

 

jb - ya you'll need to edit your css file as your not decorating by id anymore.

Share this post


Link to post
Share on other sites

I was looking around a little bit with this topic in mind. I found this link here that might be useful to your css selectors jbwebdesign.

 

Im assumeing your css file had something like this to decorate your id:

 

#user_id {

xxxxxx: xx

}

 

change the hash to a full stop (.) to make it identify the class.

 

.user_id {

xxxxxxx: xx

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...