I'm using Ryan Bates gem to create notification of my app for comments, the comments are polymorphic to the Posts that are created,
BEFORE going into the details, here is the Javascript that picks the first argument no matter what the values are, I have no idea why!
$('#notify').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
if ( $('#PostOwnerID').val() == $('#CuID').val() ) {
$("#Notification").removeClass("btn btn-primary");
$("#Notification").addClass("btn btn-success");
alert('Eq')
}
else {
alert('Not Equal')
}
}
else {
}
});
And Here is the rest of what I'm doing, starting from Add Comment View create.js.erb >
<% publish_to "/layouts/comments" do %>
$("#<%= #commentable.id %>").empty();
$("#<%= #commentable.id %>").append("<%= escape_javascript(render(:partial => 'comments')) %>");
$("textarea#user_comment_content").val(null);
<% end %>
And for controller to keep the post short I publish back these fields >
PrivatePub.publish_to("/layouts/comments", "$('#notify').append('#{#comment.content}'); $('#CuID').append('#{current_user.id}'); $('#PostOwnerID').append('#{#commentable.user_id}');")
and where in the notification view I have these lines:
<div id="demo" class="collapse in">
<div id="PostOwnerID"></div>
<div id="CuID"></div>
<div id="notify"></div>
<%= subscribe_to "/layouts/comments" %>
</div>
the if else suppose to check if the Post Owner Is the current user or not, if it was the current user, then he/she gets the notification. BUT it's driving me crazy, because it keeps choosing first Argument!
$("#someDiv").bind("DOMSubtreeModified", function() {
alert("tree changed");
});
Is there a JavaScript/jQuery DOM change listener?
This worked, but I realized I was doing it the wrong way, it's too late to manipulate the data in the front end.
Related
I have links made like this:
- #glossaries.each do |g|
%a.{ :href => glossary_path(g), data: { 'turbo_frame': :'entry' } }
= g.title
How can I style active link (active glossary) if result of clicking g.title link is rendered in another frame?
I've tried using helper to give a link some class if current path equal requested path, but it is not working. No 'active' class is given to link:
def current_class?(test_path)
return 'active' if request.path == test_path
''
end
When working with frames current path not showing in browser address bar, so I've tried to force it by data-turbo-action" => "advance". With that browser have current path in address bar, but still link do not have 'active' class..
I write this stimulus controller to handle turbo:click event and make a active state to the clicked element. There is an issue when another turbo:click event handler cancelled the visit, but in this place I don't care about it.
import { Controller } from "#hotwired/stimulus";
export default class extends Controller{
static targets = ['link']
static classes = ['active']
initialize(){
this.handleTurboClick = this.handleTurboClick.bind(this)
}
connect(){
this.element.addEventListener('turbo:click', this.handleTurboClick)
}
disconnect(){
this.element.removeEventListener('turbo:click', this.handleTurboClick)
}
handleTurboClick(event){
this.linkTargets.forEach(target => {
if(target == event.target){
target.classList.add(...this._activeClasses)
}else{
target.classList.remove(...this._activeClasses)
}
})
}
get _activeClasses(){
return this.activeClasses.length == 0 ? ['active'] : this.activeClasses
}
}
<div data-controller="turbo-active-link" data-turbo-active-link-active-class="bg-gray-300 hover:bg-gray-300" data-turbo-frame="main">
link A
link B
</div
The reason why it would not update is because the other frame is navigating while the rest of the page stays the same. To make it show the active navigation link you are going to want to either reload both or use some custom JavaScript. I would rather just reload both sides I would do another turbo-frame around the navigation and the sidepanel like so
<%= turbo_frame_tag "glosarries_index" do %>
... Navigation links would be here but remove the data-turbo-frame it will automatically use the closest parent.
<%= turbo_frame_tag "entry" do %>
...
<% end %>
<% end %>
I want to get the save function in the Mercury editor working but to no avail.
I have a model to save the page, title and content.
mercury.js:
$(window).bind('mercury:ready', function() {
var link = $('#mercury_iframe').contents().find('#edit_link');
Mercury.saveURL = link.data('save-url');
link.hide();
});
$(window).bind('mercury:saved', function() {
window.location = window.location.href.replace(/\/editor\//i, '/');
});
static_pages_controller.rb:
def update
#static_page = StaticPage.find(params[:id])
#static_page.page = params[:page]
#static_page.title = params[:content][:aboutContainer][:value][:about_title][:value]
#static_page.content = params[:content][:aboutContainer][:value][:about_content][:value]
#static_page.save!
render plain: ''
end
about.html.erb:
<% provide(:title, 'About') %>
<div class="container" id="aboutContainer" data-mercury="full">
<h1 id="about_title"><%= raw #static_page.title %></h1>
<div class="col-sm-12">
<p id="description about_content"><%= raw #static_page.content %></p>
</div>
<p><%= link_to "Edit Page", "/editor" + request.path, id: "edit_link",
data: {save_url: static_page_update_path(#static_page)} %></p>
</div>
Ok, so i basically realised that I needed a show action so I can grab records from the model and save to the #static_page object
I was following this guide: http://railscasts.com/episodes/296-mercury-editor?autoplay=true
Please note I had to change my routes to using those in the link (or similar routes to them) and had to place them before the default mercury routes and had to change:
#static_page.title = params[:content][:aboutContainer][:value][:about_title][:value]
#static_page.content = params[:content][:aboutContainer][:value][:about_content][:value]
to:
#static_page.title = params[:content][:about_title][:value]
#static_page.content = params[:content][:about_content][:value]
I then removed the class 'container' div in about.html.erb and moved all the code to show.html.erb not needing about.html.erb.
I am trying to figure out how to call the update method when the user checks on the check box. I want to update the database by deleting the value for the check box that is stored in the database. Here is my code
<% #items.each do |item|%>
<%if item.email == #user.email%>
<%= form_for #item do |f| %>
<%= f.check_box :to_do, url: update,:value => item.id%>
<%= item.to_do%><br />
<% end %>
<%end%>
<%end%>
you can do something like..
by using checked property..call ajax using jquery
$('input[type=checkbox][id=to_do]').change(function() {
var hall_id = $('#to_do:checked').val();
$.ajax({
url:"/todo",
type:'POST',
//pass any agruments if needed
//data: {"id": pass any data that you need},
beforeSend: function (){
//show the user that something is in progess
$("#to_do").parent().html("Submitting..");
},
success:function(data){
//update user on success/failure
$("#to_do").parent().html("Submitted");
}
});
})
Now,just implement your action on the controller...thats it.
Hope it helps :)
I am using cocoon gem to add/remove a record 'on the fly' from a form in rails. Is there a way to hide the remove link which is added on the page using link_to_remove_association if there is only one row/item ?
I would just wrap it in an if block, eg
<% if foos.size > 0 %>
<% link_to "Remove", remove_foo_path(foo) %>
<% end %>
I fixed it. As the rows were being added from JS, controlling the hiding/showing of the remove link had to be handled from JS itself and not rails.
$(document).ready(function() {
$('#container')
.on('cocoon:after-insert', function() {
if($(".fields-row").length > 1){
$(".remove_fields")[0].style.display="block";
}else{
$(".remove_fields")[0].style.display="none";
}
})
.on("cocoon:after-remove", function() {
if($(".fields-row").length == 1){
$(".remove_fields")[0].style.display="none";
}else{
$(".remove_fields")[0].style.display="block";
}
});
});
.remove_fields class is added to the <a> tag automatically when using link_to_remove_association
For some reason .show()/.hide() methods of JQuery were not working, that is why I have used .style.display
Can use FormBuilder index.
HAML:
.nested_fields
%h3 Nested object
- unless f.index == 0
= link_to_remove_association "remove", f
I have a page on my site that lets users respond to invites by either accepting or declining them.
Their response is stored in the database as the boolean 'accepted', and is used to apply the classes 'selected' or 'not_selected' (selected makes the text orange) to the 'attending' div or the 'not attending' div.
<% #going, #not_going = invite.accepted ? ['selected','not_selected'] : ['not_selected','selected'] %>
<%= link_to(outing_invite_accept_path( { :outing_id => invite.outing_id, :invite_id => invite.user_id } )) do %>
<div class="attending_div <%= #going %>">
attending
</div>
<%end %>
<%= link_to(outing_invite_decline_path( { :outing_id => invite.outing_id, :invite_id => invite.user_id } )) do %>
<div class="attending_div <%= #not_going %>">
not attending</div>
</div>
<% end %>
When either div is clicked, it's diverted to the appropriate controller actions:
def invite_accept
#outing = Outing.find(params[:outing_id])
#invite = OutingGuest.find_by_outing_id_and_user_id(params[:outing_id], params[:invite_id])
#invite.update_attribute(:accepted, true)
redirect_to({:action => "index"})
end
def invite_decline
#outing = Outing.find(params[:outing_id])
#invite = OutingGuest.find_by_outing_id_and_user_id(params[:outing_id], params[:invite_id])
#invite.update_attribute(:accepted, false)
redirect_to({:action => "index"})
end
And as right now, this code works just fine. But it requires the index page be refreshed for it to take effect.
I know it's possible to update the page without a refresh using a jQuery ajax call attached to a listener on the appropriate div, but I have no idea what such a call would look like, or where to start, really...
You want to use rail's link_to :remote => true.
See http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
For dealing with callbacks you can bind to certain events that will trigger. For example:
<%= link_to "Click Me!", some_path, :class => 'ajax', :remote => true %>
<script>
jQuery(function($) {
$("a.ajax")
.bind("ajax:loading", console.log('loading'))
.bind("ajax:complete", console.log('complete'))
.bind("ajax:success", function(event, data, status, xhr) {
console.log(data);
})
.bind("ajax:failure", function(xhr, status, error) {
console.log(error);
});
});
</script>
This page is also a pretty good write up: http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/