While I can use other RevealJS plugins, my RevealHighlight plugin is not being recognized.
Here is a snippet of my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/plugin/highlight/highlight.js" integrity="sha512-KajdeBnB+EkQSLjoqtSEshAxmUaTDUsOmeS7MWgP3KagyrUOLYs/tG14PR8eVZxUeH/NxXfQQ2+lReqUGOMJZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
minScale: 0.2,
maxScale: 1.4,
markdown: {
breaks: true
},
<% SLIDES_CONFIG[:revealjs_opts].each do |k, v| %>
<%= k %>: <%= v.to_json %>,
<% end %>
// Optional reveal.js plugins
plugins: [ RevealMarkdown, RevealHighlight ]
})
</script>
Related
In the past got used to Stimulus with webpacker, and thought it would be similar. I have included VUE3 via importmaps and intent to link a basic controller for a 'Hello World'. What am I doing wrong? I am not proficient in the JS part.
config/importmap.rb
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "vue", to: "https://ga.jspm.io/npm:vue#3.2.29/dist/vue.runtime.esm-bundler.js"
pin "#vue/reactivity", to: "https://ga.jspm.io/npm:#vue/reactivity#3.2.29/dist/reactivity.esm-bundler.js"
pin "#vue/runtime-core", to: "https://ga.jspm.io/npm:#vue/runtime-core#3.2.29/dist/runtime-core.esm-bundler.js"
pin "#vue/runtime-dom", to: "https://ga.jspm.io/npm:#vue/runtime-dom#3.2.29/dist/runtime-dom.esm-bundler.js"
pin "#vue/shared", to: "https://ga.jspm.io/npm:#vue/shared#3.2.29/dist/shared.esm-bundler.js"
javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "#hotwired/turbo-rails"
import "controllers"
javascript/controllers/application.js
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
javascript/controllers/hello_vue.js
import Vue from 'vue/dist/vue.esm'
document.addEventListener('DOMContentLoaded', () => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
})
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Vuetube</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "hello_vue" %> <!-- This one does not work and fails-->
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
index.html.erb
<h1>Pages#index</h1>
<p>Find me in app/views/pages/index.html.erb</p>
<h1>Pages#welcome</h1>
<div id="app">
{{ message }}
</div>
I am using a partial that is rendered in two forms belonging to two different controllers as below:
update_user.html.erb
<%= form_with model: #user,
url: {
controller: :profile,
action: :update_user
},
method: :post,
local: true do |f| %>
<%= render partial: 'shared/user_registration_fields', locals: { f: f, profile: #profile } %>
<%= f.submit 'Confirm' %>
<% end %>
new_user.html.erb
<%= form_for #user,
url: {
action: :register_user
},
method: :post,
local: true do |f| %>
<%= render partial: 'shared/user_registration_fields', locals: { f: f, profile: #profile } %>
<%= f.submit 'Confirm' %>
<% end %>
One field in partial is as below:
partial.html.erb
<%= f.fields_for :profile, profile do |prform| %>
<%= prform.label :date_of_birth, 'DOB' %><br />
<%= prform.text_field :date_of_birth, { class: 'datepicker', title: "Date_of_birth", value: (f.object.date_of_birth.strftime("%d-%m-%Y") if f.object.date_of_birth.present?) } %>
The image is rendered using jquery as below:
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "assets/form_images/calendar.png",
buttonImageOnly: true,
buttonText: "Select date of birth",
dateFormat: 'dd-mm-yy',
});
The first form is in the following path -> app/views/profile/update_user.html.erb
The second form is in the following path -> app/views/login/new_user.html.erb
The partial is in the following path -> app/views/shared/_partial.html.erb
Now the image assets/form_images/calendar.png is being shown in this file new_user.html.erb but not in this update_user.html.erb. When I checked the image url from browser, for new_user.html.erb it is assets/form_images/calendar.png which is correct but for update_user.html.erb it is profile/assets/form_images/calendar.png which is wrong. Why is it showing like this? What am I doing wrong here?
That is because, you are using profile nested attributes and rails is appending profile path. Rename your JS file by appending .erb like filename.js.erb and replace buttonImage code like below and try.
buttonImage: "<%= asset_path('form_images/calendar.png') %>";
_header.html.erb (for forms part)
<%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %>
<div class="form-group" style="display:inline;">
<div class="input-group input-group-md">
<%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %>
<%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %>
<%if logged_in? %>
<%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %>
<% else %>
<%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %>
<% end %>
<span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span>
</div>
</div>
<% end %>
JS codes
<script>
$( document ).on('turbolinks:load', function() {
$('select#category').select2({
width: '60%',
dropdownAutoWidth : true,
placeholder: "Choose a category",
maximumSelectionLength: 3
});
$('select#location').select2({
width: '40%',
dropdownAutoWidth : true,
minimumResultsForSearch: Infinity
});
});
</script>
Glitch or rendering issues (click links to view the images)
normal
after I click back button from the browser
Can someone help me out why? Plus, my search forms are in the navigation bar in header partial file.
If I get rid of $(...).select in the script, everything works fine... I think there is a problem with select.js
Answered here:
https://stackoverflow.com/a/41915129/5758027
I have use this solution in my own code:
$(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button.
$('.select-select2').select2('destroy');
$('.select-search-select2').select2('destroy');
} );
and an observer:
$(document).ready( ready ); //... once document ready
$(document).ajaxComplete( ready ); //... once ajax is complete
$(document).on('turbolinks:load', ready ); //... once a link is clicked
function ready() {
$(".select-search-select2").select2({
theme: "bootstrap",
language: 'es',
allowClear: true
});
$(".select-select2").select2({
theme: "bootstrap",
language: 'es',
minimumResultsForSearch: Infinity,
allowClear: true
});
};
isn't clearing the cache all the time makes using turbolinks practically pointless?
how about something like this instead?
$(document).on('turbolinks:before-cache', function(e) {
return $('.form-control.select2').each(function() {
return $(this).select2('destroy');
});
});
I wasn't able to solve this rendering issue (still waiting for the correct answer!) but if anyone has a similar problem like me, try thinking outside of box. Here is my hack: I added a back button in my applicaiton.
Get the full url path
# get the previous url
def save_previous_page
session[:return_to] = request.fullpath
end
Show the back button only if the page is NOT home page or search page
<% if session[:return_to] != request.fullpath%>
<%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%>
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
<%end%>
<% end %>
Meanwhile, I am still waiting and trying to fix rendering issue...
FIXED THE ISSUE
Simply add this code in your .js file
Turbolinks.clearCache();
This is most likely to be some asset inconsistency, you should check your app\views\layouts folder for files with duplicated declarations of wither jQuery, jQuery UJS or Turbolinks. Check all <script> tags of your pages, and if you are declaring both on layout folder and in internal views the same scripts. If that is not the case, check for render, yield or build calls
Simple solution, don't run the select2 builder on stuff you would rather it not run on.
$("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2();
The info:
I have two models: link and campaign in show.html.erb for link I have the following two forms:
<%= form_for #link, method: :delete, remote: true, id: "delete" do |f| %>
<%= f.submit :"Submit", id: "linksubmit" %>
<% end %>
<%= form_for :campaign, url: campaigns_path do |x| %>
<%= x.hidden_field :title, value: #link.title %>
<%= x.hidden_field :name, value: #link.name %>
<%= x.hidden_field :link, value: #link.link %>
<%= x.hidden_field :description, value: #link.description %>
<%= x.hidden_field :owner, value: current_user.try(:email) %>
<%= x.hidden_field :date, value: Date.today.to_s %>
<%= x.submit :Start, id: "campaignsubmit" %>
<% end %>
When I click the submit buttons on their own, they do their job, which is either destroy the link or make a new campaign I need both to submit at the same time. I tried to do that with some JQuery. This is what I have.
$('document').ready(function() {
$('button#campaignsubmit').click(function() {
$('form#delete').submit();
});
});
Doesn't work. I ran some tests, and I know the JQuery is functioning fine, just not with this function. Any help?
The issue is in this line $('document').ready(function() {. It should be $(document).ready(function() {. The binding is never getting called, so it won't bind, and thus won't work.
Edit: Side note... you can remove the tag names, since IDs are unique per page (or at least are supposed to be).
This is my js code:
task.js
var result = [{user: 'a'}, {'user': b}]
$('#cc_test').html(_.template($('#tpl_vgroup_row_test').html(), result))
template.html
<div id='cc_test'></div>
<script type="text/template" id="tpl_vgroup_row_test">
<%= result %>
</script>
But chrome console shows me this:
Uncaught ReferenceError: result is not defined
What's wrong?
Try passing an object to _.template instead of just a value, like so
var result = [{user: 'a'}, {'user': 'b'}]
$('#cc_test').html(_.template($('#tpl_vgroup_row_test').html(), {result: result}))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id='cc_test'></div>
<script type="text/template" id="tpl_vgroup_row_test">
<%= result %>
<%= result[0].user %>
<%= result[1].user %>
</script>