Render partial via AJAX without JQuery

I've got a standard Comment.model - I'm trying to use AJAX to render partial. Using JQuery works but I'm trying to use VanillaJS only. The AJAX is working but it's rendering the markup inside of the partial.

_comment.html.erb:

<div class = "bg-yellow">
   <%= comment.title %> 
</div>

document.getElementById("stuff").append("<%= j render @content %>");

When I add a comment via form it outputs the following via AJAX:

<div class = "bg-yellow"> Metallica and Megadeath </div>

Of course, I only want to render the string, not the markup. Can someone assist with my horrible JS skills? Thx!

Hey Ryan,

I believe that what's happening is that the browser doesn't know it's HTML and so it escapes the string for safety.

Here's a post on SO that shows how to insert HTML: https://stackoverflow.com/a/9851500/277994

var d1 = document.getElementById('one');

d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

This insertAdjactentHTML method is super handy because it lets you choose where around that element the new content should go. You can see the options for it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

I think that should do what you need!

FTW Chris Oliver! F.T.W.

You, sir, are a machine. Greatly appreciated!

And icing on the cake is a quick look at the docs reveals the above method is much faster than direct innerHTML manipulation.

THANKS AGAIN!

I do my best. :) 

Btw, you might want to check with that method's browser compatibility if you need IE support. I'm not sure how modern any JS methods are these days because of babel...

Will do. Any recommendations? Should I continue to utilize JQuery when Rails seems to be moving away? Or am I wrong in assuming so just because of the dependency drop?

Stimulus?

Just because Rails isn't using it, doesn't mean you should think it's going out of style. It's still used by like half the internet lol. Feel free to use jQuery especially because there are so many libraries that use it. If you choose not to, you can't use any of them and have to find alternatives or build things from scratch. 

With methods like insertAdjacentHTML becoming more cross browser compatible, jQuery just isn't as needed anymore. It was mostly designed as a compatibility layer to make things easier across browsers. That's why Rails said well, it's probably good enough to drop the dependency and simplify our framework a little. Less dependencies is usually good.

You also have Babel which lets you write modern Javascript and it compiles down to backwards compatible JS. This is kind of a different approach to what jQuery does and is what everyone uses for building Vue, React, Ember, etc apps. The nice part here is you get the compatibility but get to use new JS features (the language still sucks though 😜). 

I am leaning towards this more often and actually find using Stimulus JS or Vue to be far cleaner than my jQuery code. Stimulus doesn't have any rendering, so you'd still have to do the above, but it replaces the event handling that you typically do with jQuery. It's so nice. If you want template rendering client side, then Vue.js is awesome and is very similar. I've been leaning towards both of these over jQuery lately, but still use jQuery quite often (things like Bootstrap still require it). I mix and match right now basically.

Again, appreciate the advice. Honestly, I use very little JS and as a part-time hobbyist it's ridiculously difficult to keep up with front-end development as it changes so rapidly. 

For now, I want to integrate AJAX when possible while staying well within the boundaries of Rails and their relationship together. This includes form submissions and partial rendering primarily. 

As of a few weeks ago, I learned and now utilize (webpack/Tailwind) for front-end and it's fantastic. In addition to significantly decreasing time spent on front-end dev,  it's also opened up the many available features of webpack, something I was not familiar with. 

I see the .babelrc config is in my app as a result so I'll start down that path!

It's a lot to take in! ;-)

Anyways, thanks for your time and input today. It's been tremendously helpful! 

In that case, I would highly recommend checking out Stimulus JS. Rails has the Rails.ajax helper method to handle AJAX, and you can insert the results in to the page like you're doing. Then Stimulus can handle any interactivity you might want with it. It's about the simplest way of building interactive things I've used. You'll like it!

Yeah, just watched Stimulus JS episode again and can definitely see the benefits of utilizing it for form validations via listeners. No doubt that would be extremely useful in many instances for me.

As for Rails.ajax helper, I assume you mean simply utilizing the baked in AJAX helpers for Rails. That's what I'm using in my forms:

<%= form_with(model: @content) %>

Yep, the Rails forms use Rails.ajax automatically now and you can also trigger it manually if you want like if you were trying to build infinite scroll pagination for example.