jbwebdesign Posted May 3, 2010 Report Share Posted May 3, 2010 (edited) 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 May 3, 2010 by jbwebdesign Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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? Quote Link to comment Share on other sites More sharing options...
jbwebdesign Posted May 3, 2010 Author Report Share Posted May 3, 2010 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>'; ?> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
jstern Posted May 3, 2010 Report Share Posted May 3, 2010 So what would fix that easily? Replacing the 'id''s with 'class' or incrementing the id's along with the loop counts? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
jbwebdesign Posted May 3, 2010 Author Report Share Posted May 3, 2010 hmmmm, i still can't figure this out. Quote Link to comment Share on other sites More sharing options...
jstern Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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> Quote Link to comment Share on other sites More sharing options...
jstern Posted May 3, 2010 Report Share Posted May 3, 2010 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) Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
jbwebdesign Posted May 3, 2010 Author Report Share Posted May 3, 2010 this kind of worked but it ruined in the css class that i was using. Quote Link to comment Share on other sites More sharing options...
jstern Posted May 3, 2010 Report Share Posted May 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 3, 2010 Report Share Posted May 3, 2010 this kind of worked but it ruined in the css class that i was using. Not sure exactly what you mean... Quote Link to comment Share on other sites More sharing options...
jstern Posted May 3, 2010 Report Share Posted May 3, 2010 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 } Quote Link to comment Share on other sites More sharing options...
jbwebdesign Posted May 3, 2010 Author Report Share Posted May 3, 2010 thanks for your help guys it works great Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.