I've come across a really strange (at least to me) issue. When I type the url by hand the map load just fine, however, when I use a link (either rails or a href) the map won't load until I hit refresh.
Any ideas?
routes.rb
Rails.application.routes.draw do
root 'page#map'
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>LeafletTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
map.html.erb
<%= link_to("reload page (rails)", root_path) %><br />
reload page (a href)<br />
<div id="mapid"></>
page.scss
#mapid {
width: 100%;
height: 600px;
}
page.coffee
$ ->
map = L.map('mapid').setView([
51.505
-0.09
], 13)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap contributors').addTo map
I was able to fix this issue by ensuring a new TileLayer was created every time the map was rendered, i.e. when turbolinks:load is fired.
With the help of some other posts, I finally discovered that this was due to Turbolinks, and the way it calls a page load. Adding the data: { turbolinks: false} attribute to my rails link helped clear it up. I imagine it would work (with the correct formatting) for a non-rails link.
Related
I have a problem that has been documented previously but for which I can't solve in my case. This is about the 5.13 section of Getting Started Rails tutorial that deals with deleting an entry.
First here is my Controller :
def destroy
#article = Article.find(params[:id])
#article.destroy
redirect_to articles_path end
My view
<% #articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.text %></td>
<td><%= link_to 'Show', article_path(article) %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Destroy', article_path(article), method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr> <% end %>
As per this thread : Rails 4 link_to Destroy not working in Getting Started tutorial
I have amended link_to to button_to which DOES work. But this doesn't really explain why the tutorial bit doesn't work.
I have also made sure that the 'jquery-rails' gem was in the gemfile. And I checked aswell the follwing from my app/assets/javascript/application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
As per this thread Delete link sends "Get" instead of "Delete" in Rails 3 view I checked my app/views/layouts/application.html.erb file which looks like :
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head> <body>
<%= yield %>
</body>
</html>
I tried in both Chrome and Firefox. Still doesnt work.
If the question is why does it have to be button_to instead of link_to, it is pretty straight forward. Modern browswers do not implement verbs other than GET for links(anchor tags). It has to do with the history of the web and browsers. Rails requires a DELETE verb to look for the destroy action. To get around the constraint, button_to generates a form with the correct verb (method in rails speak), and the correct path.
If you are copying and pasting directly from Rails website, there is a chance you got your indentation mixed. Try cleaning up your code and stick to one indentation style e.g. taps or spaces.
Using Rails 4.2.4
I generated a scaffold in rails to test out filepicker. Everything seems to be working well except when I hit refresh on the page that has the file picker button, 3 buttons display on the page instead of the original 1. This happens on both Safari and Chrome. Can anyone tell me how to fix this?
When the page first loads, one button:
On refresh:
application.html.erb source:
<!DOCTYPE html>
<html>
<head>
<title>FilepickerTest</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<%= filepicker_js_include_tag %>
<%= yield %>
</body>
</html>
_form.html.erb source:
...
<div class="field">
<%= f.label :filepicker_url %><br>
<%= f.filepicker_field :filepicker_url, :button_text => "Select Image", :button_class => "btn btn-default", :onchange => 'onImageUpload(event)' %>
</div>
<div class="actions">
<%= f.submit 'Upload Image' %>
</div>
...
The problem was related to turbolinks and was fixed by removing the javascript call in the application.html.erb file.
My local version runs CKEditor fine.
Edit: Local version does the same thing.
It's runs on heroku as well, but when I first load my create blog post page, the cktext_area simply shows up as a normal text_area box. When I refresh the page, the ck_textarea shows up like it is supposed to.
I'm not sure why this is happening.
This is using rails 4.
Here's my application layout
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Here's my application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require ckeditor/init
//= require_tree .
And my blog create form
<%= form_for #article do |f| %>
<% if #article.errors.any? %>
<div id="error_explanation">
<h2>
<%= pluralize(#article.errors.count, "error") %> prohibited
this article from being saved:
</h2>
<ul>
<% #article.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title, :size=>'50' %>
</p>
<p>
<%= f.label :text %><br>
<%= f.cktext_area :text %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
I know I'm late to the party, but may be it will help someone.
The problem is that ckeditor isn't initialized after visiting a turbolinks link. So the solution is to reinitialize ckeditor every time turbolinks loads pages.
This could be done using turbolinks callback turbolinks:load (page:load for old versions)
The second problem is that turbolinks:load fires every time even on document ready event. So I have to check somehow if ckeditor is initializes or I'll get The editor instance ... is already attached to the provided element.
The final code will be:
$(document).on('turbolinks:load', function() {
$('.ckeditor:visible').each(function() {
var id = $(this).attr('id');
if (!CKEDITOR.instances[id]) {
CKEDITOR.replace(id);
}});
});
OK. Well. This isn't a complete solution, but removing turbolinks solves this issue. I certainly don't need turbolinks for my project, but it would eventually be nice to find a solution that works including turbolinks.
removed //= require turbolinks from application.js
It would seem CKEditor doesn't play nice with turbolinks. Instead of disabling turbolinks, I simply added a data: { 'no-turbolink' => true } to any link that contained a ckeditor.
For example, in my header I had a link to create a new blog post:
<%= link_to "Create New Blog Post", new_article_path, data: { 'no-turbolink'=>true} %>
This solved it for me, without completely removing turbolinks.
This code contains no errors while compiling but gives errors while running it.
I am not able to run this code on tomcat 7.0. I started restarting it several times. Can you suggest me any ideas how to change the code so that it works?
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<%# page import="java.util.*" %>
<body>
<form action="MyWSserve" method="get">Enter Zip Code
<br>
<input type="text" name="zipcode"></input>
<input type="submit" name="GO" value="GO"></input>
</form>
<% //Object obj=request.getAttribute("values");
//if(obj instanceof ArrayList){
//ArrayList<String>mylist = (ArrayList<String>)obj; }%>
<% //Iterator<String>itr = mylist.iterator(); %>
<% String[] strcode=(String[])request.getAttribute( "values"); %>
<p>The Temperature in Centigrade <%=strcode[0] %><br></p>
<p>The Temperature in Farenheit <%=s trcode[1] %><br></p>
<p>The Pressure is <%=s trcode[2] %><br></p>
<p>The weather Condition is <%=s trcode[3] %><br></p>
</body>
</html>
Try this:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<%# page import="java.util.*" %>
<body>
<form action="MyWSserve" method="get">Enter Zip Code
<br>
<input type="text" name="zipcode"></input>
<input type="submit" name="GO" value="GO"></input>
</form>
<% //Object obj=request.getAttribute("values");
//if(obj instanceof ArrayList){
//ArrayList<String>mylist = (ArrayList<String>)obj; }%>
<% //Iterator<String>itr = mylist.iterator(); %>
<% String[] strcode = request.getParameterValues("values"); %>
<% if (strcode != null && strcode.length >= 4) { %>
<p>The Temperature in Centigrade <%=strcode[0] %><br></p>
<p>The Temperature in Farenheit <%= strcode[1] %><br></p>
<p>The Pressure is <%= strcode[2] %><br></p>
<p>The weather Condition is <%= strcode[3] %><br></p>
<% } else { %>
<p>Call this page using 4 parameters called "values":
?values=1st&values=2nd&values=3rd&values=4th
<% } %>
</body>
</html>
Is it possible to build some kind of master page with Classic ASP without frames or iframes?
I’m wondering if there is a way to include content pages in the main page like ASP.NET master pages do. From what I have researched, ASP Classic does support inclusion of other ASP/HTML pages into a page, but the value put into this include means the function cannot be dynamic.
You could just create functions (say, a Header() function and a Footer() function) which do nothing but output some set of markup. Those functions can take parameters too, and be called conditionally. It's not quite the same as a Master page, but it sounds like it accomplishes what you are trying to do. You would have an <!--#include file="headerfooter.asp"--> on each page, and each page would call Header() & Footer().
Or you can just use <!--#include file="header.asp"--> at the top and <!--#include file="footer.asp"--> at the bottom of each page too. I've seen both approaches.
If you are looking for the reverse, that is, a single template page which calls individual pages in it's "middle" section, then that's not really something you can do easily with ASP classic. It's a fundamental difference in approach: ASP.NET has a concept of a control tree, events, etc, while ASP Classic is essentially just a script that runs top to bottom.
This idea is from Classic ASP Master Pages | Godless Code. I’ve transcribed the code in images on that page, extended its example a bit, and also explored the limitations of this technique.
The idea is that each page has only one Server-Side Include (one <!--#include file="" --> call). The single inclusion is a master template file, which you could name master.asp. The master page calls custom subroutines on each page in place of each content area. Each child page defines those subroutines with Sub, with content unique to that child page.
master.asp
<!DOCTYPE html>
<html>
<head>
<title><% Title() %></title>
</head>
<body>
<% BodyContent() %>
</body>
</html>
aboutUs.asp
<!--#include file="master.asp" -->
<% Sub Title %> About Us <% End Sub %>
<% Sub BodyContent %>
<h1>About Us</h1>
<p>
We do things!
</p>
<% End Sub %>
That turns into this HTML when you visit aboutUs.asp on an IIS server:
<!DOCTYPE html>
<html>
<head>
<title> About Us </title>
</head>
<body>
<h1>About Us</h1>
<p>
We do things!
</p>
</body>
</html>
However, this approach does not allow nesting:
subtemplate.asp
<div class="innerLogo <% LogoSide() %>">
<% LogoImg() %>
</div>
template_user.asp
<!--#include file="master.asp" -->
<% Sub Title %> Our Logo <% End Sub %>
<% Sub BodyContent %>
<!--#include file="subtemplate.asp" -->
<% Sub LogoSide %> leftside <% End Sub %>
<% Sub LogoImg %>
<img src="img/about.png" alt="About" />
<% End Sub %>
<% End Sub %>
This will not work, because nested Subs are a syntax error:
Microsoft VBScript compilation error '800a03ea'
Syntax error
/template_user.asp, line 9
Sub LogoSide
^
Since nesting is not allowed, this templating system is, in effect, a one-time solution. If your individual pages’ subroutines become too unwieldy, you can’t use this technique again. So when using this technique, you should carefully choose where to carve out your set of templates in order to provide the best balance between flexibility and DRYness.
Rory wrote a great example for master pages in Classic ASP, but demonstrated that the "master page" approach had its limitations because Subs cannot be nested.
However, for the sake of demonstration, and because JavaScript in Classic ASP has hardly any documentation anywhere on the Internet, here's the same example that fails in ASP VBScript but won't fail in ASP JavaScript.
master.asp
<!DOCTYPE html>
<html>
<head>
<title><% Title() %></title>
</head>
<body>
<% BodyContent() %>
</body>
</html>
subtemplate.asp
<div class="innerLogo <% LogoSide() %>">
<% LogoImg() %>
</div>
template_user.asp
<%# Language= "Javascript" %>
<!--#include file="master.asp" -->
<% function Title() { %> About Us <% } %>
<% function BodyContent() { %>
<!--#include file="subtemplate.asp" -->
<% function LogoSide() { %> leftside <% } %>
<% function LogoImg() { %>
<img src="img/about.png" alt="About" />
<% } %>
<% } %>
It works! here are the juicy results:
<!DOCTYPE html>
<html>
<head>
<title> About Us </title>
</head>
<body>
<div class="innerLogo leftside ">
<img src="img/about.png" alt="About" />
</div>
</body>
</html>
Remember, JavaScript, even the ECMAScript 3 version in Classic ASP, is often way more powerful and expressive than the VBScript engine that was favoured and heavily promoted by Microsoft. If you ever have to use Classic ASP, use JavaScript!
One of the ugliest problems in classic ASP is that #includes always happen, so putting two includes in an if-then-else construct always includes both – even though you only see the output that applies to your conditional value.
Even when includes work, they don't give you the result you're really looking for, which is to select a template or skin “on the fly”.
One way to handle this situation is to use a template engine such as KudzuASP that surpasses the traditional #include methodology. Here is a very simple example:
<!-- An HTML Template -->
<html>
<head><title><!--[Replace|PageTitle]-->PageTitle<!--[/Replace]--></title></head>
<body>
<table border="1" cellpadding="4" callspacing="2" width="640">
<tr>
<td colspan="2"><!--[HeaderContent/]--></td>
</tr>
<tr>
<td width="160"><!--[LeftColumnContent/]--></td>
<td><!--[MainContent/]--></td>
</tr>
<tr>
<td colspan="2"><!--[FooterContent/]--></td>
</tr>
</table>
</body>
</html>
And the ASP code looks like this:
<%# Language=VBScript %>
<!-- #include file="./KudzuASP/_kudzu.asp" -->
<%
Dim PageTitle : PageTitle = "This is a Master Page"
'
' Create the template engine
'
Dim T_ENGINE
Set T_ENGINE = New CTemplateEngine
T_ENGINE.PutValue "PageTemplate", PageTemplate
T_ENGINE.SetHandler "HeaderContent", New CTXHeaderContent
T_ENGINE.SetHandler "LeftColumnContent", New CTXLeftColumnContent
T_ENGINE.SetHandler "MainContent", New CTXMainContent
T_ENGINE.SetHandler "FooterContent", New CTXFooterContent
'
' Custom Tage Handlers
'
Class CTXHeaderContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Header"
End Sub
End Class
Class CTXLeftColumnContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Left<br/>Content"
End Sub
End Class
Class CTXMainContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Main<br/>Content"
End Sub
End Class
Class CTXFooterContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Footer"
End Sub
End Class
'
' Evaluate the template
'
T_ENGINE.ParseFile Server.MapPath("./MasterPage.html")
T_ENGINE.EvalTemplate
%>
The template engine makes calls to your custom objects defined in the hosting ASP code page when the appropriate tags are processed. The function members of your custom classes have direct access to the hosting page and its variables and methods, as well as the template engine’s object hierarchy. In other words, the template is driving the output and the hosting ASP page during output.
This beats the include mechanism hands down, because the template engine can dynamically select which HTML template to process at runtime, and it can dynamically include libraries of custom tag handlers using the built in <!--[import/]--> tag.
UPDATE 2016.01.13: I have open sourced this project and you can find the latest code maintained at this address: https://github.com/Mumpitz/KudzuASP
I just use a Default.asp page with html, then put my code in the content area.
<%# Language="VBScript" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="topNav"> <!--begin top Nav-->
<ul>
<!--Be sure that all links are like this href="?page=contentPageEx"-->
<li>Home</li>
</ul>
</div> <!--end top Nav-->
<div id="content">
<%
Dim default
default= Request.QueryString
If default= "" Then
Server.execute "includes/home.html"
Else
Server.execute "includes/" & request("page") & ".html"
end if
%>
</div>
<div id="botNav"> <!--begin bot Nav-->
<ul>
<li>Home</li>
</ul>
</div> <!--end Bot Nav-->
</body>
</html>
Then I put all my content into an includes file with html pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--Search engines use this title ect...-->
<title>Hello SEO! This is a content page!</title>
<!--Can be styled independently-->
<style>
p {
color: #0094ff;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>