Sinatra doesn't load assets - ruby

I have a sinatra landing page. Server starts by execution index.rb in root folder.
For example:
get '/en' do
I18n.locale = 'en'
erb :index, locals: {langswitch: "/ru", current_locale: "en"}
end
renders index.erb and works well.
This page has:
<link rel="stylesheet" type="text/css" href="index.css">
And if I open this link, it points to http://0.0.0.0:9292/index.css, retrieves css file and renders page as expected.
However, there is also
get '/agreement/en' do
I18n.locale = 'en'
erb :agreement, locals: {langswitch: "/ru", current_locale: "en"}
end
If I visit the same link from this page, it instead leads to http://0.0.0.0:9292/agreement/bootstrap.css, instead of http://0.0.0.0:9292/index.css and fails to retrieve file.
Same with all of my images, other css files.


First you need to put all your assets in public folder. Then you need to modifie
<link rel="stylesheet" type="text/css" href="index.css">
to
<link rel="stylesheet" type="text/css" href="/index.css">.
So all you need to do is to put / before index.css

Related

Foundation 6 Reveal ajax not working

I'm trying to create a reval Modal Foundation 6 and Ajac, but does not work.
I followed the official guide
Page html
<!DOCTYPE html><html lang="it">
<head>
<title>Avvisi</title>
<link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript">
</script><script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/foundation.reveal.js" type="text/javascript"></script><link href="http://ci.dev/assets/css/reveal.css" rel="stylesheet" type="text/css" /><link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" /><script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script></head>
<body>
<h2>Title</h2><p>Message</p>
<span><a href='http://ci.dev/AR-PIB/warn/edit_v/160/284'>Edit</a></span><span id='160|284'><a class='big-link' href='#' data-reveal-id='myModal' data-animation='fade'>Delete</a></span></div><hr/>
<script type="text/javascript">jQuery(document).ready(function() {
jQuery('.big-link').click(function(){
var dati = jQuery(this).parent().attr('id');
var $modal = $('#modal');
alert($modal)
$.ajax({'http://ci.dev/AR-PIB/Warn/delete'})
.done(function(resp){
alert(resp);
jQuery('body').append(resp);
$modal.html(resp.html).foundation('open');
conaole.log(resp);
});
});
});
</script>
<script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script></body></html>

I'm not sure why it's not working exactly as I can't run your code (the links http://ci.dev/... seem to be local to your machine), but it may be one of the following:
You have an close div but no open
You're attempting to use the Foundation JS ($modal.html(resp.html).foundation('open'); etc.) before you have initialised Foundation (if in app.js, per your comment, this is after the Reveal code)
foundation.min.js (unless you have generated a slimmed down version) includes both the motion UI and the reveal so you don't need to add each JS file
You're missing a ; after alert($modal)
I think you mean console.log(resp); rather than conaole.log(resp);
You reference the element $('#modal') but there is no element on the page with the id modal (your link also has data-reveal-id='myModal')

According to the Foundation Docs:
http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins
Just add a Foundation.reInit('abide'); and it should work right away!

I found a solution that works with Zurb Foundation 6.3.2, as explain in https://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
in the ajax done function :
var $modalContent = new Foundation.Reveal($('#modalContent'));
$modalContent.open();

Get erb view from inside layout

I am trying to get the name of the current view being loaded into layout.erb. I am trying to inject a js file and a css file into the layout head. I am building the name for those files based on the name of the erb view:
<link rel="stylesheet" href="/devcss/<%= viewName%>.css">
<script src="/devjs/<%= viewName %>.js" type="text/javascript"></script>
How can I do this from the layout template?
UPDATE:I am not interested in knowing how to inject the script in a specific place in layout, which I think content_for is used for. What I need to knok in the example above is how to determine the viewName variable

Insert the following into application.html.erb after inside head tag
<%= "#{yield(:scripts)}".html_safe if content_for?(:scripts) %>
and in the individual erb, insert similar to the following
<% content_for :scripts do %>
<link rel="stylesheet" href="/devcss/<%= viewName%>.css">
<script src="/devjs/<%= viewName %>.js" type="text/javascript"></script>
<% end %>
This will allow you to insert page specific codes into head and other tags not accessible to your individual erbs

writing strings inside head-element in rails

I'm working with a site using client-side templates through knockout.js.
The backend api, and login, is written in rails.
What I want to do is have each client-side html template in a separate file, and then have those templates lifted into the page using the templates. Similar to how javascript files are lifted in.
So I have a directory in my app/assets called templates
Each template in the directory should be added to the page in a script tag with the type="text/html"
I've gotten so far as to product the actual templates content now I just want to put it in the html.erb file in the head property.
However it always lands in the Body as normal text, not as HTML.
I've defined the following method in my controller:
def html_templates
output = ''
templates = Dir.glob 'app/assets/templates/*'
templates.each { |template|
file = File.open(template, "rb")
output += '<script type="text/html" id="'+(File.basename template, '.html')+'">'
output += file.read
output += '</script>'
}
return output
end
I try to add it to the .erb layout file like so:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= html_templates %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
Yet the output is always put in the body, with all my html escaped.
Also, if anyone has better solutions to have to solve this. Please, recommend.

Thanks :) so basically you should use raw method whenever you don't want output to be escaped

Redirect after few second in rails 3.1

Is there a way to redirect after few second only by using rails?
I want when A user click on a link see the page and after few second get redirected to his profile(user_path)

Because HTML is part of a Rails application you could use the standard html redirect option by default:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html">
Change 0 to number of seconds you want to wait before redirection.
On the other hand you could use javascript (also part of rails applications):
<html>
<head>
<script type="text/javascript">
function delayedRedirect(){
window.location = "/default.aspx"
}
</script>
</head>
<body onLoad="setTimeout('delayedRedirect()', 3000)">
<h2>You'll be redirected soon!</h2>
</body>
</html>

You can use sleep method
sleep(2.0)
redirect_to root_path

MVC 3 Razor View Engine - script blocks appear before DOCTYPE

I have a very strange problem. I have migrated my views from Webforms view engine to Razor. I am finding now that when the html for my page is rendered, it doesn't render the DOCTYPE at the top (as it should), but rather renders some javascript script blocks before the DOCTYPE tag. I have no clue what is causing this. The result it that the browser displays the page in Quirks mode. This manifests by my font-size in my tables not conforming to the font-size set for the body tag.
I must also mention that I am using Telerik MVC extensions version 2011Q1.
Below is a portion of the page source from the beginning of the html page to the end of the head tag. Any help on why this is happening will be appreciated.
<script type="text/javascript" src="/asset.axd?id=PQEAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f3x7vjn8Z31UePdn7JSL5t8zKvi7fjabVYVEv7_W73-zZ_106qd7bBXrfBRV3M7Lf3zLfS-fgyK4tZ1ua2wX709XxWtMXywra638MimzQtDdG2-PSXfP-XfH_00bTlRu_auz-dXWYNU4EaXNKnezu7uzTwe7v36YMpkerep_fpl48etfU6_yX_TwAAAP__IQbpFT0BAAA%3d"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if (!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo={"shortDate":"dd/MM/yyyy","longDate":"dd MMMM yyyy","longTime":"HH:mm:ss","shortTime":"HH:mm","fullDateTime":"dd MMMM yyyy HH:mm:ss","sortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","universalSortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","generalDateShortTime":"dd/MM/yyyy HH:mm","generalDateTime":"dd/MM/yyyy HH:mm:ss","monthDay":"dd MMMM","monthYear":"MMMM yyyy","days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"abbrDays":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"abbrMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"months":["January","February","March","April","May","June","July","August","September","October","November","December",""],"am":"AM","pm":"PM","dateSeparator":"/","timeSeparator":":","firstDayOfWeek":1,"currencydecimaldigits":2,"currencydecimalseparator":".","currencygroupseparator":",","currencygroupsize":3,"currencynegative":1,"currencypositive":0,"currencysymbol":"£","numericdecimaldigits":2,"numericdecimalseparator":".","numericgroupseparator":",","numericgroupsize":3,"numericnegative":1,"percentdecimaldigits":2,"percentdecimalseparator":".","percentgroupseparator":",","percentgroupsize":3,"percentnegative":0,"percentpositive":0,"percentsymbol":"%"};
jQuery('#CoursesGrid').tGrid({columns:[{"title":"Id","member":"Id","type":"Number","editor":null},{"title":"Course Title:","member":"Title","type":"String","editor":null},{"title":"Completion Category","member":"CompletionCategory","type":"String","editor":null},{"title":"Expiry Months (0 to 100):","member":"ExpiryMonths","type":"Number","editor":null},{"title":"Commands","commands":[{"name":"edit","buttonType":"Image"},{"name":"delete","buttonType":"Image"}]}], plugins:["editing"], editing:{"mode":"InForm","editor":"\r\n\r\n\u003cdiv\u003e\r\n \u003cfieldset class=\"editfieldset\"\u003e\r\n \u003clegend class=\"titlelegend\"\u003eCourse Details\u003c/legend\u003e\r\n \u003col\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"Title\"\u003eCourse Title:\u003c/label\u003e \r\n \u003cinput id=\"Title\" name=\"Title\" type=\"text\" value=\"\" /\u003e \r\n \u003cspan class=\"field-validation-valid\" id=\"Title_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"Description\"\u003eDescription:\u003c/label\u003e \r\n \u003ctextarea cols=\"20\" id=\"Description\" name=\"Description\" rows=\"2\"\u003e\r\n\u003c/textarea\u003e \r\n \u003cspan class=\"field-validation-valid\" id=\"Description_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"ExpiryMonths\"\u003eExpiry Months (0 to 100):\u003c/label\u003e \r\n \u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" id=\"ExpiryMonths\" name=\"ExpiryMonths\" style=\"width:100%\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\"#\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\"#\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\r\n\tjQuery(\u0027#ExpiryMonths\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\r\n\u003c/script\u003e\r\n \r\n \u003cspan class=\"field-validation-valid\" id=\"ExpiryMonths_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003c/ol\u003e\r\n \u003c/fieldset\u003e\r\n\u003c/div\u003e\r\n","defaultDataItem":{"Id":0,"Title":null,"Description":null,"CompletionCategory":null,"ReminderId":0,"ExpiryMonths":0,"Deleted":false,"ScheduledCourses":[]}}, dataKeys:{"Id":"id"}, validationMetadata:{"Fields":[{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"Course Title is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[]},{"FieldName":"ExpiryMonths","ReplaceValidationMessageContents":true,"ValidationMessageId":"ExpiryMonths_validationMessage","ValidationRules":[{"ErrorMessage":"The Expiry Months (0 to 100): field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Expiry Months (0 to 100): must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"CoursesGridform"}, pageSize:0, sortMode:'single', ajax:{"selectUrl":"/Course/_IndexAjax","insertUrl":"/Course/_InsertAjax","updateUrl":"/Course/_UpdateAjax","deleteUrl":"/Course/_DeleteAjax"}, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup"}, noRecordsTemplate:'No records to display.'});
jQuery('#TabStrip').tTabStrip();});
//]]>
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Vigilaris Solutions</title>
<link rel="stylesheet" href="/Content/Themes/Shared/vway-backend.css" type="text/css" />
<link rel="stylesheet" href="/Content/Themes/Green/branding.css" type="text/css" />
<link rel="stylesheet" href="/Content/Themes/Shared/StatusBar.css.css" type="text/css" />
<link type="text/css" href="/asset.axd?id=lAAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Ucn1bLNl-1Ho4_O-bMlfdbmZV4Xb8fTarGoluNp09DX1UePdn7JKGxwVSxn1VXzwDXZ_SXf_yXfH300bbnVu_aufHNJf-7t7O6Od8f3du_TB1PC4N6n9-mXjx619Tr_Jf9PAAAA__9JtaUdlAAAAA%3d%3d" rel="stylesheet"/>
</head>

Okay. I have resolved the problem. It is, in fact, a Telerik related issue. The issue is as follows:
In my layout view, my migrated razor view engine script registrar code looked as follows:
#{Html.Telerik().ScriptRegistrar()
.Globalization(true)
.DefaultGroup(g => g.Combined(true).Compress(true))
.Render();
}
This is a code block approach and results in the javascript script blocks being rendered right at the beginning of the page source before the DOCTYPE declaration, thus causing the browser to go into quirks mode (uggglllyyy!).
So, I changed the Telerik code in my layout view to the following:
#(Html.Telerik().ScriptRegistrar()
.Globalization(true)
.DefaultGroup(g => g.Combined(true).Compress(true))
)
The script blocks now correctly get rendered at the end of the page source and the browser no longer operates in quirks mode.
I really hope this can help other developers.

This is caused by something writing those scripts directly to the output stream (Response.Write). Razor uses Writer property of ViewContext for output before flushing everything to Response.

i take it you are using the Telerik MVC Components, more specifically the tabs?
check your view templates, specifically _Layout.cshtml and ensure you arent calling the telerik library before your markup.

Resources