如何使我的JavaScript在转发器中工作？

Question

I have an asp.net project using a repeater.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </HeaderTemplate>
        <ItemTemplate>                
            <div id="myNest" class="grid">
            <div class="imgholder">
                <img src="<%# Eval("ImageAlt1")%>" />
            </div>        
            <strong><%# Eval("ItemName")%> <bdo style="color:green;">$<%# Eval("ItemPrice")%></bdo></strong>
            <p class="test"><%# Eval("ItemDescription")%></p>
            <div style="color:red; font-size:small;"><asp:Label ID="lblExp" Text='<%# Bind("CreateDate") %>' runat="server" /></div>
            <div class="meta"><%# Eval("Email")%></div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </FooterTemplate>

and some javascript to shorten the ItemDescription

<script type="text/javascript">
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
</script>

For whatever reason the javascript cannot see the items within the repeater. How can I fix this?

The error is Uncaught TypeError: Cannot read property substring of undefined

Answer 1

Two possible issues here:

1. JS runs before relevant markup is rendered. To fix that, just wrap your js in some kind of document load handler:

    $(function() { var after = 5; var html = $(".grid p.test").html(); html = html.substring(0, after) + "<span> ...</span>"; $(".grid p.test").html(html); }); 

2. html() call gives you inner html of the first item in the list of selector matches. You might what to do this for all found items, in which case put your html manipulation in each() . And consider text instead of html by the way, it looks more relevant to your case.

Answer 2

I suspect your script is running before the DOM is loaded. Either move that script tag to just above your </body> tag or wrap your script like this:

<script type="text/javascript">
  $(function () { // equivalent to $(document).on('ready', function...
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
  });
</script>

The function passed in will only run after the DOM is ready to be parsed. Meaning your logic won't run until the whole page is ready.