Help Please to Make Inline Commenting Unique link by link

[a9879s7dfsd]

Hi Tsachi,

Thanks for making a fantastic inline commenting plugin! I'm a novice, but I've been able to implement it for my context, with one big problem.

I'm working on a Google Chrome extension in which I'd like users to be able to comment on the links on a given page. I'd like a unique discussion for each unique link, but right now commenting on any link makes that comment show up in every other discussion.

The links on that page are updated everyday, but each one has a unique "name" attribute".

Could you please take a look at the attached screenshot and let me know if my code could be modified so that comments on any one link don't show up in the discussions for the other links?

Thank you! Dmitry

Here's the relevant code:

//ensure all the links on the page get their own discussions by setting the data-disqus-identifier to a unique value $("strong a").each(function (index) { var idFromName = $(this).attr("name"); $(this).wrap(""); $(this).attr("data-disqus-identifier", idFromName); });

disqus_shortname = 'eslcafe'; jQuery("strong a").inlineDisqussions({ identifier: 'dv_discussion', highlighted: true, displayCount: true, position: 'right', maxWidth: 600 });

[tsi]

Hard to say without a live example, but the fact that you call the inlineDisqussions method on links with a [data-disqus-identifier] attribute might raise issues. Could you use the jobLink wrapper instead? Try something like -

// Add a unique ID
$(".jobLink").each(function (index) {
  var id = $(this).find('a[name]').attr('name');
  $(this).attr("data-disqus-identifier", id);
}

disqus_shortname = 'eslcafe';
jQuery(".jobLink").inlineDisqussions({
  highlighted: true,
  maxWidth: 600
});

[a9879s7dfsd]

Thank you so much for your helpful reply!

I've been trying, but I haven't had much luck getting this code to result in link-specific comments. The problem is still that commenting on any particular link makes a global comment that is shown for all other links.

If you don't mind, I would appreciate it if you took a look at the live code. I didn't want to bother you with that initially since it's for my Chrome extension, but I can see that I really need your help. The extension is for Dave's ESL Cafe Job Board, which is where expat English teachers like me go to find jobs. It's a very poorly constructed website, so the extension adds some features via basic javascript & CSS injection.

To see the live code, could you please install the extensionhttps://chrome.google.com/webstore/detail/dmitrys-esl-cafe/jkdgbgeainpmdadglankhhbnbnljpcfn and then visit the ESL Cafe Korean job board http://www.eslcafe.com/jobs/korea/? I'll also provide you with the raw extension source if it helps.

Thank you again!

Dmitry

On Sun, Feb 2, 2014 at 11:38 PM, Tsachi Shlidor notifications@github.comwrote:

Hard to say without a live example, but the fact that you call the inlineDisqussions method on links with a [data-disqus-identifier]attribute might raise issues. Could you use the jobLink wrapper instead? Try something like -

// Add a unique ID $(".jobLink").each(function (index) { var id = $(this).find('a[name]').attr('name'); $(this).attr("data-disqus-identifier", id); }

disqus_shortname = 'eslcafe'; jQuery(".jobLink").inlineDisqussions({ highlighted: true, maxWidth: 600 });

Reply to this email directly or view it on GitHubhttps://github.com/tsi/inlineDisqussions/issues/7#issuecomment-33901825 .

[tsi]

Here's what I did, inside the browser's console, which seemed to work -

First I had to add jQuery

// Add jQuery
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

Then I've added inlineDisqussions CSS and JS

// Add inlineDisqussions CSS
var iDisCSS = document.createElement('link');
iDisCSS.type = "text/css";
iDisCSS.rel = "stylesheet";
iDisCSS.href = "http://tsi.github.io/inlineDisqussions/stylesheets/inlineDisqussions.css";
document.getElementsByTagName('head')[0].appendChild(iDisCSS);

// Add inlineDisqussions JS
var iDis = document.createElement('script');
iDis.src = "http://tsi.github.io/inlineDisqussions/inlineDisqussions/inlineDisqussions.js";
document.getElementsByTagName('head')[0].appendChild(iDis);

The I add the unique ID to the wrapper

// Add the unique ID
jQuery(".jobLink").each(function() {
  var id = jQuery(this).find('a[name]').attr('name');
  jQuery(this).attr("data-disqus-identifier", id);
});

And eventually, run the script

// Run it
disqus_shortname = 'eslcafe';
jQuery(".jobLink").inlineDisqussions({
  highlighted: true,
  maxWidth: 600
});

Now your last problem is making it visually more usable, but I guess it would just take a few lines of css.

[a9879s7dfsd]

Thanks again for trying this out!

Both this code and the one you suggested before result in the inlineDisqussions "+" getting added to every ".jobLink" successfully. However, when the user clicks on the "+" and adds a comment, that comment is global to every other "+" as well. In other words, clicking on any "+" the first time shows all of the other comments ever made on all of the other "+"'s together. This is the behavior I would like to avoid, since I would like user comments to be unique for each ".jobLink".

Here is the full js source file for my extension, which includes the code you have provided: https://dl.dropboxusercontent.com/u/13056682/background.js

I am embarrassed that you will see my javascript skills are so lacking.

The Chrome extension's manifest.js file is where external functions get included, including jQuery and your .js & .css. It looks like this

"contentscripts": [ { "js": [ "jquery-2.0.2.min.js","background.js","inlineDisqussions.js"], "css": ["customStyles.css","inlineDisqussions.css"], "matches": [ "http://.eslcafe.com/job_"]

As you can see, I am using jQuery 2.0.2. Could that be the problem?

Again, thank so much for taking the time to work through this with me!

Dmitry

On Wed, Feb 5, 2014 at 6:19 AM, Tsachi Shlidor notifications@github.comwrote:

Here's what I did, inside the browser's console, which seemed to work -

First I had to add jQuery

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

Then I've added inlineDisqussions CSS and JS
```// Add inlineDisqussions CSS
var iDisCSS = document.createElement('link');
iDisCSS.type = "text/css";
iDisCSS.rel = "stylesheet";
iDisCSS.href = "http://tsi.github.io/inlineDisqussions/stylesheets/inlineDisqussions.css";
document.getElementsByTagName('head')[0].appendChild(iDisCSS);

// Add inlineDisqussions JS
var iDis = document.createElement('script');
iDis.src = "http://tsi.github.io/inlineDisqussions/inlineDisqussions/inlineDisqussions.js";
document.getElementsByTagName('head')[0].appendChild(iDis);

The I add the unique ID to the wrapper
```// Add the unique ID
jQuery(".jobLink").each(function() {
var id = jQuery(this).find('a[name]').attr('name');
jQuery(this).attr("data-disqus-identifier", id);
});

And eventually, run the script
```// Run it
disqus_shortname = 'eslcafe';
jQuery(".jobLink").inlineDisqussions({
  highlighted: true,
  maxWidth: 600
});

Now your last problem is making it visually more usable, but I guess it
would just take a few lines of css.

## 

Reply to this email directly or view it on GitHubhttps://github.com/tsi/inlineDisqussions/issues/7#issuecomment-34108342
.

[tsi]

Could you please pack your extension for me (with my code included) so I could reproduce the bug you experience? I seem to get a unique disqus identifier for every job offer so I see no problem.

[a9879s7dfsd]

Yes, of course! Here's the packed CRX: https://dl.dropboxusercontent.com/u/13056682/Dmitry%27s%20ESL%20Cafe.crx

I get a unique disqus identifier too, so that's why I'm confused when the comments are not unique to the ".jobLink". For example, here's ( http://i.imgur.com/6zxm2Z7.png) a screenshot of me leaving a comment for the jobLink for "Keimyung University". Now, in this second screenshot when I look at the comments for "Ehwa Language School" ( http://i.imgur.com/qFYSjXL.png), there should be no comments there yet, but you see that the Keimyung University comment is already there, as are other test comments I've made on other .jobLinks.

Actually, ideally I don't want the comments to be connected to the .jobLink, but I lack the coding ability to accomplish that. What I'd really like is for the comments to be unique to the name of the employer. For example, if the employer is "ThinkOutSide Recruiting", I'd like to lowercase & trim that to "thinkoutsiderecruiting" and have the discussion unique to that name. I can do string operations in javascript, but I don't know the regex to pull out the raw employer name from each dl element, plus I'm not sure whether it would be possible to make inlineDisqussions unique to a trimmed employer name string in that way.

I'm really looking forward to any insight you can provide on any of this. Thank you so much!

On Thu, Feb 6, 2014 at 3:43 AM, Tsachi Shlidor notifications@github.comwrote:

Could you pack your extension for me (with my code included) so I could reproduce the bug you experience? I seem to get a unique disqus identifier for every job offer so I see no problem.

Reply to this email directly or view it on GitHubhttps://github.com/tsi/inlineDisqussions/issues/7#issuecomment-34222697 .

[tsi]

I've made some progress but I don't have the time to dig dipper. Seems like the problem is that the extension's global scope and the page's global scope are not the same. I have noticed that since I couldn't see disqus global variables on the job list, even though my script define them -

var disqus_shortname;
var disqus_identifier;
var disqus_url;

These must be set in order for disqus to load the right comment thread, and inlineDisqussions.js updates them every time you load a thread inside loadDisqus(). Did a quick search, you might want to look into http://stackoverflow.com/questions/10052259/accessing-global-object-from-content-script-in-chrome-extension

[tsi]

BTW did you consider simply contacting Dave and suggesting your help with improving the site instead of creating the chrome extension? I don't see why he would not be happy with that...

[a9879s7dfsd]

Thanks for the lead on the extension's global scope vs. the page's global scope! I'll check out the StackOverflow suggestion and see if I can get them both talking to the same global variables.

I made this extension as a project to learn how to work with jQuery & javascript (and Chrome extensions), so it's an interesting challenge to incorporate your awesome plugin. My extension is helpful for job-seeking teachers because it lets them filter away the jobs they don't want to see, but I don't think the recruiters who buy ad space in bulk from Dave would appreciate the features I already provide, and the ones I plan to ;)

On Sat, Feb 8, 2014 at 7:17 PM, Tsachi Shlidor notifications@github.comwrote:

BTW did you consider simply contacting Davehttp://www.eslcafe.com/contact.htmland suggesting your help with improving the site instead of creating the chrome extension? I don't see why he would not be happy with that...

Reply to this email directly or view it on GitHubhttps://github.com/tsi/inlineDisqussions/issues/7#issuecomment-34540313 .