Solved

Pass clicked row id to js function

Posted on 2011-02-25
17
484 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 82

Expert Comment

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

0
 
LVL 82

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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 82

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 82

Accepted Solution

by:
leakim971 earned 450 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 50 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 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