Solved

Pass clicked row id to js function

Posted on 2011-02-25
17
479 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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…

757 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

17 Experts available now in Live!

Get 1:1 Help Now