I am pretty new to HAML, can any one explain how I can get it to render:
<html itemscope itemtype="http://schema.org/">
It's the "itemscope" thats causing the problem.
I have:
%html{ :itemtype => "http://schema.org"}
I don't seem to be able to add in "itemscope" anywhere without getting a mapping error.
Thanks for any help!
Try adding it as a boolean and telling it to format html5:
engine = Haml::Engine.new '%html{:itemscope => true :itemtype => "http://schema.org"}', :format => :html5
puts engine.render
Should render
<html itemscope itemtype="http://schema.org/">
Revisiting an old question, all that was needed was:
%html{itemscope: true, itemtype: "http://schema.org"}
and that will generate:
<html itemscope itemtype="http://schema.org/">
Related
I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.
This is a proof-of-concept before we invest in refactoring the entire frontend of the application.
The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
</head>
<body>
<div id="el">
... vue template ...
</div>
<script>
...
var vm = new Vue({
el : '#el',
data : {
config : <% config.json %> // this is server-rendered, using server templating
...
},
...
});
...
</script>
</body>
</html>
The page does work. However, I get the following error/warning within the Vue console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.
I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.
And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...
Thank you!
One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/... all use this approach.
window.__STATE__ = <% config.json %>
In your JS file you can then refer to the window.__STATE__ object.
var vm = new Vue({
el: '#el',
data: {
config: window.__STATE__
}
})
Ofcourse the order is important here:
<body>
<script>
window.__STATE__ = <% config.json %>
</script>
<script src="app.js"></script>
</body>
Grrr, after several days after enduring this error, I discovered this:
<fieldset id="el">
...
<div id="el">
...
</div>
...
</fieldset>
So the issue was repeating #el within same page.
My mistake.
Just wish the error message emitted by Vue had been a bit more useful!
Bottom line: The pattern described in the origional question works just fine without NPM/CLI.
I have a rails app where I want to choose a date of birth. I'd like to use the jquery-ui datepicker for this but am not sure how to implement it into my rails app.
This is a screenshot of the options I want with the month and years menus to make selecting birthdates easier.
http://cl.ly/image/46152b372N1b
I'm really not sure where to start as far as setting this up in my application.js file as well as in my view.
Right now my view/form looks like this
<%= f.text_field :patient_dob, :id => 'datepicker' %>
Here's my application.js
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
Again, I'd like that to be a a jquery-ui datepicker with the month and years option to make selecting the birthdate easier.
If anyone can throw me some code to get started, I'd appreciate it. Right now when I click the text field, nothing happens.
Make sure you include jquery.js, jquery-ui.js, jquery-ui.css in your head html tag.
jQuery and jQuery-ui javascript files should be declared only once. You can check this by right-clicking your webpage (eg. in chrome) and select View Source Code. Also, on Source Code click the jquery.js, jquery-ui.js, jquery-ui.css and application.js links and make sure that your code is in there (if you don't find the code expected, check your paths).
application.js file should be declared after jquery and jquery-ui.
So your < head > should look like this:
<head>
<meta [your code]>
<title>[your code]</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<%= javascript_include_tag "application.js" %>
</head>
After some searching and experimenting this code worked out for me. It seems what I was using before either wasn't the object or I had it closed wrong.
$(function(){
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:2013'
});
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
hi guys am new to java script..
I am trying to stream a sound track in soundcloud using their java script SDK but my code is not working please let me know how to make this work. Below is my code
<!DOCTYPE html>
<html><head>
<script src=”http://connect.soundcloud.com/sdk.js”></script>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script>
SC.initialize({
client_id: “15c5a12b5d640af73b16bd240753ffbb?,
redirect_uri: “http://connect.soundcloud.com/examples/callback.html”
});
$("#stream").live("click", function(){
SC.stream("http://api.soundcloud.com/tracks/293", {autoPlay: true});
});
</script>
</head>
<body>
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</body>
</html>
A couple of things I can spot, that may just be a result of copy & pasting your code, but good to check anyways:
You've got a combination of smart quotes (i.e. ”) and dumb quotes (i.e. ") in your code. Change all of the smart quotes to dumb quotes.
Your client_id has a ? appended to it. Replace the ? with a ".
Make those changes, reload and you should be off to the races.
Btw, for your example here you can also omit the redirect_url. Having it there won't do any harm though:
SC.initialize({
client_id: "15c5a12b5d640af73b16bd240753ffbb"
});
In addition to the changes mentioned above, changing the JQuery version to 1.4 worked for me.
I have a form in my rails 3 app that is used to create new tags. This page is opened in a new window and I would like for that window to close after a successful submission of a new tag. How should I go about doing that.
I tried <%= f.submit "Create Tag", :onclick => "window.close()" %> and that didn't work - it still followed through with the redirection.
How might I redirect to a javascript file that would close the window?
Here I tried to redirect to another html page, but it still doesn't close when I use rails, even though it works when I just load it manually.
> <!DOCTYPE html> <html> <head>
> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
> </head>
>
> <body id="sample"
> onload="window.close()">
> This page was meant to close itself immediately using javascript.
> If it has not, please close it
> manually. </body> </html>
You can use render :text => '<script type="text/javascript"> window.close() </script> in your controller to close the window afterwards.
An alternative solution could be render :action => "window_closer" with windows_closer.html.erb being a HTML file with the same code (and maybe a body and a "Please close window now" text).
I used the best answer on this forum and it seems to work ... I'm not quite sure why.
http://www.google.com/support/forum/p/Chrome/thread?tid=23c03746e3aa03f9&hl=en
window.open('', '_self', '');
window.close();
I was trying to load a simple google map in my rails application.
The problem is that the web page show only an empty web page.
Here is my index.html.erb
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<%= javascript_include_tag 'testmap.js' %>
<body onload="initialize(); ">
<div id="map_canvas"></div>
This is my testmap.js which is in "public/javascripts":
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: chicago,
zoom: 11,
mapTypeId: 'roadmap'
});
}
The page displayed is completely empty, except for the code loaded from application.html.erb
I hope that you can help me.
Thank you
Use something like Firebug for Firefox in order to see if your JS files are loaded or not.
Maybe something like $(document).ready(function() {} is necessary (You have to wait that your content is loaded before executing your JS).