I am trying to display the search query in the search bar in HTML.
But if the variable includes a space, the webpage is only going to display the first word.
Here is the code
app.get('/search', function(req, res) {
console.log(req.originalUrl,'oro')
console.log(req.query['search_query'],'aaaaaaa')
res.render('search.ejs', {
user : req.user,
query : req.query['search_query']
});
});
Here is the html code
<form action="/search" method="get">
<div class="form-group">
<input type="submit" class="btn btn-warning btn-lg" value = "search" style = "float: right"/>
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" value = <%= query %> class="form-control" name="search_query" style = "width:100%;"/>
</div>
</div>
</form>
query is the variable collected from the last webpage and passed to /search.
If I type in "I want to find xx", the webpage will only display "I" in the search box. However, in the console, the printout result is the full query " I want to find xx". The corresponding url is also correct "/search?search_query=I+want+to+find+xx".
Anyone has an idea? Thanks a lot!
Let's start with correcting your HTML, by using quotes in value:
<input type="text" value = "<%= query %>" class="form-control" name="search_query" style = "width:100%;"/>
Here under IE you should see a large error, on FF and Chrome browser will try to save the situation and catch only the first word.
Prolably rest of your words are used as attributes and ignored in this input.
Change <%= query %> to <%- query %> .
To add a new line or space while working with ejs, you will have to replace string parameters with HTML tags.
For example, here, I am replacing \n => < br/> to add a new line
<% var testVar = 'Line1\nLine2' %> <%- testVar.replace(/\n/g, '<br/>') %>
Change <%= query %> to <%- query.replace(/ /g, " ") %>
I struggled for hours to render text with spaces
Adding quotes seems to be the easiest solution to this
value = "<%= query %>"
to solve partial content change:
<%= to <%-
use: `` with "" inside
JS example:
let txt = "some text"
console.log(`"${txt}"`)
Related
Apologies if this is answered elsewhere, please point me in that direction.
Using Node and EJS, I have a form field for capturing the name of a brewery, this comes via an API...
<label>Brewery</label><br>
<input id="formBreweryName" class="form-control" type="text" name="breweryname" ><br>
<label>Beer Name</label><br>
<input id="formBeerName" class="form-control" type="text" name="beername" >
Here's the ejs that both displays the brewery name in a <ul> and contains the onclick handler for populating the form...
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
</ul>
And the javascript for porting the brewery name up to the form...
var addFormText = function( breweryName, beerName) {
document.getElementById('formBreweryName').value = breweryName;
document.getElementById('formBeerName').value = beerName;
}
the API passes me a brewery name like so...
brewery_name: 'Reuben\'s Brews',
I added the beer name in the code above for good measure.
The Issue
When there is an apostrophe in the brewery name, the brewery name will not show in the appropriate form field, BUT the brewery name does show in the section.
For most examples, the brewery name does not have an apostrophe. So the API brewery name shows up in the form field as expected. But as in the example above, the brewery name has an apostrophe, so the name will not show up in my form field.
I am hoping there is a non-javascript, pattern attribute solution that will let me optionally include apostrophes (or other unforeseen special characters) in the text. If not, then I'm open to javascript or other suggestions.
I see many examples of 'use pattern to exclude certain characters' or 'use pattern to force users to only use this given text pattern'. But I don't see anything that would allow for the optional inclusion of a character like an apostrophe (or any other optional inclusion of special characters).
If it seems like this is an issue beyond my form input field, I am happy to share more of my coding.
Not sure but i think the problem is that you need a double escape character before the accent, one for the ejs on the server and one for the js on the browser. Can you try using <%- instead of <%= (EJS doesn't escape characters).
Sorry i never used ejs... other try, very ugly...:
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<% objsofbeer.brewery.brewery_name = objsofbeer.brewery.brewery_name.replace("'","\\'"); %>
<% objsofbeer.beer.beer_name = objsofbeer.beer.beer_name.replace("'","\\'"); %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
or try playng with ` character instead " or '
I am fairly new to full stack development and I am trying to get a simple search form to work. The webpage is supposed to redirect the user to a page with a list of all videos containing the keyword. Whenever I type in a title that exists, I get :NoMethodError at /posts/:title/search
I've tried using a query but have failed.
This is my app.rb. I query all videos that contain :title.
get "/posts/:title/search" do
# authenticate!
#results = Video.all(title: params[:title])
if #results
erb :search_success
else
flash[:error] = "Video not found."
erb :search_success
end
end
This is search_success.erb where I want to have a list of the videos that contains the keyword in the title.
<div class="container">
<% #results.each do |r| %>
<h1><%= r.title %></h1>
<% end %>
</div>
This is navigation.erb where the search form lives.
<form action="/posts/:title/search" method="get">
<input type="text" type="text" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
Try changing
#results = Video.all(title: params[:title])
to
#results = Video.all(:title.like => "%#{params[:title])}%")
to get answers that don't need to match completely (i.e. match case etc.)
Also in your search form, you have two type attributes. You should change one of them to
name="title"
I'm trying to set up a webapp using Sinatra, and I've got it working currently where the user can enter a list of URLs into a textarea, click submit, and then some code is ran on the URLs and the user is redirected to a second page to view the result. I'd like to remove the redirection and display the results in another textarea on the same page(or even re-use the same text area) but I've so far been unsuccessful in this venture. Instead of displaying the result, the second textarea just displays the <%=res%> and the submitted URLs disappear.
ERB page
<h1>Put URLs Here</h1>
<form method="POST" action="">
<p><textarea id="urls" name="urls" rows="20" cols="60">
</textarea></p>
<input type="submit">
</form>
<br />
<br />
<h1>Results</h1>
<p><textarea id="results" name="results" rows="20" cols="60">
<%=res%>
</textarea></p>
app.rb
require 'sinatra'
get '/ip' do
erb :ip
end
post '/ip' do
res = Hash.new("")
u = params[:urls].lines("\n")
list = Ipcheck.new()
res = list.check(u)
erb :ip, :locals => {'res' => res}
end
What am I doing wrong? I've searched and have not been able to find a solution to this specific problem.
Use global variable instead of local.
<%= #res %>
and
#res = Hash.new("")
u = params[:urls].lines("\n")
list = Ipcheck.new()
#res = list.check(u)
erb :ip
I am pulling values from a database which are formatted as so:
147 cm<sup>2</sup>
The aim is to make the 147 cm value squared, but in the button elements it displays as 147 cm<sup>2</sup>
Here is my code, any help would be greatly appreciated:
<div class="catbuttons">
<% foreach (var ssitem in item.Items) { %>
<input type="button" class="BTN-FPC answer floatleft" value='<%: #Html.Raw(ssitem.itemvalue) %>' id='<%:ssitem.itemid %>' name='answer' />
<% } %>
</div>
An interested point is it works when the values aren't being inserted into button elements as such:
<div>
<% foreach (var ssitem in item.Items) { %>
<p style="text-align: justify;"><%: #Html.Raw(ssitem.itemvalue) %></p>
<% } %>
</div>
I found a solution in case any one with the same issue happens upon this question:
You can just paste a superscript 2 from the character map into your database. Simple solution.
I have this code
<%= form_for(:img, url: {action: "postodb"}) do |f| %>
<div id="image-preview">image here!</div>
<%= f.submit "Send to database" %>
<%end%>
Here <input type="image"> is added from a js file
var imageDiv = $("#image-preview");
imageDiv.html('<input type="image" name="img1" style="margin-left:146px"id="spiro-img" src="'+img+'"/>');
This all works fine..
Next I want to send this to the folder but it doesnt work
This is the code I have in the controller(referred from this site http://rohitrox.github.io/2013/07/19/canvas-images-and-rails/)
def postodb
data = params[:data_uri]
image_data = Base64.decode64(data['data:image/png;base64,'.length .. -1])
File.open("/public/uploads/somefilename.png", 'wb') do |f|
f.write image_data
end
end
This is the error I get
Plz help.
Using carrierwave gem for loading images.
First what your should to do is read a docs: http://www.w3schools.com/Tags/att_input_type.asp
image - Defines an image as the submit button.
Second what your should learn to read is logs. At screenshot you have section with params, and there is no data_uri key.
And finaly use the <input type='file' ... /> for upload. If you want beauty async upload with preview, you should look on jquery-file-upload gem instead.
P.S.: type='image' is a submit button with image.