locked
Clicking on a table row with jquery/ajax RRS feed

  • Question

  • User556131299 posted

    I have a table with a link in one cell in each row.  When you click on a row, it calls the link via jquery with this code:

    $(document).ready(function() {

    $
    ('#example tr').click(function() {
       
    var href = $(this).find("a").attr("href");
       
    if(href) {
            window
    .location = href;
       
    }
    });

    });

    Note: I've tried this with and without $(document).ready

    The problem is that the link does an ajax partial postback and so the page is not refreshed (at least I think that's the problem).  So the first time you click, it works fine, but subsequent clicks don't work.  Thoughts on how I can get this to work?

    Thursday, June 28, 2012 4:46 PM

Answers

  • User556131299 posted

    I was able to correct it.  It has to do with ajax killing the javascript on a post back.  You have to wrap the event in a function and then calling it at the beginning and end of the ajax call:

    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
        function BeginRequestHandler(sender, args) {
            setRows();
        }
        function EndRequestHandler(sender, args) {
            setRows();
        }
    </script>

    Where "setRows()" is the function wrapper.  Ugly, but it works.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 29, 2012 7:15 AM

All replies

  • User-69873338 posted

    I didn't understand your problem exactly, if your code is somthing like this it must work fine, are you using AjaxPanel or what?

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#example tr').click(function () {
                var href = $(this).find("a").attr("href");
                if (href) {
                    window.location = href;
                }
            })
        });
    </script>
    <table>
        <tr class="example">
            <td>
                <a href="/?id=1">Link 1</a>
            </td>
            <td>
                <a href="/?id=2">Link 2</a>
            </td>
        </tr>
    </table>



    Thursday, June 28, 2012 6:41 PM
  • User556131299 posted

    The first time you click, it works.  Subsequent clicks do not.  Keep in mind that clicking the link is not calling a new page, it actually calls a modal dialog box where the user edits data.

    Thursday, June 28, 2012 6:45 PM
  • User-69873338 posted

    Can you post your real code? However there is another way to resolve this issue:

    <script language="javascript" type="text/javascript">
        function editData(id) {
            alert(id);
        }
    </script>
    
    <table>
        <tr class="example">
            <td>
                <a href="javascript:editData(1)">Link 1</a>
            </td>
            <td>
                <a href="javascript:editData(2)">Link 2</a>
            </td>
        </tr>
    </table>

    Isn't this way acceptable?

    Thursday, June 28, 2012 7:57 PM
  • User556131299 posted

    That is the javascript I'm using although I just changed the class name to #example for readability purposes.  As for an alert, that won't work.  When the link is clicked, it populates the fields in a panel with data in the row and then uses the modal popup extender to show the panel.

    I am not a javascript expert by any means, so I'm confused as to why the event only fires once.

    Friday, June 29, 2012 2:55 AM
  • User-69873338 posted

    Can you post your real code?

    Friday, June 29, 2012 7:01 AM
  • User556131299 posted

    I was able to correct it.  It has to do with ajax killing the javascript on a post back.  You have to wrap the event in a function and then calling it at the beginning and end of the ajax call:

    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
        function BeginRequestHandler(sender, args) {
            setRows();
        }
        function EndRequestHandler(sender, args) {
            setRows();
        }
    </script>

    Where "setRows()" is the function wrapper.  Ugly, but it works.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 29, 2012 7:15 AM