What is the best way to incorporate JavaScript in a repeater?

Question

What is the best way to incorporate JavaScript in a repeater?

I am currently working on an asp.net project that involves 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>

Additionally, I have included a JavaScript function to truncate the ItemDescription text.

<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>

However, there seems to be an issue where the JavaScript cannot access the elements within the repeater. How can I resolve this issue?

Currently, the error message shown is Uncaught TypeError: Cannot read property substring of undefined

javascript c#asp.net substring

Answer 1

Answer №1

There are a couple of potential issues to address in this situation:

One issue could be that the JavaScript is running before the relevant markup is fully rendered. To resolve this, ensure that your JavaScript is wrapped within a document load handler like so:
```
$(function() {
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
});
```
Another consideration is that the html() method retrieves the inner HTML of only the first matched element in the selector. If you need to manipulate all matched elements, utilize the each() function. Additionally, think about using the text() method instead of html() for a more appropriate solution in this case.

Answer 2

There are a couple of potential issues to address in this situation:

One issue could be that the JavaScript is running before the relevant markup is fully rendered. To resolve this, ensure that your JavaScript is wrapped within a document load handler like so:
```
$(function() {
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
});
```
Another consideration is that the html() method retrieves the inner HTML of only the first matched element in the selector. If you need to manipulate all matched elements, utilize the each() function. Additionally, think about using the text() method instead of html() for a more appropriate solution in this case.

Answer 3

Answer №2

It seems like your script may be executing before the DOM is fully loaded. To ensure that your script runs after the DOM is ready, you can either move the script tag just above the closing </body> tag or wrap your script within a <script> tag 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>

By passing a function to the jQuery $(function () { }) method, you can ensure that your logic will only execute after the DOM has finished loading, guaranteeing that your script will run only when the entire page is ready.

Answer 4

It seems like your script may be executing before the DOM is fully loaded. To ensure that your script runs after the DOM is ready, you can either move the script tag just above the closing </body> tag or wrap your script within a <script> tag 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>

By passing a function to the jQuery $(function () { }) method, you can ensure that your logic will only execute after the DOM has finished loading, guaranteeing that your script will run only when the entire page is ready.

What is the best way to incorporate JavaScript in a repeater?

Answer №1

Answer №2

Similar questions

Creating a JSON object using various inputs through AngularJS

Utilizing Array in ReactJS with the Power of Hooks

"Duplicate content issue with ng-transclude causing element to render twice

Transform various tables enclosed in separate div elements into sortable and filterable tables

Introducing the Generic DefaultWait for Webdriver

Navigating through the Document Object Model within a table

Executing a NodeJS function from a JavaScript function

Ways to ensure the title changer works seamlessly for everyone

Submit a single data value to two separate models in JSON format using MongoDB

At times, the animation in SetInterval may experience interruptions

JavaScript for Office Spreadsheet Titles

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

Ways to display a different div when clicking on a div?

Discovering the method to access a local function within a static function in Javascript ES6 (ES2015) or Typescript

Empty canvas when Material UI Modal transitions states

Having trouble accessing my API through localhost with NextJS

Error 404 in Angular HTTP Request

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

A guide on how to alternate between ng-hide and ng-show using separate controllers by utilizing a shared factory toggle state instance

Navigating and exploring data stored in a mongoose database