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
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 %>
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 trying to render data from a JSON file via $http.get().
But when i run the app, the JSON data isn't rendered, and the developer console shows an error:
ERROR:
Failed to load. Resource. The server responded with a status of 404 (Not found).
Routing Error
No route matches [GET] "/phones.json"
THOUGHTS:
I've read that $http.get() follows a relative path to the the given URL, so if phones.json is in the same folder as index.html.erb, i can't figure out why its not loading.
I'm wondering if i need to add something to routes.rb.
controllers.js
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
routes.rb
Rails.application.routes.draw do
resources :home
root 'home#index'
end
application.html
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title ng-bind-template="Phone Library: {{query}}">Phone Library</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body ng-controller="PhoneListCtrl">
<%= yield %>
</body>
</html>
index.html.erb
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{ phone.name }}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
application.js
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-ui-bootstrap
//= require turbolinks
//= require_tree .
gems added:
gem 'angularjs-rails'
gem 'angular-ui-bootstrap-rails'
gem 'responders', '~> 2.0'
file tree
note:
This is part of an Angularjs tutorial called PhoneCat, chapter5 (url:https://docs.angularjs.org/tutorial/step_05). Though i made a few detours earlier on to make it work, so unable to follow it exactly at this point.
I'm not an expert in Rails or Angularjs so any advice would be highly appreciated :)
I've been trying to implement the OwlCarousel image slider into my RoR app. The problem is that the slider doesn't seem to be called upon.
This is what it currently outputs (with two images) -
This is my current relevant code -
In application.js
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require_tree .
In application.css.scss
/*
*= require owl.carousel
*= require owl.theme
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
In show.html.erb
<div>
<div class="col-xs-12 col-md-offset-2 col-md-6 project-right-panel">
<div id="owl-carousel">
<% #post_attachments.each do |p| %>
<%= image_tag p.avatar_url %>
<%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
<% end %>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#owl-carousel").owlCarousel({
autoPlay: 3000,
item : 3,
itemsDesktop : [1119,3],
itemsDesktopSmall : [979, 3]
});
});
</script>
item : 3 should be items: 3. That might be it. Their demo also looks like they want you to wrap your images in a div with class item.
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()
});