I am having trouble getting a pdf to forcibly open in a new tab in an internal app.
This is the code that calls my component
`
<%= render "shared/application_form/identity_document_summary",
application_form: #assessment_section_view_object.application_form,
changeable: false
%>
`
This is the ERB component itself which gets a url for the file. The URL works correctly and the file opens, but the target attribute doesn't seem to work in the href attribute.
<%= render(CheckYourAnswersSummary::Component.new(
id: "identity-document",
model: application_form,
title: I18n.t("application_form.tasks.items.identity_document"),
fields: {
identification_document: {
title: "Identity documents",
href: [:edit, :teacher_interface, :application_form, application_form.identification_document, target: :_blank],
},
},
changeable:
)) %>
I have seen a few examples of similar questions on here using a 'link_to'. Should i refactor the code to use that instead of just a href?
The problem was that the component, since the component is separated out from the where the URL is generated, didn't know what to do with the target attribute.
I just moved the url in to the file, but I think this could also be done by having added the target attribute to where the url is generating from application_form.identification_document.
Related
I'm working on building my template and have the initial steps down. I'm on Rails 7.0.2.4, turbo-rails 1.1.1, Bootstrap 5.
In my layouts template's I have the following:
= javascript_include_tag "application", data:{turbo:{track: "reload"}}, defer: true
Which links to my app/javascript/application.js, and the relevant parts here are:
import * as bootstrap from "bootstrap"
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
The second part above enabled Bootstraps tooltips.
Back in my template, I break it down into three Turbo Frames:
%turbo-frame{id: "main_frame", data:{turbo:{action: "advance"}}}
.container-fluid
.row.flex-nowrap
.col-auto.col-md-3.col-xl-2.px-sm-2.px-0.bg-dark
%turbo-frame{id: "sidebar", data:{turbo:{action: "advance"}}}
.col
%turbo-frame{id: "content", data:{turbo:{action: "advance"}}}
= yield
First, there is the main_frame, which is then divided into a Sidebar and a Content frame. Clicking on links in the sidebar, which have date-turbo-frame: "content" attributes, swaps out the Content frame with that necessary content.
Now, on most full Content frames, the top of that frame has a navigation header which has a button on the left and right sides and text in the middle:
%turbo-frame{id: "content", data:{turbo:{action: "advance"}}}
.row
.d-flex
.p-2
%a{href: path, data:{turbo:{frame: "content"},
bs:{toggle: "tooltip", placement: "bottom",
title: "Back"}},
aria:{label: "Back"}}
%i.bi.bi-arrow-left-circle-fill{aria:{hidden: "true"}}
.flex-grow-1
// Some Text
.p-2
%a{href: new_path, data:{turbo:{frame: "new"},
bs:{toggle: "tooltip", placement: "bottom",
title: "New"}},
aria:{label: "New"}}
%i.bi.bi-plus{aria:{hidden: "true"}}
When you navigate to this replaced Content, the tooltips do not work. However, when you do a FULL page reload via the browser, the tooltips are suddenly working because the code is in the head.
Is there a way I can get the frames to load the necessary Javascript?
Basically with Turbo your JS is added into the head and not modified across pages loads.
So when you call :
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
Basically it will search the DOM for requested DOM nodes at the exact time your JS is appended to the application. And if your app refreshes a turbo Frame, then it won't be played. Please see this thread I replied recently : How to load page specific custom Javascript functions in a Rails 7 app with Turbo, ImportMaps and Stimulus?
If you want your Tooltips being refreshed when new content is loaded then you have to use Stimulus, put the code into the connect() method of a Stimulus controller, and attach that controller to every part of your application that may contain tooltips.
You can also attach your controller to the <html> tag and add a mutation observer (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) inside the connect() method if you don't want to attach your Stimulus controller at many places across your app. (You can also add the Mutation Observer in javascript/application.js if you wish. Stimulus purpose is actually to prevent spamming Mutation Observers but if you have many Tooltips, it is still a viable solution)
This is so simple I don't get how it could possibly go wrong. I'm trying to get a simple intra-page link to behave.
(If it's relevant, this is an angular 2 app, using routing.)
Here is a typical page:
Skip to main content
<div class="page-body">
<main>
<div class="content-body" id="content-start">
<h1>Employee Search</h1>
</div>
<main>
</div>
The URL of this page (in my dev env) is
http://localhost:49974/app/employee/search
When I click (or focus then press enter) on Skip to main content it should go to
http://localhost:49974/app/employee/search#content-start
but instead goes to
http://localhost:49974/app#content-start
(and then immediately switches to
http://localhost:49974/app/#content-start
)
I can't have messed up the linking itself; this must have something to do with how the routing is working.
It looks like I have to do it this way:
<a href="app/request/timeoff#content-start">
But that doesn't seem correct.
I don't know if this is a the correct way, or the angular way, but it works:
app.component.html:
Skip to main content
app.component.ts
export class AppComponent {
pageURL: string;
ngDoCheck() {
this.pageURL = window.location.href;
var link = this.pageURL.indexOf('#content-start');
if (link > -1) {
console.log(this.pageURL.substring(0, link));
this.pageURL = this.pageURL.substring(0, link);
}
}
}
every-page.html:
<h1 class="content-body" id="content-start">Page</h1>
Not sure if ngDoCheck is the appropriate event use.
Full disclosure: app.component is a wrapper - with header and the 'skip to content' link that contains all the pages and their content.
So, the logic for the 'skip to content' link exists once, while the actual content target #content-start lives in the top of each content page.
I am running ckeditor 4.1.4 on a ruby on rails app. The advanced content editor seems to be stripping anything other than basic attributes.
For example, if I have a word doc with 'this is a test' where 'is a test' is bold, red and 28 point and looking at the contents of the clipboard with clipview shows
<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->
<p class=MsoNormal>This <b style='mso-bidi-font-weight:normal'><span
style='font-size:28.0pt;line-height:107%;color:red'>is a test</span></b><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<!--EndFragment-->
</body>
</html>
It would appear that it is picking up the color,size and bold attributes.
However, when I paste that into a text area using ckeditor and look at the source in ckeditor, I see
<p>This <strong>is a test</strong></p>
The attributes other than strong have been removed.
My body tag on the form is
<div class="field">
<%= f.label :body %><br>
<%= f.cktext_area :body, :rows => 80, :cols => 120 %>
</div>
I have gone into C:\Ruby200\lib\ruby\gems\2.0.0\gems\ckeditor-4.1.4\app\assets\javascripts\ckeditor\config.js and added
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.removeFormatAttributes = '';
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
I tried adding the three config lines inside the block and that didn't work. I read a suggestion about adding them outside the config block so I tried that. I did restart the server but it still strips out the additional attributes.
This is an intranet application and, given our situation, I'm not worried about content filtering. I just want the users to be able to copy and paste with all attributes.
------ edit 1
I looked at the source of the page and see
//<![CDATA[
(function() { if (typeof CKEDITOR != 'undefined') { if (CKEDITOR.instances['document_body'] == undefined) { CKEDITOR.replace('document_body', {"allowedContent":true}); } } else { setTimeout(arguments.callee, 50); } })();
//]]>
</script>
I'm not sure if the allowedContent statement should be working.
There are many ways to configure CKEditor, but the most simple one is passing object as a second parameter to CKEDITOR.replace (just as it's shown in your last piece of code).
However allowedContent: true can be not enough to enable pasting anything, because there are also paste filters in CKE, enabled in default in Chrome and Safari. If you're using that browser, CKE will strip off all classes, styles and div and span elements. To disable that behaviour, you should also pass pasteFilter option set to null:
var editor = CKEDITOR.replace( 'editor', {
allowedContent: true,
pasteFilter: null
} );
If you don't want to mess with configuring CKE, you can also disable paste filter on the fly:
editor.on( 'instanceReady', function() {
editor.pasteFilter.disable();
} );
However disabling that filter can lead to producing very messy HTML, so be warned!
More info about paste filter is available in official documentation.
---edit:
Note that if you are pasting mainly from Word, there are also configuration options dedicated for that case: pasteFromWordRemoveFontStyles and pasteFromWordRemoveStyles.
My app renders html, created by external program and placed in a folder outside the app (so that it wouldn't disappear after redeployment), and this html contains links to other files in that folder. I can change the links, but how to get them work?
This is how the html is rendered now:
def url = createLink(controller: 'job', action: 'renderResults', params: [resultsPath:resultsPath])
render(contentType: 'text/html', text: "<script>window.location.href='$url'</script>")
..
def renderResults (String resultsPath){
def htmlContent = new File(resultsPath).text
render (text: htmlContent, contentType:"text/html", encoding:"UTF-8")
}
This one does not work (suppose renderImage is ok)
Link
even if I try to render html in a gsp view:
def url = createLink(controller: 'job', action: 'renderResults', params:[resultsPath:resultsPath])
render(view:"index/results", text: "<script>window.location.href='$url'</script>")
with only {$text} in results.gsp.
All this may seem crazy, so please don't hesitate to tell me about that - I'm just a newbie.
UPD: My question is somewhat vague, so I'll try sum it up: is there any way to create a link from an html to some resource located outside the app? Dynamic grails links do not work in html - I guess, because it is not a view. And simple static links (like "/home/images/test.img", "../../images/test.img") inevitably lead somewhere into app folder.
So here is the scenario:
I have 4 entries in a database, they are 4 map routes.
Each map route has its own XML file containing the co-ordinates of each route, I have written an ajax function to pull the data from the xml and write it to a google map
this is an extract from the code
$.ajax({
type: 'GET',
url: '/route4.gpx',
dataType: 'xml',
success: function(track) {
var grids = [];
var bounds = new google.maps.LatLngBounds ();
$(track).find('trkpt').each(function() {
var lat = $(this).attr('lat');
var lon = $(this).attr('lon');
var point = new google.maps.LatLng(lat, lon);
grids.push(point);
bounds.extend(point);
I have this code saved into 4 javascript files where the URL line is different on each (route1.gpx, route2.gpx etc)
What I want to do is on the show.html.erb file is to change the javascript_include_tag to update to the relevant javascript file
So the show.html.erb tags look like the following
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" ,"http://code.jquery.com/jquery-1.9.1.min.js", "/js/script1.js" =%>
what I would like is the last reference to change when I visit a different page so
when linked to show/1 the javascript file would be "/js/script1.js"
when linked to show/2 the javascript file would be "/js/script2.js"
when linked to show/3 the javascript file would be "/js/script3.js"
when linked to show/4 the javascript file would be "/js/script4.js"
So is there anyway to write into the javascript_include_tag to achieve this?
All help/suggestions/comments appreciated
You could interpolate the string passed to javascript_include_tag, pass it as an instance variable etc, but I think you are heading down the wrong track. I would have a single javascript function that takes the url to make the ajax request to as a parameter.
You would then call that function with that parameter. You've got several choices here.
You could have a script tag where you generate the function call dynamically, ie you do something along the lines of
$(function(){
my_function(<%= #url.to_json %>)
})
You could have a script tag where you set a window property with the url and use that later:
window.map_url = <%= #url.to_json %>
and then somewhere else
$(function(){
my_function(window.map_url)
})
You could have the function call be part of the static javascript, but have it pull its parameters either from the data attribute of some relevant DOM element
$(function(){
my_function($('some_element').data('url'))
})
I'd usually go for the latter
Why don't you interpolate?
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" ,"http://code.jquery.com/jquery-1.9.1.min.js", "/js/script#{controller_variable_for_example_id}.js" =%>