Question about a jQuery DOM issue

Page 1 of 1

2 Replies - 360 Views - Last Post: 14 August 2011 - 12:26 PM

#1 rjosori  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 10-May 09

Question about a jQuery DOM issue

Posted 13 August 2011 - 06:10 PM

Hi, I'm relatively new to jQuery, and need help with a project I'm working on. I have a table which is created dynamically with a database query in PHP/MySQL. I am creating an interface for the user to select a row in a the table via radio buttons and be able to delete the row in the database. Since the table cells/rows are created dynamically, I need jQuery to get the value of one of the fields so that a new DELETE sql command can be built with that value.

Here's the general structure of my HTML:


<html>
  <table>
    <form>
      <tr>
        <td>
          <div class='radio'>
            <input type='radio' name='radio' class='styled'>
          </div>
        </td>
        <td></td>
        <td></td>
        <td class="num"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      
      <tr>
        <td>
          <div class='radio'>
            <input type='radio' name='radio' class='styled'>
          </div>
        </td>
        <td></td>
        <td></td>
        <td class="num"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>
          <div class='radio'>
            <input type='radio' name='radio' class='styled'>
          </div>
        </td>
        <td></td>
        <td></td>
        <td class="num"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </form>
  </table>
</html>


I am trying to get the value of .num for the row that has a radio button selected.

Here's my amateurish attempt at jQuery:

$(document).ready(function() {
      $('input:radio[name=radio]:checked').parent().sibling('.num').val();
   });


Please help!

Is This A Good Question/Topic? 0
  • +

Replies To: Question about a jQuery DOM issue

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: Question about a jQuery DOM issue

Posted 13 August 2011 - 06:44 PM

Well first of all be sure to put your HTML into a body tag and such. Structure the page properly. Secondly, put a number into the cell so when you fetch its value, it will actually have one. Third, you use parent(). This will get you the container div. You need to go up again and then call siblings (notice the "s" on the end). Use text() instead of val().

var radioVal = $('input:radio[name=radio]:checked').parent().parent().siblings(".num").text();


This code says, look for the radio named "radio" which is checked. Get its parent's parent (the container td) and then look for its sibling which has the class "num" attached to it. Get the text value of that cell and store it into a variable called "radioVal".

Keep in mind that this is looking for a radio that is already checked. If you want this code to kick off when the user clicks a radio button, you need to use a click event.

Hope this helps! :)
Was This Post Helpful? 1
  • +
  • -

#3 rjosori  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 10-May 09

Re: Question about a jQuery DOM issue

Posted 14 August 2011 - 12:26 PM

Hi Martyr2!

Thanks for your help yesterday. I am still having an issue with the radio buttons and jQuery, so I've included a real copy of the code to see what I'm doing wrong:


<!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=UTF-8" />
<title>Title</title>

<link href="css/productStyles.css" type="text/css" rel="stylesheet" />

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


<script type="text/javascript">
    $(document).ready(function() {
        $("input[name*='rdio']").click(function() {
            window.alert($(this).val());
        });

    });
</script>


</head>

<body>
<div id="edit_panel"><img src="images/edit_panel.png" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="10,11,84,54" href="redirect.php" target="_self" />
    <area shape="rect" coords="425,12,571,53" href="index.php?option=com_content&view=article&id=41%20" />
    <area shape="rect" coords="688,11,781,55" href="delete.php" target="_self" />
    <area shape="rect" coords="783,10,888,55" href="redirect.php" target="_self" />
  </map>
</div>


<table id="products" class="products" cellpadding="0" cellspacing="0">
	<tr>
     <td></td>
     <td></td>
     <td class="tableTitles">Part Name</td>
     <td class="tableTitles">Part Number</td>
     <td class="tableTitles">Dimensions</td>
     <td width="371"><img src="images/barBgTop.png" /> </td>
    </tr>
    
  <form name="productEdit" action="" method="POST">

    <tr class='linky'>
    	<td class='padded'>
    		<div id='radio' class='radio'>
        		<input id='radio_1' type='radio' name='rdio' class='styled' value='901-0022-001'/>
            	<label for='radio_1' value='901-0022-001'></label>
        	</div>
      	</td>
        <td class='antenna'>
        	<img src='images/720-0001-000.jpg' width='140' height='140' />
        </td><td class='txtTD'>Broadband Antenna (Medium Gain, Omni Coverage)</td>
        <td id='num' class='txtTD'>901-0022-001</td>
        <td class='txtTD'>6” Dia., H 1.25”</td>
        <td class='bar' style= 'padding-left:200px;' background='images/barBG2.png'><img src='images/bar2.png' width='90px' height='19px'/></td>
    </tr>
    
    <tr class='linky'>
    	<td class='padded'>
        	<div id='radio' class='radio'>
            	<input id='radio_2' type='radio' name='rdio' class='styled' value='901-0012-001'/>
                <label for='radio_2' value='901-0012-001'></label>
            </div>
        </td>
        <td class='antenna'>
        	<img src='images/720-0002-000.jpg' width='140' height='140' />
        </td>
        <td class='txtTD'>Broadband Antenna (High Gain, Sector Coverage)</td>
        <td id='num' class='txtTD'>901-0012-001</td>
        <td class='txtTD'>H 4.45”, W 2.50”, L 8.92”</td>
        <td class='bar' style= 'padding-left:190px;' background='images/barBG2.png'>
        	<img src='images/bar2.png' width='50px' height='19px'/>
        </td>
    </tr>
    <tr class='linky'>
        <td class='padded'>
        	<div id='radio' class='radio'>
        		<input id='radio_3' type='radio' name='rdio' class='styled' value='901-0011-001'/>
        		<label for='radio_3' value='901-0011-001'></label>
        	</div>
        </td>
        <td class='antenna'>
        	<img src='images/720-0003-000.jpg' width='140' height='140' />
        </td>
        <td class='txtTD'>Broadband Antenna (Medium Gain, Sector Coverage)</td>
        <td id='num' class='txtTD'>901-0011-001</td><td class='txtTD'>H 3.37”, W 2.50”, L 4.57”</td>
        <td class='bar' style= 'padding-left:190px;' background='images/barBG2.png'>
        	<img src='images/bar2.png' width='50px' height='19px'/></td></tr><tr class='linky'><td class='padded'>
            	<div id='radio' class='radio'>
                	<input id='radio_4' type='radio' name='rdio' class='styled' value='901-0048-001'/>
                    <label for='radio_4' value='901-0048-001'></label>
                </div>
            </td>
            <td class='antenna'>
            	<img src='images/901-0048-001 S Band Antenna.png' width='140' height='140' />
            </td><td class='txtTD'>S-Band</td>
            <td id='num' class='txtTD'>901-0048-001</td>
            <td class='txtTD'>2.23"H x 2.2"W x 2.2"L</td>
            <td class='bar' style= 'padding-left:200px;' background='images/barBG2.png'>
            	<img src='images/bar2.png' width='20px' height='19px'/>
            </td>
        </tr> 
      </form>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td width="371"><img src="images/barBgBtm.png" /> </td>
    </tr>    
</table>
</body>
</html>


What I'm trying to do is to actually have an alert window pop-up and give me the 'value=' for the <input type="radio"> that is being clicked. I'm not being able to do that, even though I see nothing wrong with my code. Obviously, I'm not trying to just end there (at having an alert pop-up), I'm just using this method as a testing tool. Ultimately what I want to do is feed that value to a PHP/MySQL command to delete a row in a database that has that value. So if you can help me in both figuring out why the jQuery code isn't working and feeding the value to PHP/MySQL code it will be greatly appreciated.

<?R
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1