javascript function in ASP.NET Repeater

Question

I have a repeater in an ASP.NET UpdatePanel as follows;

<asp:UpdatePanel ID="rptGalleries" runat="server">
<ContentTemplate>
    <asp:Repeater ID="rptAddPhotoGalleries" runat="server">
        <ItemTemplate>
            <div>
                 <input type="checkbox" id="chkNews" data-newsid='<%# Eval("NewsID") %>' runat="server" onclick="javascript:markNews($(this).data('newsid'));" />
            </div>
        </ItemTemplate>
     </asp:Repeater>
</ContentTemplate>

And I use the following javascript within the element of the HTML;

<script type="text/javascript">
    $(document).ready(function () {
        function markNews(nID) {
          var $span = $('span[data-newsid="' + nID + '"]')
          $span.hide('slow');
        }
    });
</script>

when I click on the resulting checkbox, I get an error in the console as follows;

ReferenceError: markNews is not defined
javascript:markNews($(this).data('newsid'));

Anyone have any ideas?

Linus Caldwell · Accepted Answer · 2013-05-07 18:02:58Z

5

You should define your function outside like in this demo:

<script type="text/javascript">
    function markNews(nID) {
        var $span = $('span[data-newsid="' + nID + '"]');
        $span.hide('slow');
    }
</script>

The jQuery $(document).ready(function () { defines an inner scope, so your function is only accessible inside.

An alternative would be writing an extension:

$(document).ready(function () {
    $.fn.markNews = function (nID) {
        var $span = $('span[data-newsid="' + nID + '"]');
        $span.hide('slow');
    }
});

You can call that function directly on the element like in

<input type="checkbox" id="chkNews" data-newsid='1' runat="server"
       onclick="javascript:$(this).markNews($(this).data('newsid'));" />

Here is a demo.

With that said, this could even be improved by reading the id inside the function (demo):

$.fn.markNews = function () {
    var nID = $(this).data('newsid'),
        $span = $('span[data-newsid="' + nID + '"]');
    $span.hide('slow');
}

My suggestion for a final solution

To avoid unnecessary code, I would use the function in outer (global) scope and call it within a jQuery event:

function markNews() {
    var nID = $(this).data('newsid'),
        $span = $('span[data-newsid="' + nID + '"]');
    $span.hide('slow');
}

$(document).ready(function () {
    $('#Ctl_rptAddPhotoGalleries > input').on('click', markNews);
});

Of course #Ctl_rptAddPhotoGalleries has to be replaced with the rendered id (e.g. '#<%=rptAddPhotoGalleries.ClientID%> > input').

With that, your <input/>s can be as clean as

<input type="checkbox" data-newsid='<%# Eval("NewsID") %>' runat="server" />

Here is a demo.

edited May 7, 2013 at 18:02

answered May 7, 2013 at 16:58

Linus Caldwell

11.1k12 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Subliminal Hash Over a year ago

Thank you for the detailed answer. For anyone having a similar problem who might visit this post in the future, I have chosen the option to define the function outside. I have not tried writing the extension, but it gave me a great idea on how to create extensions for more commonly used functions. Thanks again...

Justin · Accepted Answer · 2013-05-07 17:01:34Z

1

Because you have your function definition wrapped in the document ready event, the html is parsed and rendered before the function is defined. That is why it gives that error.

You should place it outside of the ready event and anywhere before the element in question that relies on it.

answered May 7, 2013 at 17:01

Justin

3,3953 gold badges18 silver badges27 bronze badges

1 Comment

Subliminal Hash Over a year ago

Thank you @Justin your answer is actually correct but I had to choose the answer that was written first and had examples for future visitors having the same problem. I gave you an upvote though.

Ortiga · Accepted Answer · 2013-05-07 17:06:46Z

0

The function markNews only existing in the scope of the anonymous function that you pass for ready. Therefore, you can't assign it outside it's scope.

But you don't need to create a named function for this (unless you need to call that function in other places not shown in sample code):

$(function(){
    $("#<%=rptAddPhotoGalleries.ClientId %> span").click(function(){
        $(this).hide('slow');
    });
});

answered May 7, 2013 at 17:06

Ortiga

8,8466 gold badges45 silver badges74 bronze badges

Comments

Win · Accepted Answer · 2013-05-07 17:20:13Z

0

You want to input instead of span, because there is no span tag in your repeater control.

<script type="text/javascript">
    function markNews(nID) {
        var $input = $('input[data-newsid="' + nID + '"]');
        $input.hide('slow');
    }
</script>

answered May 7, 2013 at 17:20

Win

62.4k13 gold badges106 silver badges190 bronze badges

1 Comment

Subliminal Hash Over a year ago

Nice observation @Win, since I could never able to get inside the function, I never run into this problem. FYI, before I used a standard HTML checkbox with an attribute of runat="server", I had an ASP.NET CheckBox which renders a span around it.

VolkanCetinkaya · Accepted Answer · 2023-10-25 18:07:26Z

0

They have already said many times above that it does not work because you wrote it in $(document).ready.

Everyone; He tried to get the data he already had using javascript.

Instead of writing directly; Why are you trying to learn with javascript?

<input type="checkbox" id="chkNews" data-newsid='<%# Eval("NewsID") %>' runat="server" onclick='<%# "markNews(" + Eval("NewsID") + ");" %>' />

Isn't it easier to create the onclick function this way?

onclick='<%# "markNews(" + Eval("NewsID") + ");" %>'

edited Oct 25, 2023 at 18:07

answered Oct 25, 2023 at 17:59

VolkanCetinkaya

6998 silver badges15 bronze badges

Collectives™ on Stack Overflow

javascript function in ASP.NET Repeater

5 Answers 5

My suggestion for a final solution

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

My suggestion for a final solution

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related