Ive been trying to work out how to prepend a comment once its been created via Ajax, I added remote true to the form. Inserted the block in the controller but then it got the js file where i prepended the new comment. I couldn't figure it out. I came across this code on SO and quickly gave it a shot and it worked. But i cant work out why/how?
This is the code: JS file,
$("<%= escape_javascript(render #message) %>").prependTo(".view-messages");
Here is the div to which it is prepended
<div class="view-messages">
<%= nested_messages #messages.arrange(:order => :created_at) %>
</div>
Its this line here $("<%= escape_javascript(render #message) %>") Ive tried debugging it but cant,
What is that printing out, is it one of these rails magic things or am i being stupid?
Although it works i like to know why and how so if anyone can help me out me id be grateful.
Thanks
EDIT:
$("<div class=\"body body-144\">\n <span class=\"tip tip-left\"><\/span>\n <div class=\"message font-medium\">\n ellll <br />\n <\/div>\n <div class=\"flerowspb\">\n <span class=\"font-small\">\n <a href=\"/profiles/122\">Nyall2911(28)<\/a>\n <\/span>\n <span class=\"font-small\">\n <a href=\"/messages/new?entry_id=344&parent_id=144\">Reply<\/a>\n <a rel=\"nofollow\" data-method=\"delete\" href=\"/messages/144\">| Delete<\/a>\n <\/span>\n <\/div>\n<\/div>\n")
This is what its rendering, So i suppose my question is, how is rails getting all of the HTML from my comment partial by just calling (render #message)
Here's the escape_javascript method: https://github.com/rails/rails/blob/55f9b8129a50206513264824abb44088230793c2/actionview/lib/action_view/helpers/javascript_helper.rb#L25
Per the comment below the method, it looks like it replaces a few unsafe characters and returns raw HTML using the html_safe method. jQuery then prepends that raw HTML to your div.
Related
I've spent some time on trying to add function of uploading, posting and displaying images in my application. I've tried different methods, eventually finding out that 'Trix' is what I need to reach that goal.
The issue here is that my application structure is quite different from those that I see in 'trix' tutorials, and I have no idea what I am doing :(((
Let's start from the fact that my application.js is located in ->
[app]>
-[javascript]
-[packs]
-application.js
and looks very different from what I see in tutorials. However, I tried to adapt like so -
...
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('trix')
...
Instead of writing //= require trix.
Another slight difference is that my "application.css" is not ".scss", but I figured it is not that big of a deal. So I went ahead and pasted *= require trix in there.
At first , when I loaded page I've got an error couldn't find file 'trix' with type 'text/css' , but after restarting server it wasn't there anymore (which is normal). Next step would be adding the code ... but it seems that most people have _form.html.erb. And here is where I need help. my "Post" structure is like this ->
[views]>
- edit.html.erb
- index.html.erb
- new.html.erb
- show.html.erb
where new.html.erb contains the form for submitting a post ->
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">Create a new post</h1>
<%= form_tag("/posts/create") do %>
<div class="form">
<div class="form-body">
<% #post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= #post.content %></textarea>
<input type="submit" value="Post">
</div>
</div>
<% end %>
</div>
</div>
This is where the difference really confuses me... Where do I add 'trix' ? I've tried replacing textarea with trix-editor, the only changes I've got , where two small overlapping squares instead of submit form.
Help. :(
Having a comment within a comment but I'm having trouble in updating via form remote in correct place
I have this code
<div id="comment">
<g:render template="comment" var="comment" collection="${review.comment}" />
</div>
<g:formRemote class="ui comment form" name="commentForm"
url="[controller: 'game', action: 'addComment']" update="comment">
The problem is it's updating correctly in the database. but In the view it is only updating in the top most parent comment and not the correct comment
Sample pictures:
After clicking Add comment button :
After refreshing the page:
Don't mind the miss arrangement on the last picture I have a little sorting problem which I'm gonna fix later, the problem is the formremote updating the wrong one. The last picture is just to show that the update in the database is correct
edit:
Here is the action and template
def addComment(){
gameService.addComment(params.comment, params.gameId, params.userId, params.reviewId)
def comment = gameService.listComment(params.gameId,params.reviewId)
render(template: 'comment', collection: comment, var: 'comment')
}
template:
<div class="comment">
<a class="avatar"> <img
src="${createLink(controller:'user', action:'avatar_image', id:"${comment.user.id}" )}" />
</a>
<div class="content">
<g:link class="author" controller="user" action="userProfile"
params="${[userId:"${comment.user.id}"]}">
${comment.user.name }
</g:link>
<div class="metadata">
<span class="date"> ${comment.date }
</span>
</div>
<div class="text">
${comment.comment }
</div>
</div>
Looks to me like your first piece of code already is used multiple times, resulting in more than one div with the id "comment" (I guess that because you have multiple textareas and thus multiple forms in your screenshots, and this would totally explain your problem).
So, if you have multiple div-tags with the same id, the formRemote places the returned html inside the first one.
Edit: damn, just noticed that this question is quite old :-/
I have a haml file with the following:
#test-zone
%p.test-class
%p
= "The test works!"
I am expecting the following output:
<div id='test-zone'>
<p class='test-class'>
<p>The test works!</p>
</p>
</div>
BUT what I'm seeing is this:
<div id='test-zone'>
<p class='test-class'></p>
<p>The test works!</p>
<p></p>
</div>
I'm very confused why the tags are closing themselves. I also don't know what's up with that extra tag. I do not have too much experience with haml and I have not been able to search out a solution to this problem. Any other information you need from me I am happy to provide.
Haml itself is producing the output you are expecting:
<div id='test-zone'>
<p class='test-class'>
<p>
The test works!
</p>
</p>
</div>
However this is invalid HTML, a <p> is not allowed inside another <p>. You are probably looking at the inspector window of your browser which shows the “corrected” markup. If you view the source directly you will see the expected (invalid) code.
The fix is simply to make sure you use valid HTML, perhaps make the test-class paragraph a div instead.
I'm trying to make a simple website following the One Month Rails tutorial online, and since bootstrap is constantly updating I've decided to mess around with it by myself.
I have the following file home.html.erb and tried to apply the jumbotron effect from bootstrap
http://getbootstrap.com/components/#jumbotron
<div class = "jumbotron">
<h1>Welcome to One Month Rails</h1>
<p>
You've found the home page!! <%= link_to "Google", "http://www.google.com"%>
</p>
<p>
<%= link_to "Sign Up Now!", "#" %>
</p>
</div>
The page, however, does not show the jumbotron effect. What am I doing wrong? I know that bootstrap should be working because I've added some styling effects using bootstrap classes like nav and btn
Edit: I've read from a few other questions and apparantly the jumbotron class is bugged with the rails gem. I will try to manually incoporate bootstrap and see how it turns out.
Can you try adding something else to this particular page and style it using bootstrap (like a simple button)? That way you can ensure bootstrap is working on this specific page.
I don't see any problem with the code you pasted.
EDIT:
Try this sample code:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
I have a web layout of a for that looks something like this
<html>
<head>
</head>
<body>
<div id="posts">
<div id="post1" class="post" >
<!--stuff 1-->
</div>
<div id="post2" class="post" >
<!--stuff 1-->
</div>
<!-- 96 more posts -->
<div id="post99" class="post" >
<!--stuff 1-->
</div>
</div>
</body>
</html>
I would like to be able to load and render the page with a blank , and then have a function called when the page is loaded which goes in and load up the posts and updates the page dynamically.
In Rails, I tried using "link_to_remote" to update with all of the elements. I also tweaked the posts controller to render the collection of posts if it was an ajax request (request.xhr?). It worked fine and very fast. However the update of the blank div is triggered by clicking the link. I would like the same action to happen when the page is loaded so that I don't have to put in a link.
Is there a Rails Ajax helper or RJS function or something in Rails that I could use to trigger the loading of the "posts" after the page has loaded and rendered (without the posts)?
(If putsch comes to shove, I will just copy the generated JS code from the link_to_remote call and have it called from the onload handler on the body).
Sure there is, it's Rails, after all :)
Something like that will do:
<% javascript_tag do %>
$(document).ready(function() {
<%= remote_function(:update => "posts", :url => posts_partial_path) %>
});
<% end %>
remote_function will give you the same javascript that gets executed when you use rails ajax helpers.
Do this using jQuery unobtrusively like so:
$(document).ready(function(){
$.ajax({url: 'posts_partial_path',
success: function(data) {
$('#posts').html(data);
}
});
});
putting this code in a JavaScript file included by your page. You need to replace 'posts_partial_path' above with the actual URL string, Rails helpers are not available in the JavaScript code. Read about making AJAX calls with jQuery here: http://api.jquery.com/jQuery.ajax/ . Works like a champ.
Walter Gillett