Giter Club home page Giter Club logo

jquery-comments's Introduction

jquery-comments

jquery-comments is a jQuery plugin for implementing an out-of-the-box commenting solution to any web application with an existing backend. It provides all the UI functionalities and ties them to callbacks that let you easily define what you want to do with the data. The library is highly customizable and very easy to integrate thanks to a wide variety of settings.

Screenshot of jquery-comments

Features

  • Commenting
  • Replying (nested comments)
  • Editing comments
  • Deleting comments
  • Upvoting comments
  • Uploading attachments
  • Hashtags
  • Pinging users
  • Enabling/disabling functionalities
  • Localization
  • Time formatting
  • Field mappings
  • Callbacks
  • Fully responsive and mobile compatible
  • Miscellaneous settings

Demo

http://viima.github.io/jquery-comments/demo/

Quick start

1) Add the following to your HTML file

<link rel="stylesheet" type="text/css" href="css/jquery-comments.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-comments.js"></script>

2) Initialize the library

$('#comments-container').comments({
    getComments: function(success, error) {
        var commentsArray = [{
            id: 1,
            created: '2015-10-01',
            content: 'Lorem ipsum dolort sit amet',
            fullname: 'Simon Powell',
            upvote_count: 2,
            user_has_upvoted: false
        }];
        success(commentsArray);
    }
});

If you are not using Font Awesome for icons, you should replace the icons with custom images by overriding following options when initializing the library:

spinnerIconURL: '',
noCommentsIconURL: '',
closeIconURL: '',
upvoteIconURL: '',      // Only if upvoting is enabled
replyIconURL: '',       // Only if replying is enabled
uploadIconURL: '',      // Only if attachments are enabled
attachmentIconURL: '',  // Only if attachments are enabled

Dependencies

  • jQuery >= 1.9.0
  • Font Awesome (optional)
  • jquery-textcomplete (optional)

Documentation

http://viima.github.io/jquery-comments

Maintainers

Browser support

IE9+ and all modern browsers

Copyright and license

Code and documentation copyright 2020 Viima Solutions Oy. Code released under the MIT license.

jquery-comments's People

Contributors

adanski avatar bmaland avatar emannuelgiovannini avatar jessenieminen avatar jjtykkyl avatar juhoen avatar sadortun avatar shelane avatar tonikarttunen avatar vvornanen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-comments's Issues

Editing multiple comments failed due to wrong value of id

When Edit is clicked for two comments and then try to save or delete any of the editable comments, the id obtained in commentJSON argument of putComment API is something like 'c1' or 'c2'. But when try to edit one comment at a time, the API works fine.

Can you tell me a little bit how i am suppose to stored the comments?

So recently I am working a rails project, and thinking about adding a comment function. Then i saw your work there which is super awesome. However, I'm not quite sure how I could save those comments data into the rails database.
It's rails 4 and database should be mysql or sqlite. Can you show me some really basic and simple example if you guys happen to know about that. May be even better if it could be done without son
Thanks

Could we have a feature which load/refresh the comments every 5 seconds

I am new to Jquery, but realized this plugin is pretty cool. Now I would like to reload/refresh the comments container every 5 seconds, googled and tried, but the experience is not so good.

What I am looking for is that only some new comments being added or removed, not the whole div or page being refreshed.

Thanks!

enablePosting

Hello, thank you for this great project.
One suggestion that I believe would be quite useful is to introduce the "enablePosting": true/false so as to allow a read-only listing of the comments (for example users that are not registered are not allowed to post new comments but they should be able to read the existing ones).

Thanks in advance

is entry in jquery-comments valid

The following line 542 appears in jquery-comments.js:
if(commentId = textarea.attr('data-comment')) {
Webmatrix labels it as an error as well the equivalent statement in the minimized version.
I am still working my way through an understanding of jscript and still have a long way to go, but my experience as programmer tells me that this is a conditional statement that is always true because its argument merely sets the value of the variable. This conditional statement serves no function. Should it be "==" ?, or am I misunderstanding something?
There are also a dozen or more instances of variable lists ending with a unnecessary comma after the last entry which WebMatrix flags as errors. This is not a problem because the minimizing program seems to ignore them.

How created_by_current_user is supposed to work?

Hi,

I just need a clarification. I am not sure how the created_by_current_user field is supposed to work. When I create a new comment and store in DB commentJSON array with default value true, then I can see You as the user. However when any other user retrieves the comments, they also see You for comments that I created. Does it mean that each time the commentJSON is retrieved, the array must be checked for which user created it and set the created_by_current_user to false?

Sorting Newest, Oldest and Popular is not working on Chrome

I'm confused. I have implemented the callback and everything is working fine except the newest, oldest and popular sort. It's working fine in Firefox, but in Chrome the sort is not working. I'm using ISO 8601 time format, so I think the date format should be okay on multiple browser. Could you help figure me out what's wrong? I've spent 2 days without any luck :(

My site is: www.zetizen.com, in case you need to see the problem..

"Read only" mode

Hi!

For anonymous users, It would be nice to be able to use the plugin to display in "Read-Only" mode, having all the features (comment, reply, delete) disabled.

Have a good day,
Samuel

Limit comment text

Hello Viima,
how can I limit commenting text to 1000 char only.

thanks for this amazing plugin.

Remove trailing commas from lists

Some linters are picky when it comes to these unneeded trailing commas, let's remove them so that it's easier to recognise when there are actual mistakes worth considering.

Request originated from #3

conflict with ckeditor .textarea class name

I am running ckeditor on the same page as jquery-comments. Every time that I click on a jquery-comment textarea field I get the ckeditor toolbar popping up. Not sure why the ckeditor plugin is conflicting with jquery-comments....

Use HTML inside comment

Is there any way to use HTML inside the comment?

To do this i changed the following line:
1593: content.html(this.linkify(this.escape(commentModel.content)));

to
1593: content.html(this.linkify(commentModel.content));

jQuery.browser() removed in jQuery 1.9 and still used in Init function of jquery-comments

Hi !

When looking on jQuery changes, I saw that browser() function has been removed in version 1.9.

However, this function is still used in the last release of jquery-comments to detect mobile device, in Init function, line 200.

What's your opinion about the fact that jquery-comments is compatible with version 1.9 of jQuery ?
(Dependencies say jQuery >= 1.9.0)

(Sorry for my English and thanks for your work)

Yannick

Attachment Upload fakepath

Hi,
thanks for such a great plugin, works very well.
I have some issue with uploading image to server, I need convert image to dataUrl (base64) and send it to server, but the path created by plugin is wrong, so I cant reach the image. Maybe I am doing something wrong, can you please check it out?
Image attached with console print screen,
Thanks!
V.
2016-07-19 07_41_46-greenshot

How to I can get JSON comments from container?

Hello, I using this great component in my web app, but I need using JQuery get JSON comments, I already trying using this, but nothing happened.

var comments = $('#comments-container').data('comments').getComments();

Maybe can help..

Add fullname url

Hi,

It will be nice if we can add a new option on the comments array to add a link to the user profile page on the user name.

Makes sense?

Thanks in advance and thaks again for the plugin! It works like a charm.

How does this plugin know who I am?

I really like this plugin, but there's one thing I don't understand. How does it know who I am? There's no field to insert a name. Do you have an example of how to manage this?

Pagination

Hello.
I want to questions about 'pagination' data . Help !

newest & oldest sorting under firefox

Hi, we love this plugin. And we've found that if we change time format from "2015-01-01" to "2015-01-01 05:07:47" will result in the newest & oldest sorting not working under firefox. But which works fine for rest of the browsers.

An option of hiding all comments and appending total comments count, attachments count, replies count, etc..

comments
Hi
I am having multiple jquery-comments instances on my page and each contains several comments. All of it makes the page navigation a nightmare. I decided to hide all the comments by default and show them upon selection from the navigation panel. I managed to include a 'Hide' element to the Comments Navigation panel. I set it to default and all works fine but now I'd like to append some basic info with a total count of the comments, have a look at the attached picture. How can I do it?
Thanks
--Victor

Send comment on "Enter" event

Hi,

Many users are familiar with send a comment on Enter (thanks to Facebook?).

I think that it will be a good improvement to have the option of send the comment on Enter event.

Thanks!

Not sure what I am doing wrong

Unhandled rejection Error: isEnabledTest requires both the host and hostData at chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:949:24 at tryCatcher (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:5624:26) at Function.Promise.attempt.Promise.try (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:3069:27) at handleIncomingResponse (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:941:26) at Object.handleMessage (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:1024:19) at chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:854:15 at EventImpl.dispatchToListener (extensions::event_bindings:387:22) at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:94:26) at EventImpl.dispatch_ (extensions::event_bindings:371:35) at EventImpl.dispatch (extensions::event_bindings:393:17) at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:94:26) at dispatchOnMessage (extensions::messaging:320:22)

Unhandled rejection Error: isEnabledTest requires both the host and hostData at chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:949:24 at tryCatcher (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:5624:26) at Function.Promise.attempt.Promise.try (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:3069:27) at handleIncomingResponse (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:941:26) at Object.handleMessage (chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:1024:19) at chrome-extension://nenlahapcbofgnanklpelkaejcehkggg/iv-shared-client-code/chrome/tab.js:854:15 at EventImpl.dispatchToListener (extensions::event_bindings:387:22) at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:94:26) at EventImpl.dispatch_ (extensions::event_bindings:371:35) at EventImpl.dispatch (extensions::event_bindings:393:17) at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:94:26) at dispatchOnMessage (extensions::messaging:320:

I really liked your plugin and I really appreciate for sharing with us. I just integrate it to my project with all dependencies installed and linked. But still I am getting this errors in web browser console. Can you please help me with this?

Thank you in advance.

Posting new comments programmatically

Hello. I'm working on project with real-time commenting section using your library. So when one client posts a new comment via UI, I need to post this comment to other clients programmatically (using SignalR). Tell me, please, is it possible? I'm beginner in JavaScript and jQuery so I would be grateful for a little hint.
P.S. I've tried to add comment data manually with html, but it doesn't support all functionality.

Any new posts, edits, deletes are not updated.

When i try to comment and delete, all that stuff, it works fine. But when i refresh the page all the changes made reset to what was on the page originally.

I have used the code provided in the tutorial on my own, but not sure if i am missing something that saves.

Putting it out there, i am extremely new to jquery.

Firefox Issues

Hi.

Great plugin.
There is some Firefox issues
http://oi67.tinypic.com/m9o8ko.jpg

The plugin auto add new line but becuase is together with the text the new line shows as text only.
Also the Oldest button dont work well.

Any suggestions?
Regards.

support for multiple comments on a single page

We are working to implement this plugin on several sites through a framework. We provide the script automatically and it is included on the site. The include a div with a 'framework-comments' class and an id. We then do this:
$('.framework-comments').each(function(index, element) {
var ID = this.id;
$('#' + ID).comments({
... });
});

What we have noticed when two threads are placed on the same page, the first calls to get the comments work fine - they get the comments for the right ID. However, as soon as you go to post a new comment or reply, the ID remains that of the second div.

Any suggestions on how we might allow multiple threads on the same page?

unexpected page refresh when hitting reply button

I want to use the comment box within a form. However, if do the following:

 <form>
        <div id="comments-container"></div>
 </form>

the entire webpage refreshes when the reply button is clicked.

Is seems that when the button is created type="button" is not specified....

Getting started

I downloaded and installed the package exactly as shown. Used the sample code for a starting point.
On both the demo, and on the start up I have going. It fires a jquery / javascript error when you make a change to the text, and then of course the send button does not un-disable and the script is dead.

The error I get is

TypeError: this.commentsById[commentId] is undefined
var contentChanged = content != this.commentsById[commentId].content;

At line 545. If you look at the source code its looking for an attribute data-comments that does not exist on the textarea or its surrounding wrappers. I found the area in the code that defines the dom of that object. Tried adding it.

I'm a newbie here. I've done a lot of jquery work, and tried to debug this on my own. After a couple of hours I figured I'd better simply ask someone. Either there is something left out of the setup instructions, or I've missed something.

How to limit the word counts?

I am now using your comments framwork, it's really well. But I don't know how to limit the comment word counts and hope that you can help me solver this problem.

Setting to show Initial Comment Visible

This script work really great. However I'm stumbled upon on how to limit the initial comment visible. On our site, we can have like 200 comments and it push our bottom content way way ahead. Is it possible to have some setting to show for example only 20 comments and then if we push a button "Show All Comment" it will then show all the comments? Or if you don't have any plan to implement this, maybe you can show me on the right direction to achieve this :)? Thanks again ^^

Disable postComments

Hi,
I am trying to disable postComments to users without an account in my application, I almost have it but just wanted to ask if there is shorcut to do it like the ones in the script such as, I could not find it:
enableUpvoting: false,
enableEditing: false,

example: enable postComments: true/false.

Thank you very much

Attachments feature

Hello,

In my current project I need my user to be able to upload and attach files to theirs comments.
Can this feature be easily added here ? Do you have any advices to do so ?

Synchronizing the comment ID with an external source

We are using the jquery-comments plugin in our code and seek some guidance because we are not sure that this is an issue. We have created a SharePoint list which holds the comments and they are initially loaded into the plugin via an AJAX call.

Here is the sequence of events:

  1. we add a new comment via the plugin
  2. in the post handler we get the newly created comment and note that it has an ID prefixed with the letter 'C' and an ascending number based on the number of comments. The comment is correctly displayed in the page.
  3. We insert that record into a SharePoint list and it creates a new ID.

The issue we need to resolve is that the ID for the comment in memory needs to be identical to the one that we create in the SharePoint list. By the time we get the comment that the plugin creates in memory, we don't have a convenient way to change it.

We are considering adding a method onto the prototype to find and modify the comment that was just created. We need to do this because if the user does anything else to the comment that just got created then the temporary ID is used in the AJAX call and we fail on the SharePoint side. Note that if we close the comments plugin and reload the comments, then the records work just fine with the ID that we give it when the item is inserted into the SharePoint list.

We are asking for guidance on whether or not we should request a pull or perhaps you have an idea that would be less intrusive.

Thank you in advance for any thoughts.

Bug in the final version

Version for download on the site contains an error in time to comment. Check the console: Cannot read property 'content' of undefined

'Invalid Date' and 'Reply' not working

Hello,

I'm storing the comments to a database with Laravel via a post request.
Then I'm loading then again with a get request. However, first when I send the comment, a new item appears in the list but there is no text. When I refresh the page it appears. The comment is written correctly to the database.
When I'm loading the comments from the GET Request, everything works so far, but I can't get the date working (always displays "Invalid Date") and the reply buttons are not working anymore.
When I use the example without post and get requests as you have described in "2) Initialize the library", everything is working so far. But of course I want to save the comments to the database.
When I use the example without post and get requests as you have described in "2) Initialize the library", everything is working so far. But of course I want to save the comments to the database.

Here is some code:

    $('.comments_content').comments({
        profilePictureURL: 'https://app.viima.com/static/media/user_profiles/user-icon.png',
            enableUpvoting: false,
        roundProfilePictures: true,
        enableReplying: true,

        fieldMappings: {
          id: 'id',
          parent: 'parent',
          created: 'created_at',
          modified: 'updated_at',
          content: 'content',
          fullname: 'author_id',
          profilePictureURL: 'profile_picture_url',
          createdByCurrentUser: 'created_by_current_user'
        },
        postComment: function(commentJSON, success, error) {
            $.ajax({
                type: 'post',
                url: "{{ action('CommentsController@store') }}",
                data: {comment: commentJSON, cardid: clickedcardid},
                success: function(comment) {
                    success(comment)
                },
                error: error
            });
        }
    });




        getComments: function(success, error) {
            $.ajax({
                type: 'get',
                url: '{{ action('CommentsController@index') }}',
                success: function(commentsArray) {

                  // Only display the comments which are assigned to the clicked card
                  for(var i = commentsArray.length - 1; i >= 0; i--) {
                    if(commentsArray[i].card_id != clickedcardid) {
                      commentsArray.splice(i, 1);
                    }
                  }

                  for(var i=0; i<commentsArray.length; i++) {
                    commentsArray[i].profile_picture_url = 'https://app.viima.com/static/media/user_profiles/user-icon.png';
                  }

                  success(commentsArray)
                },
                error: error
            });
        }

So to sum up:

  • I can save the comments to a database and read them out
  • I do it via jQuery AJAX POST and GET Requests
  • Problem 1: When I post a comment, a new item appears in the list, however without the content and author displayed. First displayed after refresh.
  • Problem 2: When reading out the comments, it always says "Invalid Date"
  • Problem 3: When reading out, the reply button is not working.

Thanks for your help!

API to add a comment

What is the best way to add a comment from code? i.e. not the user doing it, but the comment list being updated dynamically in front of the users eyes.

More than 2 levels of nesting?

Maybe I'm just missing a configuration option, but is it not possible to do more than 2 levels of comments? In my setup I have root comments and when I reply, I get one level of nesting, so two levels total. Then when I click to reply to the first reply, which should create a comment that's three levels deep (root > reply > reply of reply) it looks like it's a reply to the original comment rather than a reply to the reply. Am I just doing something wrong? I noticed this was compared to Disqus but I just checked and Disqus definitely allows replies on replies. Not sure if there is a limit to how deep it will allow you to go.

On the back-end I have comment setup so I can go an unlimited number of levels and I passed in comments with parents that were replies... meaning comment is 1, reply was 2 with a parent of 1, reply of reply was 3 with a parent of 2, and so on, and it displays them as two levels. So they do all display, but just with proper levels.

In the even that only two levels are supported, is this something that could be added? I'd be willing to work on the functionality as it's something I need for my current project.

Font awesome icon problem

Hello,
Icons from fontawesome are broken when I integrate jquery-comments.
icon_problem

The problem come from the font-family: inherit; in the firsts lines of the css. If I remove this line everything work fine.

Cannot read property 'parent'

Hello,
I have a problem, if i use ajax in getComments always appears error Cannot read property 'parent', can you help me?

Thank you.

comments data not saved to file

Hi,

Comments on my site are not saved to comment-data.js file ones posted or edited.
Do I need anything more to be configured to have this? Any permissions to data file or something else?

I cannot find it in your docs.

Best regards
Rado

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.