The two following comments are bot generated comments. It's been happening for a while now. See this th-cam.com/video/sqXoiUT4Id4/w-d-xo.html Go to Flixzone at your own risk.
one of the best rails video. I do appreciate . Would you make another series for using rails 7 ? can be some clone or ecommerce. we would benefit from your knowlegde.
Problem at 1:32:00, I cannot make publish and unpublish button work. Please help me, when I lclick the 'Publish' button the console showed this error: Error invoking action "click->stimulus-reflex#__perform" 'The ActionCable channel subscription for StimulusReflex was rejected.' Does anyone know how to fix this? Thank you
Tutorial is really good, but my only problem is that the volume for the video is so low. Even with Windows volume to 100% and my monitor speakers set to 100%, I can barely hear you.
I suggest that application.js requires a check to avoid Sortable issues let sortable_elements = document.getElementById('elements') if (sortable_elements != null) Sortable.create(sortable_elements, { animation: 150 })
Not sure if you noticed this or if it's just for me, but every time I load a page Sortable.create(elements, { animation: 150 }) is throwing an error for elements not being defined
I receive the same error in the Post Index but everything works!. I try fixed updated the code to an example see in other TMTV but the console error still see it. var el = document.getElementById('elements'); var sortable = Sortable.create(el, { animation: 150 });
What happen is the script search elements in the other views to enable sortable, you need modify your Sortable code: if (document.getElementById('elements')) { var el = document.getElementById('elements'); var sortable = Sortable.create(el, { animation: 150 }); } Checking first if the elements exists in the view. Saludos.
I believe you forgot to add the Delete feature to the image when it has not been uploaded... There is a Cancel button but you never used it, it only goes to #..... I would suggest you use that button to delete the element in case the user just want to delete the element without uploading an image to actually be able to delete.
Thank you so much for sharing this wonderful video series, I am just curious about one thing, that I noticed you didn't use any Redis manually here, but this morning when I try to use stimulus on production(Heroku platform), it asked me to use Redis, now the function works, but I just don't know why at local I don't need to set any Redis stuffs, so curious about it. By the way, thanks again for sharing this wonderful video, I will keep following your series, bro.
@@etherastral6430 did you solve this in any way??? at the beginning when he is installing stimulus, the publish button doesnt even change (for me)... i can't continue... , can you please help me? You are the newest comment here to ask xD, to mention that i only need to run it in localhost, no deployment neded I get this in the browser: Error invoking action "click->stimulus-reflex#__perform" The ActionCable channel subscription for StimulusReflex was rejected.
Hey Bro, I find that my "/posts" route always hint errors in the console like below: ------------------------------------------ application.js:46 Uncaught ReferenceError: elements is not defined at HTMLDocument. (application.js:46) at Object.a.dispatch (turbolinks.js:75) at e.notifyApplicationAfterPageLoad (turbolinks.js:994) at e.visitCompleted (turbolinks.js:1007) at t.complete (turbolinks.js:782) at t. (turbolinks.js:812) at turbolinks.js:862 ------------------------------------------ I guess it is because something happened at path"app/javascript/packs/application.js" within the below code: ------------------------------------------ let element = document.getElementById('elements') Sortable.create(elements, { animation: 150 }) ------------------------------------------ Can you help me, thanks first.
@@pulgamecanica I ruined my code because of not using git appropriately, can not reproduce the problem now, anyway thanks for the reply, next time when trying to include the Sortable function, I'll give it try. Best regards.
Amazing vidéo but my localhost stop alone .... I dont understand... Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED) if someone know how to fix it
I had the same problem. I didn't solve it but I founded a way arround without using Redis, you can siply make a ratio checkbox to publish unpublish and send a callback trought the /models/post.rb to save the Time.now If you need any help just tell me I'll help you so that you can finish the tutorial :)
@@pulgamecanica Hello Andre :P I didn t finish the tutorial. how did you do for save the "drag and drop'" ? Message me if you have time!!! sorry for disturb
@@bastienduquesne5288 Hello. Runing: [brew install redis] && [brew services start redis] fixed all the issues! :) (Naturally you need to have brew installed)
@@pulgamecanica Hi! how are you? I have the exact same problem, and i understand the work around you did but i can´t do it (i'm new to this XD) Could you show me how you did it please?
TechmakerTV Great series! This episode cover a lot of the examples see it in the other series. I like the quickly you add the Image element. I use the bootstrap class 'img-fluid' to the image and works great in other screen sizes. In the end everything works fine, only i receive a console error, relate with sortable, i update the code to the separate example you do in other video, but the message error continue: "Uncaught Sortable: `el` must be an HTMLElement, not [object Null]" I believe is try it to do sortable the index. My code about sortables in application.js is: var el = document.getElementById('elements'); var sortable = Sortable.create(el, { animation: 150 }); I will check the next episodes this week, is possible made one to create a RSS for the posts? Saludos.
You can probably fix that error by checking to see if el exists before calling Sortable.create(). I'll fix that in an episode soon! Thanks for pointing that out. I like the RSS feed idea! Let me check into that.
@@TechmakerTV I was searching about the error message, but still not have a solution. If you receive the same error it would be great if you can cover in a future video, because only in edit view i dont see the error, in the other views appears. Included the devise views. Saludos.
@@TechmakerTV i fixed! Check in if the elements exists first. if (document.getElementById('elements')) { var el = document.getElementById('elements'); var sortable = Sortable.create(el, { animation: 150 }); }
Hi Andre! Basically you don't have a redis connection available. If you haven't installed and started redis, you need to do that. If by some chance you are on a new macbook with the M1 chip, there are some problems you have to find a way around.
@@TechmakerTV Today I got some time to continue the tutorial. Runing: [brew install redis] && [brew services start redis] fixed all the issues! :) Thanks so much for the tutorial and for the help! :D
Hey thanks for helping us all the time. now I tried this one since you have a good approach. but however I have an issue that I don't know the solution now. I'm having some issue of duplication when clicking save and cancel here's the screenshot and inspect, I post the information to my gist. Here's the codes in applicaiton.js: gist.github.com/lrjbrual/b866901afe738c9487d2373b879ad108 thanks for the help.
@@TechmakerTV when I saving the post I have a missing parameter. here's the error: ↳ app/controllers/authors/elements_controller.rb:42:in `set_element' Completed 400 Bad Request in 10ms (ActiveRecord: 1.4ms | Allocations: 3980) ActionController::ParameterMissing (param is missing or the value is empty: element): app/controllers/authors/elements_controller.rb:47:in `element_params' app/controllers/authors/elements_controller.rb:20:in `update' ==== Then for the paragraph and image when I click it duplicates then I got this: ↳ app/views/authors/posts/edit.html.erb:30 Rendered /Users/ryanjeffbrual/.rvm/gems/ruby-2.7.1/gems/actiontext-6.0.3.2/app/views/action_text/content/_layout.html.erb (Duration: 0.3ms | Allocations: 252) ActionText::RichText Load (0.3ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 9], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]] ↳ app/views/authors/posts/edit.html.erb:30 ActionText::RichText Load (0.3ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 11], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]] ↳ app/views/authors/posts/edit.html.erb:30 ActionText::RichText Load (0.2ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 12], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]] ↳ app/views/authors/posts/edit.html.erb:30 Rendered authors/posts/edit.html.erb within layouts/authors (Duration: 28.8ms | Allocations: 17842) [Webpacker] Everything's up-to-date. Nothing to do Completed 200 OK in 36ms (Views: 29.2ms | ActiveRecord: 2.9ms | Allocations: 23082) Not sure but seems tome I have a missing params value and not sure why it creates multiple select in action text. hope this help. and thank you for helping.
Thanks for your wonderful video. Your approach to explaining as you go is very helpful, even for a novice like me who is learning. There is a problem with adding Action_text to Rails 6.1.1 Google searches tell me that it is related to yarn. Have you seen or solved this issue ? github.com/rails/rails/issues/41123
@@downsideup5860 Agreed. As I progressed in this tutorial, it became clear that Windows has too many limitations to be viable for Rails deveopment. For example, Redis is required for action_text. Redis is not supported on Windows
Hi, I was following this beautiful tutorial, unfortunately I get an error just adding the javascript for the form element. application.js:24 Uncaught TypeError: Cannot read property 'closest' of undefined at HTMLDocument. (application.js:24) (anonymous) @ application.js:24 application.js:32 Uncaught TypeError: Cannot read property 'matches' of undefined at HTMLDocument. (application.js:32) can anyone help me please?
It's been a while since I made this video, but it looks like you aren't finding the element in the Javascript. That's why it's telling you you're trying to call a property on "undefined". This likely means you are missing the element in the HTML, or that you have a typo in your HTML class or ID somewhere.
@@TechmakerTV my application.js document.addEventListener('turbolinks:load', () => { document.addEventListener('click', () => { let element = Event.target.closest('.paragraph-content') if (!element) return; element.classList.add('d-none') element.nextElementSibling.classList.remove('d-none') }) document.addEventListener('click', () => { if (!Event.target.matches('.cancel')) return; Event.preventDefault(); let element = Event.target.closest('.paragraph-form') element.classList.add('d-none') element.previousElementSibling.classList.remove('d-none') }) }) my html.erb
@@GiGi-gg5hy This isn't exact code to copy and paste, but you have: document.addEventListener('click', () => { let element = Event.target.closest a couple of things, you need to pass in the event like: document.addEventListener('click', (event) => ... then, you have "Event" capitalized it should be lower case. You've got that in multiple places, so you'll need to fix it everywhere.
Hi, continuing this beautiful tutorial I ran into another problem with sortable. I have consulted the official guide but the problem remains my application.js var el = document.getElementById("elements"); var sortable = Sortable.create(el); my edit.html.erb extract
i encurred in this error: sortable.esm.js:1222 Uncaught Sortable: `el` must be an HTMLElement, not [object Null]
If you are using rails 7, you will have realized that JS changed.... To keep following this tutorial you need to run: bin/importmap pin sortablejs And then add to "javascript/controllers/application.js import Sortable from 'sortablejs'; document.addEventListener('turbo:load', () => { document.addEventListener('click', () => { let element = event.target.closest('.paragraph-content') if (!element) return; element.classList.add('d-none') element.nextElementSibling.classList.remove('d-none') }) document.addEventListener('click', () => { if (!event.target.matches('.cancel')) return; event.preventDefault(); let element = event.target.closest('.paragraph-form') element.classList.add('d-none') element.previousElementSibling.classList.remove('d-none') }) let sortable_elements = document.getElementById('elements') Sortable.create(sortable_elements, { animation: 150 }) })
![Пишем блог на Ruby On Rails: ОТКРЫТЫЙ УРОК [Хекслет]](http://i.ytimg.com/vi/xB-SjB5BE8U/mqdefault.jpg)
Mate, your content is absolutety sheer pure gold! Keep up with the great material, please!
Pro tip : you can watch movies at flixzone. Me and my gf have been using them for watching a lot of movies these days.
@Terrell Kristopher Definitely, been watching on flixzone for months myself :)
The two following comments are bot generated comments. It's been happening for a while now.
See this th-cam.com/video/sqXoiUT4Id4/w-d-xo.html
Go to Flixzone at your own risk.
I just checked your playlist. Immediately subscribed. I love to find fresh RoR content :)
one of the best rails video. I do appreciate . Would you make another series for using rails 7 ? can be some clone or ecommerce. we would benefit from your knowlegde.
I followed along this entire tutorial. Very nice content
Great! Thanks for watching!
Everything from you is gold. Thank you.
Problem at 1:32:00, I cannot make publish and unpublish button work. Please help me, when I lclick the 'Publish' button the console showed this error:
Error invoking action "click->stimulus-reflex#__perform"
'The ActionCable channel subscription for StimulusReflex was rejected.'
Does anyone know how to fix this? Thank you
That was amazing. I'll be continueing on with the next episode and your other content! Thanks so much!
beautiful courses , thanks brother
Every time i try to sign up, it throws me an error:
undefined method `author_url' for #
I actually haven't switched to Rails 7 yet. A lot of my work has me doing JS stuff lately - sadly. Could be a version issue.
Tremendous video series. Excellent material!!
Thanks for watching!!!
Great tutorial! But could you please segment the video in parts and label them them. not sure what yt calls the feature
Tutorial is really good, but my only problem is that the volume for the video is so low. Even with Windows volume to 100% and my monitor speakers set to 100%, I can barely hear you.
Yeah I've had some issues with my voice lately 😬Going to try to talk louder!
Use headphone . never mind :)
Ha ha - Yeah, I've got my headphones on LOUD and then the advertisements come on and scare me to death.
@@UsefulProgrammer sorry about that!!! Just got a new mic, so hopefully it's better in the newer videos.
Can u make a video on rails app initialization process. i mean when you do `rails s` then what's happening in background.
That's a great idea! Let me look into it
Waiting for SAAS application from the scratch
That's a great idea!
Hey, I followed your whole video, and at 1:50:37 you said that we don't have the 'elements' yet (or is it 'element'?), how did you resolve that?
I suggest that application.js requires a check to avoid Sortable issues
let sortable_elements = document.getElementById('elements')
if (sortable_elements != null)
Sortable.create(sortable_elements, { animation: 150 })
i get this problem
Reflex PublisherReflex#publish failed: Couldn't find Post with 'id'=
what can i have done wrong ?
Thank you so much !
It would be good to have a Github repo or something with the final project tho
Not sure if you noticed this or if it's just for me, but every time I load a page
Sortable.create(elements, { animation: 150 })
is throwing an error for elements not being defined
I receive the same error in the Post Index but everything works!. I try fixed updated the code to an example see in other TMTV but the console error still see it.
var el = document.getElementById('elements');
var sortable = Sortable.create(el, {
animation: 150
});
What happen is the script search elements in the other views to enable sortable, you need modify your Sortable code:
if (document.getElementById('elements')) {
var el = document.getElementById('elements');
var sortable = Sortable.create(el, {
animation: 150
});
}
Checking first if the elements exists in the view. Saludos.
underrated vid
Thanks!
my publish unpublish was not working so i installed redis, might help some newbie like me
Hey I am facing issue in stimulus reflex it is not working can you help me in this
ok but what you did after installing it, how do you connect to it, are you talking about the app redis? or gem redis?
Event issue, not in my vs code
I believe you forgot to add the Delete feature to the image when it has not been uploaded... There is a Cancel button but you never used it, it only goes to #..... I would suggest you use that button to delete the element in case the user just want to delete the element without uploading an image to actually be able to delete.
Why stimulus is not working in ubuntu? Is there any prerequisite to make it work? If you guys know help me out, thanks
Same here did you get solution to it?
What are the plugin name for autocomplete ?
Thank you so much for sharing this wonderful video series, I am just curious about one thing, that I noticed you didn't use any Redis manually here, but this morning when I try to use stimulus on production(Heroku platform), it asked me to use Redis, now the function works, but I just don't know why at local I don't need to set any Redis stuffs, so curious about it.
By the way, thanks again for sharing this wonderful video, I will keep following your series, bro.
stimulus is not working in my app idk why,, if you have figured it out help me. thanks in advance
Check your config/cable.yml file, likely it use async for dev and Redis for production
@@etherastral6430 did you solve this in any way??? at the beginning when he is installing stimulus, the publish button doesnt even change (for me)... i can't continue... , can you please help me? You are the newest comment here to ask xD, to mention that i only need to run it in localhost, no deployment neded
I get this in the browser: Error invoking action "click->stimulus-reflex#__perform"
The ActionCable channel subscription for StimulusReflex was rejected.
cool video)
I used to do Rails code in Atom, but the code highlighting is broken as it shows in the video it just stops working randomly.
Hey Bro, I find that my "/posts" route always hint errors in the console like below:
------------------------------------------
application.js:46 Uncaught ReferenceError: elements is not defined
at HTMLDocument. (application.js:46)
at Object.a.dispatch (turbolinks.js:75)
at e.notifyApplicationAfterPageLoad (turbolinks.js:994)
at e.visitCompleted (turbolinks.js:1007)
at t.complete (turbolinks.js:782)
at t. (turbolinks.js:812)
at turbolinks.js:862
------------------------------------------
I guess it is because something happened at path"app/javascript/packs/application.js" within the below code:
------------------------------------------
let element = document.getElementById('elements')
Sortable.create(elements, { animation: 150 })
------------------------------------------
Can you help me, thanks first.
Did you run the migrations?
Go to your schema.rb file and make sure that elements is well defined there....
@@pulgamecanica I ruined my code because of not using git appropriately, can not reproduce the problem now, anyway thanks for the reply, next time when trying to include the Sortable function, I'll give it try.
Best regards.
Thanks!
Amazing vidéo but my localhost stop alone .... I dont understand...
Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED)
if someone know how to fix it
I had the same problem. I didn't solve it but I founded a way arround without using Redis, you can siply make a ratio checkbox to publish unpublish and send a callback trought the /models/post.rb to save the Time.now If you need any help just tell me I'll help you so that you can finish the tutorial :)
@@pulgamecanica hello Andre, that's what I do also ;) thanks
@@pulgamecanica Hello Andre :P I didn t finish the tutorial. how did you do for save the "drag and drop'" ? Message me if you have time!!! sorry for disturb
@@bastienduquesne5288 Hello. Runing: [brew install redis] && [brew services start redis] fixed all the issues! :) (Naturally you need to have brew installed)
@@pulgamecanica Hi! how are you? I have the exact same problem, and i understand the work around you did but i can´t do it (i'm new to this XD) Could you show me how you did it please?
Can you share source code
1:03:07 was epic
is there no source code?
Onclick litener not working in rails 7
Great video but the volume level is very low
TechmakerTV Great series! This episode cover a lot of the examples see it in the other series. I like the quickly you add the Image element. I use the bootstrap class 'img-fluid' to the image and works great in other screen sizes. In the end everything works fine, only i receive a console error, relate with sortable, i update the code to the separate example you do in other video, but the message error continue: "Uncaught Sortable: `el` must be an HTMLElement, not [object Null]" I believe is try it to do sortable the index. My code about sortables in application.js is:
var el = document.getElementById('elements');
var sortable = Sortable.create(el, {
animation: 150
});
I will check the next episodes this week, is possible made one to create a RSS for the posts? Saludos.
You can probably fix that error by checking to see if el exists before calling Sortable.create(). I'll fix that in an episode soon! Thanks for pointing that out. I like the RSS feed idea! Let me check into that.
@@TechmakerTV I was searching about the error message, but still not have a solution. If you receive the same error it would be great if you can cover in a future video, because only in edit view i dont see the error, in the other views appears. Included the devise views. Saludos.
@@stanmx sure thing! I'll include an update if I see the same problem.
TechmakerTV thank you, I check the simple-pm and have the same issue 😅
@@TechmakerTV i fixed! Check in if the elements exists first.
if (document.getElementById('elements')) {
var el = document.getElementById('elements');
var sortable = Sortable.create(el, {
animation: 150
});
}
Localhost crashes :Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED) (Redis::CannotConnectError)
Hi Andre! Basically you don't have a redis connection available. If you haven't installed and started redis, you need to do that. If by some chance you are on a new macbook with the M1 chip, there are some problems you have to find a way around.
@@TechmakerTV Thanks, I'll try to install redis and start it then. Thanks for the reply! :)
@@TechmakerTV Today I got some time to continue the tutorial.
Runing: [brew install redis] && [brew services start redis] fixed all the issues! :)
Thanks so much for the tutorial and for the help! :D
sound quality is not good
Link to the JS for pulled from an earlier project:
github.com/StephenFiser/notes-app/blob/master/app/javascript/packs/application.js
34:55
Volume level is low
Working on it :) I think it's better with headphones
@@TechmakerTV ScreenFlow has a tool for that. Highlight your track, select the speaker icon and click "Smooth Levels"
lol its so complicated, yeah i gotta stick to shopify/ wordpress
Hey thanks for helping us all the time. now I tried this one since you have a good approach. but however I have an issue that I don't know the solution now. I'm having some issue of duplication when clicking save and cancel here's the screenshot and inspect, I post the information to my gist. Here's the codes in applicaiton.js: gist.github.com/lrjbrual/b866901afe738c9487d2373b879ad108 thanks for the help.
Hi Ryan! Thanks for watching :) Can you clarify what you mean by duplication?
Ahh ok - I just saw the screenshots. That's weird. I'd start by investigating those "bad request" messages. What do the server logs say?
@@TechmakerTV when I saving the post I have a missing parameter. here's the error: ↳ app/controllers/authors/elements_controller.rb:42:in `set_element'
Completed 400 Bad Request in 10ms (ActiveRecord: 1.4ms | Allocations: 3980)
ActionController::ParameterMissing (param is missing or the value is empty: element):
app/controllers/authors/elements_controller.rb:47:in `element_params'
app/controllers/authors/elements_controller.rb:20:in `update'
====
Then for the paragraph and image when I click it duplicates then I got this: ↳ app/views/authors/posts/edit.html.erb:30
Rendered /Users/ryanjeffbrual/.rvm/gems/ruby-2.7.1/gems/actiontext-6.0.3.2/app/views/action_text/content/_layout.html.erb (Duration: 0.3ms | Allocations: 252)
ActionText::RichText Load (0.3ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 9], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]]
↳ app/views/authors/posts/edit.html.erb:30
ActionText::RichText Load (0.3ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 11], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]]
↳ app/views/authors/posts/edit.html.erb:30
ActionText::RichText Load (0.2ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 12], ["record_type", "Element"], ["name", "content"], ["LIMIT", 1]]
↳ app/views/authors/posts/edit.html.erb:30
Rendered authors/posts/edit.html.erb within layouts/authors (Duration: 28.8ms | Allocations: 17842)
[Webpacker] Everything's up-to-date. Nothing to do
Completed 200 OK in 36ms (Views: 29.2ms | ActiveRecord: 2.9ms | Allocations: 23082)
Not sure but seems tome I have a missing params value and not sure why it creates multiple select in action text. hope this help. and thank you for helping.
Thanks for your wonderful video. Your approach to explaining as you go is very helpful, even for a novice like me who is learning. There is a problem with adding Action_text to Rails 6.1.1 Google searches tell me that it is related to yarn. Have you seen or solved this issue ? github.com/rails/rails/issues/41123
If you are trying to develop ruby/rails via Windows stop this, install *nix virtual machine or else
@@downsideup5860 Agreed. As I progressed in this tutorial, it became clear that Windows has too many limitations to be viable for Rails deveopment. For example, Redis is required for action_text. Redis is not supported on Windows
Hi, I was following this beautiful tutorial, unfortunately I get an error just adding the javascript for the form element.
application.js:24 Uncaught TypeError: Cannot read property 'closest' of undefined
at HTMLDocument. (application.js:24)
(anonymous) @ application.js:24
application.js:32 Uncaught TypeError: Cannot read property 'matches' of undefined
at HTMLDocument. (application.js:32)
can anyone help me please?
It's been a while since I made this video, but it looks like you aren't finding the element in the Javascript. That's why it's telling you you're trying to call a property on "undefined". This likely means you are missing the element in the HTML, or that you have a typo in your HTML class or ID somewhere.
@@TechmakerTV
my application.js
document.addEventListener('turbolinks:load', () => {
document.addEventListener('click', () => {
let element = Event.target.closest('.paragraph-content')
if (!element) return;
element.classList.add('d-none')
element.nextElementSibling.classList.remove('d-none')
})
document.addEventListener('click', () => {
if (!Event.target.matches('.cancel')) return;
Event.preventDefault();
let element = Event.target.closest('.paragraph-form')
element.classList.add('d-none')
element.previousElementSibling.classList.remove('d-none')
})
})
my html.erb
Cancel
@@GiGi-gg5hy This isn't exact code to copy and paste, but you have:
document.addEventListener('click', () => {
let element = Event.target.closest
a couple of things, you need to pass in the event like:
document.addEventListener('click', (event) => ...
then, you have "Event" capitalized
it should be lower case.
You've got that in multiple places, so you'll need to fix it everywhere.
@@TechmakerTV tanks
But cancel button not visible after capitalizing event
Hi, continuing this beautiful tutorial I ran into another problem with sortable.
I have consulted the official guide but the problem remains
my application.js
var el = document.getElementById("elements");
var sortable = Sortable.create(el);
my edit.html.erb extract
i encurred in this error:
sortable.esm.js:1222 Uncaught Sortable: `el` must be an HTMLElement, not [object Null]
If you are using rails 7, you will have realized that JS changed....
To keep following this tutorial you need to run:
bin/importmap pin sortablejs
And then add to "javascript/controllers/application.js
import Sortable from 'sortablejs';
document.addEventListener('turbo:load', () => {
document.addEventListener('click', () => {
let element = event.target.closest('.paragraph-content')
if (!element) return;
element.classList.add('d-none')
element.nextElementSibling.classList.remove('d-none')
})
document.addEventListener('click', () => {
if (!event.target.matches('.cancel')) return;
event.preventDefault();
let element = event.target.closest('.paragraph-form')
element.classList.add('d-none')
element.previousElementSibling.classList.remove('d-none')
})
let sortable_elements = document.getElementById('elements')
Sortable.create(sortable_elements, { animation: 150 })
})
Hey stimulus reflex not working in my app and I am using Rails 7. What you did to make it work?
@@surajpaik6621 I did a manual fetch to the controller instead of using Stimulus Reflex.
Stimulus Reflex has not been updated for Rails7
cool video)