Im stuck with a very basic stuff here at my application.
I have a form that I want to make some processing using coffeescript.
My controller/action isProfilesController#edit_profile_photos
And my view is: /profile/edit/profile_photos.html.erb
<span class="file-upload">
<div class="progress" id='progress-bar' style='display:none;'>
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%">
<span class="sr-only" id='progress-bar-text'></span>
</div>
</div>
<button type="button" class="btn btn-lg btn-outline-green trigger-file-upload">Upload a new photo</button>
<%= f.attachment_field :avatar, direct: true, presigned: true %>
</span>
So, I created a users.coffee file with this:
$(document).ready ->
alert "page has loaded!"
jQuery ->
$(document).on "upload:start", "form", (e) ->
$(this).find("input[type=submit]").attr "disabled", true
$("#progress-bar").slideDown('fast')
$(document).on "upload:progress", "form", (e) ->
detail = e.originalEvent.detail
percentComplete = Math.round(detail.loaded / detail.total * 100)
$('.progress-bar').width("#{percentComplete}%");
$("#progress-bar-text").text("#{percentComplete}% Complete")
$(document).on "upload:success", "form", (e) ->
$(this).find("input[type=submit]").removeAttr "disabled" unless $(this).find("input.uploading").length
$("#progress-bar").slideUp('fast')
Well. I dont know why my coffee file its not being loaded. Should it have the same name of the controller? (profiles.coffee)?
Thanks
you can add it to the application.js file to include it to load, I am assuming you have the standard configuration on layouts, loading application.js there.
//= require users
or you can name the file as the controller, and add this to your layout
<%= javascript_include_tag params[:controller] %>
you have a lot of options to solve it, if this doesn't help you, please add more info to the question, like application.js and layout/application.html.erb
Related
I am very new for rails and I try to open an modal in my app. Here is my show.html.erb
app > views> event > show.html.erb
<div>
<button class="btn btn-info slide-down-right-drawer-btn" data-slide-block-id="#discussion-drawer">
<i class='ion ion-chatbubbles icon mr-5'></i>Discuss
</button>
</div>
This is my app > views > event > _discussion_drawer.html.erb
<div id="discussion-drawer">
<div class="col-md-12 col-sm-12 col-xs-12" style="line-height: 50px;">
<ol class="breadcrumb">
<li>Discussions</li>
<li class="active"><%= #co["name"] %></li>
</ol>
<button type="button" data-toggle="modal" data-target="#discussionFormModal" data-entity-id="<%= #co["id"] %>" class="btn btn-conf add-note-btn btn-info mb-20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b>Start new discussion...</b>
</button>
</div>
</div>
But this is not work. Am I doing right? Can any one help me for this?
It's not super clear which is the modal you're trying to open and where is the button to toggle it, but it took me a few tries to get comfortable with this too.
Make sure the ID on your modal matches the ID on the button
# this is on your button
data-toggle="modal" data-target="#discussionFormModal"
# this is on the modal
id="discussionFormModal"
Check that you've rendered the partial (_whatever_the_name_is.html.erb) properly in the same page that the button to open the modal is
<%= render partial: "<path to your partial>", locals: {<any variables that you need to pass to the modal>} %>
#example
<%= render partial: "shared/discussion_form", locals: {discussion: #discussion} %>
I think your HTML code is correct but bootstrap js is not loaded properly. you can simply check using browser inspect.
Make sure that your bootstrap.min.js loaded properly in rails app. you can also use CDN https://getbootstrap.com/docs/4.5/getting-started/download/
or
If you are using bootstrap gem follow https://robrace.dev/integrating-bootstrap-4-in-rails-6/ this article
This may seem like a minor quibble, but why are the symbols #! appearing in my url after opening and closing my modals?
Here's what's in my script tags. The problem likely lies here.
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'right', closeOnClick: true});
$('#modal2').modal();
$('#modal1').modal();
});
</script>
Edit: Added the modal link, which is a rails search form. Modal2 is essentially the same, but for a different resolution
<div id="modal1" class="modal hide-on-med-and-down">
<div class="modal-content">
<div class="center-align">
<h4>Looking for something?</h4>
<div class="search_form">
<%= form_tag search_posts_path, method: :get, id: "post-lookup-form" do %>
<div id="search_border" class="form-group">
<%= text_field_tag :post, params[:post], placeholder: " Search Posts", autofocus: true, id: "search_box" %>
</div>
<% end %>
<div>
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
This briefly caused the hover effects on my side nav to stop working. I fixed it by manually entering the hover effect in my css, but I have a bad feeling that I really didn't address the main problem only the symptom and that this will bite me later on down the road.
I'm currently using the 0.100.2 version of materialize for this project. Let me know if you need more info or code.
It is because of this line
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
Change the href to href='' value and it will not get placed into the url anymore.
I'm trying to get rid of the ugly button rails has as default for the file upload. i want to add a glyphicon
<%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %>
This didn't work and I have tried other things in different post i saw on this page, but they don't attach the file.
You can do it using css.
HTML:
<div class="image-upload">
<label for="file-input">
<span class="glyphicon glyphicon-camera"></span>
</label>
<%= f.file_field :image_url, id:"file-input" %>
</div>
CSS:
.image-upload > input
{
display: none;
}
.image-upload > label{
cursor:pointer;
}
You can find the working example here
As suggested here Bootstrap Filestyle, you can use Bootstrap's Filestyle to style your file upload buttons.
Step-1: Add this to your layout application.html.erb
I have added the Bootstrap Filestyle library from CDN. You should make sure that you have both JQuery and Boostrap loaded.
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script>
Step-2: Add this to the corresponding js file:
$(":file").filestyle({input: false});
Step-3: Then your image_url file field could look like as follows:
<%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
you can use also:-
add file field and hide this field :-
<%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%>
add one div with class:"glyphicon glyphicon-camera" :-
<div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div>
use script:-
<script>
var loadFile = function(event) {
var output = document.getElementById('image-output');
output.src = URL.createObjectURL(event.target.files[0]);
};
function upload_it(){
$("#upload-it").click();
};
</script>
As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
I'm having trouble implementing the wysihtlm5 editor using the wysihtml5-rails gem: https://github.com/NARKOZ/wysihtml5-rails
First of all, my html tags are not saved to the database. Then if the form submit fails, the text_area is only filled with plain text. How can i make sure, the html tags are sent to the server in the right way?
In the debug output i can see that the description is arriving in the controller without html tags:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"fW5FMxr/sgNkLUowLT2E0UfIXtFbXvkOubPYM0GJm0I=", "description"=>"sdfgsdfg"}, "_wysihtml5_mode"=>"1"}
application.js:
//= require wysihtml5
//= require parser_rules/advanced
In my view:
<%= form_for #auction do |f| %>
<div class="control-group">
<label class="control-label" for="auction_days">Beschreibung</label>
<div class="controls">
<div id="wysihtml5-toolbar" style="display: none;">
<div class="btn-group">
<a data-wysihtml5-command="bold" title="CTRL+B" class="btn"><i class="icon-bold"></i></a>
<a data-wysihtml5-command="italic" title="CTRL+I" class="btn"><i class="icon-italic"></i></a>
<a data-wysihtml5-command="underline" title="CTRL+U" class="btn"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="btn">H1</a>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="btn">H2</a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="insertUnorderedList" class="btn"><i class="icon-list-ul"></i></a>
<a data-wysihtml5-command="insertOrderedList" class="btn"><i class="icon-list-ol"></i></a>
</div>
<a data-wysihtml5-command="createLink" class="btn"><i class="icon-link"></i> Link</a>
<!--<a data-wysihtml5-action="change_view">switch to html view</a>-->
<br /><br />
<div data-wysihtml5-dialog="createLink" style="display: none;" class="alert alert-info input-xxlarge">
<label><strong>Link einfügen:</strong></label>
<input type="text" data-wysihtml5-dialog-field="href" value="http://" class="span3">
<a data-wysihtml5-dialog-action="save" class="btn">OK</a> <a data-wysihtml5-dialog-action="cancel" class="btn">Abbrechen</a>
</div>
</div>
<%= f.text_area :description, :id => 'wysihtml5-textarea', :label=>false, :class=>"input-xxlarge", :placeholder => "Beschreibung hier einfügen ..." %>
<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", {
toolbar: "wysihtml5-toolbar",
parserRules: "wysihtml5ParserRules"
});
</script>
</div>
<%= button_tag(type: 'submit', class: "btn btn-success") do %>
<i class="icon-ok icon-white"></i> Send
<% end %>
<% end %>
is the editor load properly? try inspect element in browser for the case when validation fail ,is because what you re saving is plain text, so it will just display plain text for you as well.
I saw there is a html view tag in the demo, maybe you try check whether it can be changed to html text or not.
Additionally:
I personally recommend the plain 1 without gem.
https://github.com/mindmup/bootstrap-wysiwyg
or ckeditor or tinymce :D