Question

As another post I’ve made noted, I don’t have much experience with jQuery, and I apologize for that. What I’m trying to do seems fairly simple.

Overview:
I have a table wrapped in a div. Within that table, each row represents a distinct element. I have it setup such that when a link is clicked in each row, the corresponding data for that element is displayed in a div next to the table. This part works.

What I’m trying to do:
I would like the top of the popup div to display inline with the table row that is selected.

Here’s my simplified 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; ">
        Contenet in here...
    </div>

Script:

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

I receive the following error:

    Microsoft JScript runtime error: Unable to get value of the property 'replace': object is null or undefined

‘replace’ is located inside of jquery1.6.2.min.js. I’m assuming this has something to do with how I’m trying to set the top attribute of the popupDiv. Any suggestions?

Answer 1

function must be global, so put it outside ready:

/*$(document).ready(function() {

});*/

function updatePos(popupDiv) {
      var top = $('#selected_row').offset().top;
      $(popupDiv).css({ top: top + "px" }).show();
   }

in your case no need to use $(document).ready