[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Pass clicked row id to js function

Posted on 2011-02-25
17
Medium Priority
?
497 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 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

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!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

649 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