CODEWITHSUNDEEP
javascriptjqueryhtml
alwaysVBNET
alwaysVBNET

Reputation: 3310

Getting specific passed parameter from $(document).ready

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>

Upvotes: 0

Views: 59

Answers (1)

Erik Philips
Erik Philips

Reputation: 54638

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)”?

Upvotes: 1

Related Questions