<header>
<% include templates/header.ejs %>
</header>
<% include templates/announcement.ejs %>
<form>
<br><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search a fort...">
</form><br>
<section id="placeList">
<div class="placeListBackground" id="placeListGet">
<ul id="placeCells">
<% placeData.forEach(function(placeData) { %>
<div class="placeContainer <%= placeData.category %>" class><img src= "<%= placeData.placeicon %>" alt="<%= placeData.placename %>" align="left" width="178" height="100"><span><%= placeData.placename %></span><p><%= placeData.clan %></p><p>Playing: <%= placeData.playing %></p><p class="sCategory"><%= placeData.category %></p></div>
<% }); %>
</ul>
</div>
</section>
I get an error saying "SyntaxError: missing ) after argument list in index.ejs while compiling ejs". Thing is, on my other computer this is exactly the same written code and works perfectly fine. Is it an issue with ejs or is there something I'm missing that may be significant?
You should try to following suggestion. It works for me so it should work for you.
<%- include('./templates/header.ejs');%>
<%- include('./templates/announcement.ejs');%>
Related
I have struggled a lot with CarrierWave, so I made a small program to see if I could make that work:
require 'sinatra'
require 'dm-core'
require 'dm-migrations'
require 'carrierwave/datamapper'
class ImageUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
end
DataMapper.setup(:default, "sqlite3://#{Dir.pwd}/photogallery.sqlite3")
class Image
include DataMapper::Resource
property :id, Serial
property :title, Text
mount_uploader :image, ImageUploader
end
DataMapper.finalize
DataMapper.auto_migrate!
get "/" do
#images = Image.all
erb :index
end
post "/" do
image = Image.new(:title => params[:title])
image.image = params[:image]
image.save
redirect "/"
end
__END__
## index
<% #images.each do |image| %>
<p>
<%= image.title %>
</p>
<a href="<%= image.image.url %>">
<img src="<%= image.image.url %>">
</a>
<% end %>
<form action="/" method="post">
<label for="title">Title</label>
<input type="text" name="title"><br>
<label for="image">Image</label>
<input type="file" name="image"><br>
<input type="submit" value="Save">
</form>
It seems that I am unable to display the image when I upload an image from my computer. It is as if the images are not saved anywhere, so they can't be retrieved.
The anchor tag correctly references where the images should be, but there are no images.
What am I doing wrong?
Converted to an answer for #MrMos...
Nevermind, I found out. I did this instead:
require 'sinatra'
require 'dm-core'
require 'dm-migrations'
require 'carrierwave/datamapper'
DataMapper.setup(:default, "sqlite3://#{Dir.pwd}/development.db")
class ImageUploader < CarrierWave::Uploader::Base
storage :file
def store_dir
'images'
end
end
class Image
include DataMapper::Resource
property :id, Serial
property :title, Text
mount_uploader :file, ImageUploader
end
DataMapper.finalize
DataMapper.auto_migrate!
get '/' do
#images = Image.all
erb :index
end
post '/' do
Image.create(params[:image])
redirect to('/')
end
__END__
## index
<!DOCTYPE html>
<html>
<body>
<form action="/" method="post" enctype="multipart/form-data"></div>
<input type="text" name="image[title]" />
<input type="file" name="image[file]" />
<input type="submit" name="submit" value="Upload" />
</form>
<% #images.each do |image| %>
<p><%= image.title %></p>
<img src="/images/<%= images.file_identifier %>" />
<% end %>
</body>
</html>
I am trying to add two forms in my ejs page using ajax-form tags and sails.js 1.0.0. Can you have multiple tags inside one ejs page? In the first form the action is updateMaplayers which looks at the controller update-maplayers.js file to update any records and the maplayers action on the second ajax-form looks at the maplayers.js controller to add a new record. When I try to run either actions they both fail if I have both . If I remove one of the ajax-form actions I I can submit. Does anyone have any examples?
My ejs file looks like
<div id="maplayers-main" v-cloak>
<div class="container" >
<div class="row">
<div class="col-sm-6">
<h1>Map Layers</h1>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-outline-primary float-right" #click="openAddMapLayerForm()">Add</button>
</div>
</div>
<hr/>
<div id="maplayers-container" >
<% _.each(maplayers, function (maplayer) { %>
<ajax-form action="updateMaplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
......
</ajax-form>
<% }) %>
</div>
<div id="maplayers-add-container">
<ajax-form action="maplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
........
</ajax-form>
</div>
</div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
I'm harp js user and im curious if its possible to call another parital to the harp js parameter?
I would like to proceed with modularization to reuse the code.
It is difficult to use the parital function of harp to insert data into a module of a particular module into another module.
This is my sources:
//component/button.ejs
<button><%= lable %></button>
//component/tab.ejs
<div class="tab">
<div class="tab__nav">
<% for(var i in locals.payload){ %>
<div class="tab__nav-item"><%- locals.payload[i].name %></div>
<% }; %>
</div>
<div class="tab__content">
<% for(var i in locals.payload){ %>
<div class="tab__content-item">
<div class="container">
<%- locals.payload[i].content %>
</div>
</div>
<% }; %>
</div>
</div>
//page.ejs
<%- partial("component/tab",{
payload: [
{
name:'tab1',
content:`
<div><%= partial("component/button.ejs",{label:"btn"})%></div>
`
},
{
name:'tab2',
content: `
<div>111111</div>
`
}
]}) %>
I try to make rhomobile search in Fixed DB.
But it returns ALL entries in DB instead of the ones with given QID
<%=#questions.id%>
<% #antworts = Antwort.find(:conditions=>{'qid'=>#questions.id})%>
<% #antworts.each do |antwort| %>
<li>
<a href="sdfsdf">
<%= antwort.antwort %>
</a>
</li>
<% end %>
</ul>
Any idea why?
You need to pass :first or :all in the first argument:
Antwort.find(:all, :conditions=>{'qid'=>#questions.id})
Or change the method to find_all:
Antwort.find_all(:conditions=>{'qid'=>#questions.id})
I tried to use the afterAdd binding to add some trivial animation to the elements being added to my observableArray but it does not trigger anything.
I tought I had a problem with my animation code so I coded a small alert on the function but still does not work.
Here's some sample code for the div being templated:
<div id="resultList"
data-bind='template: { name: "searchResultTemplate",
afterAdd: function(elem){alert(elem)} }'
runat="server">
</div>
This is the template:
<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
<div class="searchresult">
<img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
<div class="searchresultinformationcontainer">
<span class="searchresulttitle" data-bind="text: Title"></span>
<br />
<div class="searchresultdescription" data-bind="text: Description">
</div>
<span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
<br />
Take me there
</div>
</div>
</div>
<br />{{/each}}
</script>
Any ideas?
You need to qualify the template attributes with foreach like so,
<div id="resultList" data-bind='template: {
name: "searchResultTemplate",
foreach: searchresult,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}' runat="server">
</div>
and then, not use {{each in the template, just template it for each item stand alone.
Here, foreach attribute helps keep track of changes to the object array