As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward.
Here's an overview of the situation: I have a table enclosed within a div. Each row in the table represents a unique element. I have set it up so that when a link in each row is clicked, the corresponding data for that element is shown in a div next to the table. This aspect is functioning correctly.
My objective: I want the top of the popup div to align with the selected table row.
Below is a simplified version of my code:
<div id="container" style="display:inline-block">
<table>
<tr id="selected_row">
<td>
<a href="/gohere" onclick="updatePos('#param_detail_container');">
@Html.DisplayFor(model => item.Name)
</a>
</td>
</tr>
</table>
</div>
<div id="popupDiv" style="display:inline-block; position:absolute; ">
Content goes here...
</div>
Script snippet:
<script type="text/javascript" src="~/Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function updatePos(popupDiv) {
var top = $('#selected_row').offset().top;
popupDiv.css({ top: top + "px" }).show();
});
</script>
An error message I encounter states:
Microsoft JScript runtime error: Unable to get value of the property 'replace': object is null or undefined
The issue seems to be related to how I am setting the top attribute of the popupDiv. Any advice on resolving this?