Plots2: Auto-complete of search not working on 'post' page

[Souravirus]

Please describe the problem (or idea)

The auto complete is not working on search input on https://publiclab.org/post page
We are preparing to participate in Google Code-in, and have reserved this issue for participants in GCI - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

[angeryrohan]

Hey, can I have a link to .html file that is being loaded on https://publiclab.org/post ?

[jywarren]

Should be at /app/views/editor/rich.html.erb -- hope that helps!!!

On Nov 15, 2018 5:09 PM, "Rohan Singh" [e-mail] wrote:

Hey, can I have a link to .html file that is being loaded on
https://publiclab.org/post ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/2795#issuecomment-439208311,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ8YqEz1NcNTqMufhiUlnvxe6dZraks5uveX6gaJpZM4Ugtkl
.

[angeryrohan]

Hey @jywarren , Can you tell me how you see that, It has been a problem for me to locate the files that are being loaded :/

[kevinzluo]

Hi @rohancl .
I believe you should first check config/routes.rb, which tells you which controller each link goes to. In this case on line 268 and 269 you can see that post goes to editor#post.
Then you can go find the controller under app/controllers, and in this case it is editor. Within the controller you can see under post, unless some conditions are met, it will call rich, meaning rich.html.erb should be loaded.

This is what I have learned so far. Hopefully it is helpful, but some of it may be wrong.

[angeryrohan]

Got it, thanks @kevinzluo

[angeryrohan]

Problem in contributing

Hey @jywarren @kevinzluo ,
I have completed the task, but I still think I need some help here,

What I did

I checked the links, and found that the code in post.js which contains the code for auto- completion of the search bar isn't actually linked to the post page. (or to rich.html.erb)
And also that it is dependent on typeahead.jquery.js to function properly/
So, I checked for the typeahead.jquery.js (located in /public/lib/typeahead.js/dist/typeahead.jquery.js) [NOTE: The /public/lib folder is present here, but not on this repository] script tag in rich.html.erb
and I got the link

1: Now, I copied and pasted the code of post.js into the starting of typeahead.jquery.js (along with the pre existing code)
2: The auto-completion was now working ...

The Problem

There is no such file as /public/lib in this repository. So where do I commit my code ?

What I tried doing, but failed

I did notice that the /public/lib folder is created only if you install plots locally on a machine and thus it's not on this repository, So I thought instead of editing typeahead.jquery.js, I could move post.js in /public folder and directly link it to rich.html.erb like this:

I also did notice that post.js requires the typeahead.jquery.js file for proper function,

And, So I copied and pasted the code of typeahead.jquery.js into post.js and kept typeahead.jquery.js as it was earlier.
Then, I tried running the files of localhost , the post.js is linked to rich.html.erb as well but, The auto-completion didn't happen.
This is very strange and I'm a bit confused.
If I put the same code in the typeahead.jquery.js file, it works.
But, If i Put the same code in another js file that I've linked, nothing happens
Mentors, please explain in detail. Thanks ^.^

[angeryrohan]

@jywarren Please help.

[Souravirus]

Hi @rohancl, the public/lib folder is used for installation of packages of yarn and since we don't want the main repository to contain such packages, we put public/lib in .gitignore. This is the reason why you don't see public/lib in the repository. Now the problem is that you want to connect typeahead.jquery.js to a file. You can do that by writing this line in app/assets/javascript/application.js //=require typeahead.js/dist/typeahead.jquery.js.
Thank you!!

[angeryrohan]

I could not understand this completely, can I edit typeahead.jquery.js anywhere on this repository ?

[Souravirus]

No need to edit typeahead.jquery.js file as it is a file from outer source just like bootstrap. We only use it and never change it.

[angeryrohan]

Ok, I am somewhat getting it.... But how do i import this file into the post.js then ?

[angeryrohan]

and also, Why is application.js all quoted out, it contains of all comments.... Please explain, Thanks ^.^

[Souravirus]

Those are not comments. It is actually the way for importing a js file.

[angeryrohan]

so we are linking a js file inside a js file right ?

[Souravirus]

Yeah right and these js files can be used in any of the views.

[angeryrohan]

That means I can bring typeahead.jquery.js into post.js by typing in: //=require typeahead.js/dist/typeahead.jquery.js . right ?

[Souravirus]

Yeah that's what you have to do

[angeryrohan]

I did but it's not working,
I have post.js in my public folder and I have imported it in rich.html.erb like this:

I reloaded the post page, the post.js is linked (i tested it with an alert box)
Then, I pasted the require code you gave me in post.js

reloaded the page, the dropdowns didn't come :/

[Souravirus]

I dont understand why you are keeping anything in public folder. I think it should be kept inside app/assets/javascript folder.

[angeryrohan]

that was because I could not link the file anywhere else i tried writing:
../app/assets/javascript/post.js
but it gave me a warning

I know I am probably doing something dumb, Please help @Souravirus

[Souravirus]

Can you send a PR? So, that I can see what exactly you are doing.

[angeryrohan]

Yeah sure, wait a moment....

[angeryrohan]

https://github.com/publiclab/plots2/pull/3996
checkout my last2 commits

[Souravirus]

Please add the //= require line in application.js as I have told you before. Also there should be space between /= and require. I guess you haven't given any space in there. Please see to this.

[angeryrohan]

Oh sorry I forgot to commit the application.js part, but I have it updated in my localhost.
I've added the spaces too, still... not working

[Souravirus]

What's the error now?

[angeryrohan]

ERROR: I cannot link the post.js file


Here are the addresses of my main files in plots2:

post.js: app/assets/javascript/post.js
rich.html.erb: app/views/editor/rich.html.erb

Updated code in post.js:

Updated code in rich.html.erb:

look at the last line

[angeryrohan]

Also, along with the linking error in the inspect element tab, I am getting this too:

Tell me if it's a problem, because as far as I know, this is an outsource

[jywarren]

Aha! Cool you are making progress here.

The public url route will be /lib/... Instead of /app/assets/ which is the
internal system path.

Or lib is for yarn dependencies. Actually there is a JavaScript method that
rails supplies... Let me find it...

On Sat, Nov 17, 2018, 10:17 AM Rohan Singh <[email protected] wrote:

Also, along with the linking error in the inspect element tab, I am
getting this too:

[image: newerr]
https://user-images.githubusercontent.com/29266591/48662569-c3ca7c80-eaa9-11e8-8578-2d63665e5407.png
Tell me if it's a problem, because as far as I know, this is an outsource

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/2795#issuecomment-439624490,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ6Sb4uGFtcDvPh7Ej2_z3vT2DKZnks5uwChNgaJpZM4Ugtkl
.

[jywarren]

Here:

<%= javascript_include_tag "post" %>

In this, the root will refer to anything in /app/assets/javascripts/

But I didn't think the post js file was related to auto completion. So
maybe this isn't needed and you need to find why jQuery autocompletion is
not loaded in the rich editor?

I definitely see it in the first few lines of this file already -
https://github.com/publiclab/plots2/blob/master/app/views/editor/rich.html.erb

On Sat, Nov 17, 2018, 10:54 AM Jeffrey Warren <[email protected] wrote:

Aha! Cool you are making progress here.

The public url route will be /lib/... Instead of /app/assets/ which is the
internal system path.

Or lib is for yarn dependencies. Actually there is a JavaScript method
that rails supplies... Let me find it...

On Sat, Nov 17, 2018, 10:17 AM Rohan Singh <[email protected]
wrote:

Also, along with the linking error in the inspect element tab, I am
getting this too:

[image: newerr]
https://user-images.githubusercontent.com/29266591/48662569-c3ca7c80-eaa9-11e8-8578-2d63665e5407.png
Tell me if it's a problem, because as far as I know, this is an outsource

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/2795#issuecomment-439624490,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ6Sb4uGFtcDvPh7Ej2_z3vT2DKZnks5uwChNgaJpZM4Ugtkl
.

[angeryrohan]

Hey @Souravirus @jywarren , Is the file that has autocompletition code already linked to rich.html.erb ?
Thanks ^.^

[oorjitchowdhary]

Is this task already done or picked up by someone?
If not, I'd like to solve it

[jywarren]

@rohancl yes it is - see the top few lines of rich.html.erb -- you can see it included in there.

@oorjitchowdhary -- maybe you could help @rohancl take the next step on this one?

[JonathanXu1]

I saw this task was free and claimed it. Can I work on it?

[Souravirus]

Yeah sure @JonathanXu1

[JonathanXu1]

I believe that the reason the auto-complete isn't working properly is because the neccessary scripts and css were not included in rich.html.erb. I dug around and found /public/lib/publiclab-editor/examples/autocomplete.html, which has very similar code to rich.html.erb. See it here. Essentially the header has been modified like such:

So I copied the script and css tags to the rich page and modified the directories to the rich local, where I now get the following error:

I'm not familiar with ruby on rails, and I'm not really sure if I'm going in the right direction. Any help would be appreciated! @Souravirus @jywarren

[kevinzluo]

Hello. I am very confused currently.
I saw this task open this morning and claimed it.
Is there anyone else with this task claimed currently on GCI? Is it possible that it has been duplicated?

On a side note, I believe the issue is a result of the inclusion of typeahead.jquery.js, which is changing the properties of the search field, here:
https://github.com/publiclab/plots2/blob/ba053502ded9ec0163af90d3d7a4cb3eb2a4b74e/app/views/editor/rich.html.erb#L7.

When I check the documentation it seems to only be a "standalone UI view", so I do not think it is actually essential to the tags module which still works once I remove it.

If no one else has this task currently claimed on GCI, I will submit a PR tomorrow with more detail on my findings.

[Souravirus]

Hi @kevinzluo, this issue is currently available as it is abandoned by 2 students. So, you can surely submit a PR to address this issue. Thank you!!