News Feed Like Facebook News feed

JavaScript
1

I am trying to create a Social Network site with a Social news feed like that of Facebook. On it I have multiple textarea and input field for user to comment. I used class instead of #id to identify the textarea and input field and the button since is more than one. The button work properly but the script only accept input from the first textarea and first input field only. My question: What am I supposed to do to make the script accept input from all the textarea and input fields? And also treat them differently?

           <form id="com" class="com" method="POST" >

                <img class="img-responsive img-circle img-sm" src="<?php echo base_url()?>img/Friends/guy-3.jpg" alt="Alt Text">
                <div class="img-push">


                    <input type="hidden"  class="status_id" name="status_id" value="<?php echo $post['spid']?>">
                    <textarea  name="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>


                  <div class="box-footer box-form">
                      <btn class="btn btn-azure btn-sm pull-right commentbt">Comment</btn>

Jquery to Post the comments:

                <script>
  $(document).ready(function(){
   $('.display_comment').load('<?php echo site_url('user/getcomments');? >');
 $('.commentbt').click(function(){

    var status_id = $('.status_id').val();
    var comment = $('.comment').val();
    if(status_id=='' || comment ==''){
        alert('Can not be Empty');
    }
    else {
      $.post("<?php echo site_url('user/postcomment'); ?>",{


          status_id: status_id,
          comment: comment

      },function(){
              $('.display_comment').load('<?php echo 
      site_url('user/getcomments');?>'); 
      $('.com')[0].reset();

      });  
    }

});

});

   </script>

I found out the script still give the status_id of the first textarea to the rest and also trigers the "alert(“Can not be empty”) meaning its not receiving any data input from the textarea.
I need help please.

2

So… first question is… why.

Or rather, I suppose, what is your intention.

Is your intention that when a user pushes any of the buttons, that it submits all comments from all the fields?
Referencing a group of things ($(‘.status_id’) is a group of objects) means that when you pull .val(), you’ll get the first value in the group. That’s how jQuery works.

If you want to process all of them, you’ll need to loop over the elements of the group.
If you want to process only the one the button was clicked next to, then you’ll need to identify the appropriate element. This can be done by ID fields, or by attempting to navigate the DOM to find the relevant fields.

3

I am trying to create a Post and commenting system like that of facebook. Comments are submitted and appended to the post on which is being commented. After several attempts to make it work, I found out that all the fields must be uniquely identified. So, I create a loop $i = 0, to add unique number to the elements Id

              <input type="hidden"  id="status_id<?php echo ++$i ?>"  class="status_id" name="status_id" value="<?php echo $post['spid']?>">
                <textarea  id="comment<?php echo ++$i ?>" name="comment" class="form-control input-sm comment" placeholder="Press enter to post 
           comment"></textarea>

So I have dynamic unique Id for the elements.
Another issue is how to get Jquery detect this Ids automatically and also get its values.
I tried

                 var status_id = $(this).find('input').attr('id')

It didnot work as expected because I want it trigered by the click of this button:

               <btn class="btn btn-azure btn-sm pull-right " id="commentbt<?php echo ++$i ?>">Comment</btn>

No luck yet.
But I hope you have understood what am trying to do majorly. If there is a better approach put me through please.

4

Well your buttons have an ID also. Because the event is triggered by clicking the button, $(this) refers to the button, rather than the form.

$(this).attr('id') will give you something like “commentbt1”, which you can then remove the ‘commentbt’ part of to find the correct item. $("#comment"+thefoundid).val()

The alternative method (walking the DOM) would be to walk up to the form element, and then down again to the comment: $(this).closest('form').find('textarea')

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.