?
Solved

Pass clicked row id to js function

Posted on 2011-02-25
17
Medium Priority
?
499 Views
Last Modified: 2012-05-11
I'm trying to get the id of a table row....  here's what I've got:

Basically, when I click a row, I need to pass that row's id to the showDialog function.  


 $(".jtable tr").click(function()
                         {
                              $(showDialog('currently selected row id')
                              );
                  return false;
                        });

});
0
Comment
Question by:MFredin
  • 9
  • 4
  • 4
17 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 34985268
var id = $(this).attr("id");

0
 
LVL 83

Expert Comment

by:leakim971
ID: 34985272
of if you click on a cell :

var id = $(this).parents("tr").attr("id");
0
 

Author Comment

by:MFredin
ID: 34985301
THanks! Sorry, I'm not very js fluent.... how would I use this in the code I sent?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Expert Comment

by:leakim971
ID: 34985561
I don't know.
I'm not sure to understand your code without the context.

I just answer for this part of your question : << I'm trying to get the id of a table row.... >>
0
 

Author Comment

by:MFredin
ID: 34985573
Basically just trying to replace 'currently selected row id' in the example in my original post with the row id of the clicked row.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1800 total points
ID: 34985619
Check this example :
<!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>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$(".jtable tr").click(function() {
			var id = $(this).attr("id");
			showDialog(id);
		});		
	});
	
	function showDialog(x) {
		alert(x);
	}
	
</script>
</head>
<body>
<table class="jtable" border="1" id="ThisIsTheTableId"><tr id="ThisIsTheRowId"><td id="ThisIsTheCellId">AZERTY</td></tr></table>
</body>
</html>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34985673
Nice! That works!
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34985676
<!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>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript">
var dblclickdelay = 250;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)
}

function myonclick(id)
{
	if ( clicktimeout == null ) clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)
}


$(document).ready(function() {
	$(".jtable tr").click(function() {
		myonclick($(this).attr("id"));
	});		
	$(".jtable tr").dblclick(function() {
		myondblclick($(this).attr("id"));
	});		
});

function showDialog(x) {
	alert(x);
}
	
</script>
</head>
<body>
<table class="jtable" border="1" id="ThisIsTheTableId"><tr id="ThisIsTheRowId"><td id="ThisIsTheCellId">AZERTY</td></tr></table>
</body>
</html>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34985779
Here's what I have:  The myonclick function seems to work, myondblclick doesn't.  Any ideas?
<script type="text/javascript">
var dblclickdelay = 250;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)
}

function myonclick(id)
{

	if ( clicktimeout == null ) clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);	  
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?load_id=" + id);
   return false;
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?edit_id=" + id);
   return false;	
}

	

	$(".jtable tr").click(function() {
		myonclick($(this).attr("id"));
	});		
	$(".jtable tr").dblclick(function() {
		myondblclick($(this).attr("id"));
	});	
		
});
</script>

<script type="text/javascript">

$(document).ready(function() {
   $("#latestLoadsDialogDiv").dialog({
           autoOpen: false,
           modal: true,
           height: 600,
           width: 920
       });
});
</script>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34985818
Here's a rearrange that makes a little more sense, but I don't have enough context to test it.

Q: You want to get row ids from a table.  Where are you defining the table itself?

<script type="text/javascript">
var dblclickdelay = 250;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)
}

function myonclick(id)
{

	if ( clicktimeout == null ) clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);	  
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?load_id=" + id);
   return false;
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?edit_id=" + id);
   return false;	
}


$(document).ready(function() {
   $("#latestLoadsDialogDiv").dialog({
           autoOpen: false,
           modal: true,
           height: 600,
           width: 920
       });
	$(".jtable tr").click(function() {
		myonclick($(this).attr("id"));
	});		
	$(".jtable tr").dblclick(function() {
		myondblclick($(this).attr("id"));
	});	
});
</script>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34985847
Here's the full code... sorry, should have included this before :)

Assume jquery is included on the page.
<script>
$().ready(function(){ 
{
$('.jtable > tbody > tr:odd').addClass('rowlight');
$('.jtable > tbody > tr:even').addClass('rowdark');
} 

$(".jtable th").each(function(){
 
  $(this).addClass("tableheading");
 
  });
  
 $(".jtable tr").hover(
     function()
     {
      $(this).children("td").addClass("ui-state-hover");
     },
     function()
     {
      $(this).children("td").removeClass("ui-state-hover");
     }
    );


var dblclickdelay = 250;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)
}

function myonclick(id)
{

	if ( clicktimeout == null ) clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);	  
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?load_id=" + id);
   return false;
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)
	
	$("#latestLoadsDialogDiv").dialog("open");
   $("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?edit_id=" + id);
   return false;	
}

	

	$(".jtable tr").click(function() {
		myonclick($(this).attr("id"));
	});		
	$(".jtable tr").dblclick(function() {
		myondblclick($(this).attr("id"));
	});	
		
});
</script>

<script type="text/javascript">

$(document).ready(function() {
   $("#latestLoadsDialogDiv").dialog({
           autoOpen: false,
           modal: true,
           height: 600,
           width: 920
       });
});
</script>

<!--- Detail Dialog --->
<div id="latestLoadsDialogDiv" title="Company Details">
    <iframe id="latestLoadsIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Ooops">Your browser does not support Iframe.</iframe>
</div>
	

<table align="center" class="jtable" id="jtable" style="width:100%;font-size:.9em;">
 <thead> 
            <tr>
              <th>SHIPPING</th>
              <th>FROM</th>
              <th>TO</th>		  
              <th>POSTED</th>
            </tr>
 </thead>
 <tbody>	
	                <tr id="#load_id#">
				<td>#UCASE(DATEFORMAT(ship_from,'DDD MMM DD'))#</td>                
				<td>#origin_city#, #origin_state#</td>
				<td>#destination_city#, #destination_state#</cfif></td>		 
				<td>#post_date#		
				</td>				            
			</tr>
</tbody>
</table>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34985861
Oh, jqueryUI too :)
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34986799
I seem to have gotten it working with this variation.  I had to add a couple of javascript libraries to the start of the file - not sure if these are the right ones - I am not a jQuery guy.

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
	$('.jtable > tbody > tr:odd').addClass('rowlight');
	$('.jtable > tbody > tr:even').addClass('rowdark');

	$(".jtable th").each(
		function()	{	$(this).addClass("tableheading");  }
	);

	$(".jtable tr").hover(
		function()  {     $(this).children("td").addClass("ui-state-hover");     },
		function()  {     $(this).children("td").removeClass("ui-state-hover");  }
	);

	$(".jtable tr").click(function()	{	myonclick($(this).attr("id"));		});		
	$(".jtable tr").dblclick(function() {	myondblclick($(this).attr("id"));	});	

	$("#latestLoadsDialogDiv").dialog({
		autoOpen: false,
		modal: true,
		height: 600,
		width: 920
	});
});

var dblclickdelay = 250;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)
}

function myonclick(id)
{
	if ( clicktimeout == null ) clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);	  

	$("#latestLoadsDialogDiv").dialog("open");
	$("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?load_id=" + id);
	return false;
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)

	$("#latestLoadsDialogDiv").dialog("open");
	$("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?edit_id=" + id);
	return false;	
}

</script>

<!--- Detail Dialog --->
<div id="latestLoadsDialogDiv" title="Company Details">
    <iframe id="latestLoadsIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Ooops">Your browser does not support Iframe.</iframe>
</div>
	

<table align="center" class="jtable" id="jtable" style="width:100%;font-size:.9em;">
 <thead> 
            <tr>
              <th>SHIPPING</th>
              <th>FROM</th>
              <th>TO</th>		  
              <th>POSTED</th>
            </tr>
 </thead>
 <tbody>	
	                <tr id="#load_id#">
				<td>#UCASE(DATEFORMAT(ship_from,'DDD MMM DD'))#</td>                
				<td>#origin_city#, #origin_state#</td>
				<td>#destination_city#, #destination_state#</cfif></td>		 
				<td>#post_date#		
				</td>				            
			</tr>
</tbody>
</table>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34987946
Hmmm. The myondblclick doesn't work for me.  When I single or double click, it always shows just the onclick alert, never the ondblclick alert.  Any ideas why ondblclick isnt working?
0
 
LVL 16

Assisted Solution

by:sjklein42
sjklein42 earned 200 total points
ID: 34988033
I tuned it up a little - see if this works better for you

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
	$('.jtable > tbody > tr:odd').addClass('rowlight');
	$('.jtable > tbody > tr:even').addClass('rowdark');

	$(".jtable th").each(
		function()	{	$(this).addClass("tableheading");  }
	);

	$(".jtable tr").hover(
		function()  {     $(this).children("td").addClass("ui-state-hover");     },
		function()  {     $(this).children("td").removeClass("ui-state-hover");  }
	);

	$(".jtable tr").click(function()	{	myonclick($(this).attr("id"));		});		
	$(".jtable tr").dblclick(function() {	myondblclick($(this).attr("id"));	});	

	$("#latestLoadsDialogDiv").dialog({
		autoOpen: false,
		modal: true,
		height: 600,
		width: 920
	});
});

var dblclickdelay = 500;	// msec to recognize double click
var clicktimeout;

function myonclickaction(id)
{
	clicktimeout = null;
	alert('onclick '+id)

	$("#latestLoadsDialogDiv").dialog("open");
	$("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?load_id=" + id);
}

function myonclick(id)
{
	if ( clicktimeout != null ) clearTimeout(clicktimeout);
	clicktimeout = setTimeout("myonclickaction('"+id+"')", dblclickdelay);	  
	return false;
}

function myondblclick(id)
{
	clearTimeout(clicktimeout);
	clicktimeout = null;
	alert('ondblclick '+id)

	$("#latestLoadsDialogDiv").dialog("open");
	$("#latestLoadsIframeId").attr("src","Loads/loadDetails.cfm?edit_id=" + id);
	return false;	
}

</script>

<!--- Detail Dialog --->
<div id="latestLoadsDialogDiv" title="Company Details">
    <iframe id="latestLoadsIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Ooops">Your browser does not support Iframe.</iframe>
</div>
	

<table align="center" class="jtable" id="jtable" style="width:100%;font-size:.9em;">
 <thead> 
            <tr>
              <th>SHIPPING</th>
              <th>FROM</th>
              <th>TO</th>		  
              <th>POSTED</th>
            </tr>
 </thead>
 <tbody>	
	                <tr id="#load_id#">
				<td>#UCASE(DATEFORMAT(ship_from,'DDD MMM DD'))#</td>                
				<td>#origin_city#, #origin_state#</td>
				<td>#destination_city#, #destination_state#</cfif></td>		 
				<td>#post_date#		
				</td>				            
			</tr>
</tbody>
</table>

Open in new window

0
 

Author Comment

by:MFredin
ID: 34988592
That did it!  Thanks so much!!!!!!
0
 

Author Closing Comment

by:MFredin
ID: 34988595
Thank you so much!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question