Getting specific passed parameter from $(document).ready

Question

I have a gridview which I want it's rows to expand and display the passed BatchID. At the moment I'm using href="javascript:switchViews('div<%# Eval("BatchID")%>', 'one');" to pass the information but I can't get the BatchID on the Javascript end.

At the javascript end I should get this information to assign my new rows with an ID so when I toggle them, they don't all get removed, but only the corresponding ones. At the moment, all created tr's get to be removed from every row if toggled and also the text "Hide Details" remains on other rows which are not clicked but their nested tr's get removed.

I have tried to get the BatchID from the params but I don't know how. Any ideas for the above two problems?

<script type="text/javascript">
    $(document).ready(function (params) {

        $('.showDetails').click(function () {
            // Show Details DIV
            $(this).closest('tr').find('.details').toggle('fast');
            // Return false to disable default postback on click of a <a> element
            return false;
        }).toggle(
            function () {
                // Trigger text/html to toggle to when hiding.
                $(this).html('Hide Details').stop();
                $(this).closest("tr").after("<tr class='" + event.id + "'><td></td><td colspan = '999'><div>" + '111' + "</div></td></tr>");
                // $(this).closest('tr').find('.details').append('<div class=' + 'shit' + '>3399</div>');

            },
            function () {
                // Trigger text/html to toggle to when showing.
                $(this).html('Show Details').stop();
                //$(this).find('.zoom').remove();
                $('tr.' + event.id).remove();
            }
        );
    });
</script>

Gridview:

   <asp:TemplateField>
            <ItemTemplate>

               <a class="showDetails" href="javascript:switchViews('div<%# Eval("BatchID")%>', 'one');">Show Details</a>

            </ItemTemplate>
    </asp:TemplateField>

I highly recommend you don't mix jQuery and inline javascript. — Erik Philips, Apr 20 '16 at 16:45
@ErikPhilips I am not sure how to proceed. I don't have much experience on client side. — alwaysVBNET, Apr 20 '16 at 16:46

score 1 · Accepted Answer · edited May 23 '17 at 12:07

I highly recommend reading Decoupling Your HTML, CSS, and JavaScript.

I can't get the BatchID on the Javascript end.

Lets add that to the HTML in a non-coupled way:

(https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)

<a class="showDetails" data-batchid="<%# Eval("BatchID")%>" href="javascript:void(0)">Show Details</a>

Then update your click to get the value and make the call:

(https://api.jquery.com/jquery.data/)

$('.showDetails').click(function () {

  // Show Details DIV
  $(this).closest('tr').find('.details').toggle('fast');

  var batchId = $(this).data('batchid');
  switchViews(batchId, 'one');
})....

I added a valid Href and remove the return false:

Href attribute for JavaScript links: “#” or “javascript:void(0)”?

Getting specific passed parameter from $(document).ready

1 Answers1