Solved

Pass clicked row id to js function

Posted on 2011-02-25
17
481 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now