I've asked a question recently on how to change 2 icons to text on click. The solution worked for a while, but now it's not working. Is there another way to do it or is the problem in the code? I face the problem with other scripts very often.
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.ui.all
//= require jquery.turbolinks
//= require jquery_nested_form
//= require_tree .
show.html.erb
<div class="thumbsup">
<%= link_to image_tag('othericons/thumbsup_off.PNG', height: '20', width: '20', like_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>
<div class="thumbsdown">
<%= link_to image_tag('othericons/thumbsdown_off.PNG', height: '20', width: '20', dislike_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>
html output
<div class="thumbsup">
<a data-method="put" data-remote="true" href="/posts/1/comments/4/like" rel="nofollow">
<img alt="Thumbsup off" height="21" src="/assets/othericons/thumbsup_off.PNG" width="20" />
</a>
</div>
<div class="thumbsdown">
<a data-method="put" data-remote="true" href="/posts/1/comments/4/dislike" rel="nofollow">
<img alt="Thumbsdown off" height="21" src="/assets/othericons/thumbsdown_off.PNG" width="20" />
</a>
</div>
icons.js
$('.thumbsdown a, .thumbsup a').on('click', function()
{
$('.thumbsdown').before('You voted')
$('.thumbsdown, .thumbsup').remove()
})
If it was working before, the problem is likely an issue with Turbolinks:
$(document).on("click", ".thumbsdown a, .thumbsup a", function() {
$('.thumbsdown').before('You voted')
$('.thumbsdown, .thumbsup').remove()
});
Related
Issue 1: My navbar toggle menu will not close, but will open, unless I remove either of the following from my layout:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Now, when i remove this the toggle works and will open and close. Although, my sign-in modal will not function without it.
or:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Issue 2:
I have accordions that will not work on first load - but will then work once the page has been reloaded.
My navbar in summary:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav navbar-right">
#more nav items code here
<li class="nav-item-2 nav-display-2">
<button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn2">Sign Up/Login</button>
<div class="modal fade" id="SignInModal2" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
</script>
accordion code:
<a class="collapsed card-link text-center" id="edit-accordion" data-toggle="collapse" href="#collapseFIRST">
</a>
<div id="collapseFIRST" class="collapse" data-parent="#accordion">
<div class="card-body">
</div>
</div>
application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require Chart.bundle
//= require chartkick
Is there any you see standing out in my code wrong?
You can try this in your script. It is explained here
$( document ).on('turbolinks:load', function() {
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
Add the bootstrap gem to your Gemfile and remove the html tag from the layout
Gemifle
gem 'bootstrap', '~> 4.3.1'
You should not have 2 versions of jQuery.
Then run bundle install
Then change this to:
/= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .
Also in hour applications.scss you should have
#import "bootstrap";
Also in layout try instead:
<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
i am using bootstrap modal i want to list employee details on my pop but thats not working properly.
index.html.erb
<a href="#" data-toggle="modal" data-target="#myModal-<%= current_user.id %>">
<%= image_tag("view.png",:size=>"30x30") %></a></td>
</tr>
<div class="modal fade" id="myModal-<%= current_user.id %>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-body">
<strong>RollID:</strong>
<%= current_user.roll_id %>
</div>
application.html.erb
<title>EmployeeManagementSystem</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css' %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" %>
<%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"%>
<%= yield %>
application.js
//= require activestorage
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require popper
//= require_tree .
gem file https://imgur.com/a/RxWpe8v
please tell any mistake in my code.have another way to implement modal tel me.
Thanks Advance
You need to include bootstrap components or bootstrap-sprockets.js to your app/assets/javascripts/application.js file. As bootstrap depends on jquery i'd put after jquery.
//= require jquery
//= require bootstrap-sprockets
When running my Rails (Blog) app, I can't get my banner image to display.
My files are as follows (the page show without error just no image):
application.js
//* require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .
application.scss
#import "bootstrap";
#import "navbar";
_post.html.erb
<div class='col-sm-6 col-lg-4'>
<div class="card">
<div class="card-topper" style='background-image:
url(https://static.pexels.com/photos/113762/pexels-photo-113762-
large.jpeg);'>
</div>
<div class="card-block">
<h4 class="card-title"><%= link_to post.title, post %></h4>
<p class="published-date">published Jan 14, 2016</p>
<p class="card-text"><%= truncate(post.description, lenght: 130)
%></p>
<%= link_to 'Read', post, class: 'btn btn-read' %>
</div>
</div>
</div>
The issue is not related to rails. The image background will appear once you have content in your DIV. if you don't have content inside the DIV, better use <img /> tag.
Reference:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
Image tag:
https://www.w3schools.com/html/html_images.asp
I'm using bootstrap for rails. I downloaded the bootstrap.min and reg bootstrap files into my rails app. I'm creating a dropdown menu but for some reason I'm unable to click on it and display the dropdown.
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-wrapper logo">
<div class="container">
<a class="navbar-brand" href="/">compnay logo</a>
<div id="navbar" class="secondary">
<ul class="nav navbar-nav">
<li class='secondary-nav'><%= link_to 'Log Out', destroy_user_session_path, :method => :delete %></li>
<li class="dropdown">
Dashboards <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I tried to see if this was a jQuery not loading to execute. But that wasn't it as I was able to perform $(".navbar") and get a result back. I'm not sure what it is at this point. I feel lost and would appreciate any help.
[Edit]
Add application.js to show jquery is loading first.
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
First of all you have to download the .js files like bootstrap-dropdown.js and add it to your assets.
And in your application.js
//= require bootstrap-dropdown.js
just before
//= require_tree .
You need to import bootstrap in your application.js:
//= require bootstrap
read = ->
$('#date_picker').datepicker
$(document).ready read
$(document).on "page:load", read
This the code I am using the above is how I call the datepicker. I am using date picker rails gem. The below is the form code
= simple_form_for :due_on,:url=> admin_requests_path,:method => "get",html: {id: "due_on_filter"} do |f|
= f.input :mydate,:disabled => 'disable', :input_html => { :data => {:behaviour => :datepicker },id: "date_picker"}
I am not able to get it to work. There are no errors but datepicker just does not work.
This is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.ui.core
//= require jquery_nested_form
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require datatable_calls
//= require nprogress
//= require nprogress-turbolinks
//= require chosen-jquery
//= require chosen_calls
//= require filter_ajax_calls
//= require bootstrap-datepicker/core
//= require custom
HTML raw output of the form is:
<form accept-charset="UTF-8" action="/admin/requests" class="simple_form due_on" id="due_on_filter" method="get" novalidate="novalidate">
<div style="display:none"><input name="utf8" type="hidden" value="✓" /></div>
<div class="control-group string required due_on_mydate">
<label class="string required control-label" for="date_picker">
<abbr title="required">*</abbr> Mydate</label>
<div class="controls">
<input class="string required" data-behaviour="datepicker" id="date_picker" name="due_on[mydate]" type="text" />
</div>
</div>
</form>
you sure this js/coffee code works?
Could you try that please:
setInterval(function() {
$(function () {
var datepicker = $('#date_picker');
if(datepicker.length) {
datepicker.datepicker();
alert("found the element!");
} else {
alert("could not find element");
}
});
}, 4000);
Edit in your script as
$(function(){$("#datepicker").datepicker({
showbuttonPanel: true
});
});
and you need to require bootstrap and jquery-ui-1.10.4.custom files in both js & css application. Now implement the datepicker where ever you want using the datepicker id.