Access RepeaterItem from JavaScript for accessing child controls

Question

I have a repeater (for content posts) which contains an update panel, which in turn, contains another repeater as a (child for comments).

What I am trying to achieve is having a user comment/liking on a post. The values are verified using JavaScript/JQuery and sent to the server using PageMethods. I managed to get the UpdatePanel to refresh from JavaScript. The problem I am facing is that I need to somehow find the Posts RepeaterItem so that I can create an instance of the Comments Repeater in order to rebind it to the data source which would make the users comment appear after they enter it.

I tried searching online for a couple of days now but no one seems to address this issue using nested repeaters mixed with JavaScript and update panels etc. I don't mind a full page postback and I do not mind changing the structure of my page if necessary. The only thing that I would like is that the user stays on the same place on the page when this process happens and I am worried that with a complete page refresh, the user will be navigated back to the top of the page. JavaScript is the right way to do it for immediate feedback. I am however new to JavaScript in ASP and C# so it's proving to be a bit of a challenge.

Structure

Repeater (Posts)
|
---- Update Panel (for refreshing childeren from JavaScript)
    |
    ---- Repeater (Comments)

ASP Code


  
  
    
      
        
          
             
               
                 
                   
                     
                        
                           
                          <%#Eval("FullName") %>
                        
                        
                          <%#Eval("ActivityStreamTitleHTML") %>
                        
                      
                      
                        
                          <%#Eval("TimeAgo") %>
                        
                      
                    
                  
                
                
                  <%#Eval("ActivityStreamContentHTML") %>
                
                
                  
                    
                      
                        
                        
                          
                          
                          <%#Eval("LikeCount") %>
                          <%#Eval("CommentCount") %>
                        
                        
                      
                      
                        
                          
                        
                        
                          
                        
                        
                          
                        
                        
                          
                            
                            
                              
                                
                                  
                                    
                                      
                                        
                                      
                                      
                                        <%#Eval("Author") %>
                                      
                                    
                                  
                                  
                                    <%#Eval("TimeAgo") %>
                                  
                                
                                
                                   
                                  
                                
                                
                                  
                                    
                                      <%#Eval("Comment") %>

JavaScript

$(document).ready(
  function ()
    {
      $('[id*=btnLike]').click(function (event) {
        debugger;
        event.preventDefault(); //preventing button's default behavior
    
        var ActivityStreamID = $(this).find("input[type=hidden]").val();
        var UserID = document.getElementById('<%= hfUserID.ClientID %>').value;
    
        var element = $(this).parent().parent().parent();
    
        var result = PageMethods.LikeActivityStream(ActivityStreamID, UserID, onPostLikeSuccess, onPostLikeFailure);
        UpdateUpdPanel(element);
      });
    
      $('[id*=btnComment]').click(function (event) {
        debugger;
        event.preventDefault(); //preventing button's default behavior
        var ASID2 = $(this).find("input[type=hidden]").val();
    
        var element = $(this).parent().parent().parent();   //get the update panel
        var commentdiv = element.find(".commentsDiv");      // find commentsDiv in the update panel
        commentdiv.css("display", "block");                 // set the text to red as a test.
      });
    
      function UpdateUpdPanel(element) {
        __doPostBack(element, '');
      }
    
      function onPostLikeSuccess(result) {
        //refresh repeater / update panel ?
      }
    
      function onPostLikeFailure(result) {
        likeerror();
      }
    
      function likeerror() {
        swal({
          title: 'Uh-Oh!',
          text: 'Something went wrong while liking this post! Please try again and if the problem persists, please contact the system administrator.',
          type: 'error'
        });
      }
    });

    $(document).on("click", ".post-Comment", function () {
        
      var ActivityStreamID = $(this).data('id');
      var UserID = document.getElementById('<%= hfUserID.ClientID %>').value;
    
      var element = $(this).parent().parent();
      var element2 = $(this).parent().parent().parent();
      var commentboxdiv = element.find(".commentBoxDiv");
      var commentbox = commentboxdiv.find(".commentBox");
      var comment = commentbox.val();
    
      if (comment != "") {
        commentboxdiv.removeClass('has-error');
        var result = PageMethods.CreateActivityStreamComment(ActivityStreamID, comment, UserID, onPostCommentSuccess, onPostCommentFailure, element2);
      }
      else {
        commentboxdiv.addClass('has-error');
      }
    
      function onPostCommentSuccess(result, context) {
        //refresh repeater / update panel?
        debugger;
        var element = context;
        UpdateUpdPanel(element);
      }
    
      function UpdateUpdPanel(element) {
        debugger;
        __doPostBack(element, '');    
      }
    
      function onPostCommentFailure(result) {
        commenterror();
      }
    
      function commenterror() {
        swal({
          title: 'Whaaaa?!',
          text: 'Something went wrong while posting your comment! Please try again and if the problem persists, please contact the system administrator.',
          type: 'error'
        });
      }
    });

C# code (refreshing comments repeater in update panel)

protected void UpdPnlComments_Load(object sender, EventArgs e)
{
  // Missing code here to create an instance of the rptSocialData and rptComments repeaters
  // so that they can be data bound
  // hfActivityStream will also have to be accessed

  DatabaseHelper dh = new DatabaseHelper();

  DataTable dtSocialData = new DataTable();
  dtSocialData = dh.GetActivityStreamSocialData(hfActivityStreamID.Value);
  rptSocialData.DataSource = dtSocialData;
  rptSocialData.DataBind();

  DataTable dtComments = new DataTable();
  dtComments = dh.GetActivityStreamComments_All(hfActivityStreamID.Value);
  rptComments.DataSource = dtComments;
  rptComments.DataBind();
}

Example of how I achieve this in the OnDataBound method completely server side

protected void rptActivityStream_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
        Repeater rptSocialData = (Repeater)e.Item.FindControl("rptSocialData");
        Repeater rptComments = (Repeater)e.Item.FindControl("rptComments");

        HiddenField hfActivityStreamID = (HiddenField)e.Item.FindControl("hfActivityStreamID");

        DatabaseHelper dh = new DatabaseHelper();

        DataTable dtSocialData = new DataTable();
        dtSocialData = dh.GetActivityStreamSocialData(hfActivityStreamID.Value);
        rptSocialData.DataSource = dtSocialData;
        rptSocialData.DataBind();

        DataTable dtComments = new DataTable();
        dtComments = dh.GetActivityStreamComments_All(hfActivityStreamID.Value);
        rptComments.DataSource = dtComments;
        rptComments.DataBind();
    }
}

Access RepeaterItem from JavaScript for accessing child controls

Answers (1)

Related Questions