Hi there I'm new on Ror and Js,
I would like to install the algolia Instantsearch on my app, my products appear on algolia index, but I cannot succeed to display my Instantsearch and results on my html page (products index)
If anyone can help me, that would be great :-)
thks in advance
Here is my my code:
layout I included:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
product.rb (model):
include AlgoliaSearch
algoliasearch if: :active? do
attribute :name, :brand, :category, :color, :size, :price
end
search.html.erb:
<div>
<input id="search-input" placeholder="Search for products">
<!-- We use a specific placeholder in the input to guides users in their search. -->
</div>
</header>
<main>
<div id="hits"></div>
<div id="pagination"></div>
</main>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.js"></script>
<script src="app.js"></script>
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
app.js:
var search = instantsearch({
// Replace with your own values
appId: "012967GRTQ",
apiKey: "a3f100606d982f64d7c25410c672f5f5", // search only API key, no ADMIN key
indexName: 'Product',
urlSync: true,
searchParameters: {
hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-input'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination'
})
);
search.start();
config/initializers/algoliasearch.rb
require 'rubygems'
require 'algoliasearch'
Algolia.init application_id: "XXXXXX",
api_key: "xxxxxxxxxxxx"
index = Algolia::Index.new("Product")
And I imported the css from:
.....github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css.....
The following ressources:
GET http://localhost:3000/app.js 404 (Not Found)
GET http://localhost:3000/js/main.js 404 (Not Found)
Here is my layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>XXXXXXX</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= javascript_include_tag "https://js.stripe.com/v2/" %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<link rel="stylesheet" type="text/css" href="css/jTinder.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
<%= favicon_link_tag 'favicon.ico'%>
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/message' %>
<%= yield %>
<%= javascript_include_tag "https://maps.google.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerclusterer/src/markerclusterer_compiled.js" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" %>
<%= javascript_include_tag 'application' %>
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- transform2d lib -->
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
<!-- jTinder lib -->
<script type="text/javascript" src="js/jquery.jTinder.js"></script>
<!-- jTinder initialization script -->
<script type="text/javascript" src="js/main.js"></script>
<%= yield(:after_js) %>
<%= render 'pages/footer' %>
</body>
</html>
Related
I am trying to access variables passed from the server to the client with ejs
My server file:
router.get('/', function (req, res, next) {
res.render('chat', {user: req.user, message: null});
});
My client file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Simple Chat App</title>
</head>
<body>
<header>
<h1>Super Chat</h1>
</header>
<section>
<div id="change_username">
<input id="username" type="text"/>
<button id="send_username" type="button">Change username</button>
</div>
</section>
<section id="chatroom">
<section id="feedback"></section>
</section>
<section id="input_zone">
<input id="message" class="vertical-align" type="text"/>
<button id="send_message" class="vertical-align" type="button">Send</button>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<% var user = <% user %> %>
console.log(user);
</script>
<script src="chat.js"></script>
</body>
</html>
I get an error:
Could not find matching close tag for "<%".
How do I fix this?
<% var user = <% user %> %>
You can't nest <% %> blocks. You are either inside EJS mode or outside it. You can't go into Extra Deep EJS Mode.
Aside, you also can't just output a variable into client-side JS. You need to generate JavaScript source code from the variable. JSON.stringify is a good way to generate object, array and string literals from objects, arrays and strings.
<script>
const user = <%- JSON.stringify(user); %>
console.log(user);
</script>
Note that use of <%- to output without escaping for HTML.
The problem is here, you just have to replace the value of the user in the template.
var user = "<%=user%>" // Please change this line
Updated Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Simple Chat App</title>
</head>
<body>
<header>
<h1>Super Chat</h1>
</header>
<section>
<div id="change_username">
<input id="username" type="text"/>
<button id="send_username" type="button">Change username</button>
</div>
</section>
<section id="chatroom">
<section id="feedback"></section>
</section>
<section id="input_zone">
<input id="message" class="vertical-align" type="text"/>
<button id="send_message" class="vertical-align" type="button">Send</button>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var user = "<%= user %>" // problem is here
console.log(user);
</script>
<script src="chat.js"></script>
</body>
</html>
I Hope this helps you.
it says that it cannot find closing tag for your ejs template.
you don't need the surrounding ejs template notation in script.
<script type="text/javascript">
var user = '<%= user %>'
console.log(user);
</script>
Try this.
GOOD LUCK. :)
I am using EJS and I need to set meta tags for every post. I have boilerplate in the layouts folder, which I include on each page. When the user enters the posting page, I need to set dynamic meta tags and title.
My boilerplate
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include ../partials/navbar.ejs %>
<div class="container-fluid">
<% include ../partials/filter.ejs %>
<div class="row">
<div class="col-sm-12 col-lg-10">
<%- body -%>
</div>
<div class="col-sm-12 col-lg-2">
<% include ../partials/sidebar %>
</div>
</div>
</div>
</body>
</html>
I am trying to pass title to the posting page in this way
res.render('post/index', {title: post.meta.title, post: post});
But I have an error that title is not defined in the boilerplate;
if i understood the problem correctly, i made a sample for you.
mongoose schema for posts
const postScheme = new Schema({
"title": String,
"description": String, // meta description
"robots": String, // index or noindex
"lang": String, // en, fr, tr
"pathname": String, // post-pathname
"main": String // post body content
})
Get the post data and rendered.
Post.findOne({ _id: req.params.id }, (err, data) => {
res.render('post/index', { 'data': data })
}).lean()
and edit .ejs file.
<!doctype html>
<html lang="<%= data.lang %>">
<head>
<meta charset="UTF-8">
<title> <%= data.title %> </title>
<meta name="description" content=" <%= data.description %> "/>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include ../partials/navbar.ejs %>
<div class="container-fluid">
<% include ../partials/filter.ejs %>
<div class="row">
<div class="col-sm-12 col-lg-10">
<%- data.main %>
</div>
<div class="col-sm-12 col-lg-2">
<% include ../partials/sidebar %>
</div>
</div>
</div>
</body>
</html>
Do you render title variable in all pages? If not that's why you get undefined error. Check for undefined with locals object and enclose your variable in title html tags.
In case you don't render a title variable you can set a generic title for the rest of the pages
<title> <%= locals.title ? title : 'Α generic title' %> </title>
I was wondering how I would do it; use a function written in a external javascript file and then use it in ejs.
Here's the code;
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script>
<script src='/javascripts/index.js'></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.css">
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<% include header %>
<section class='header-placeholder'></section>
<section class='game'>
<% items.forEach(function(item){ %>
<% hi(); %>
<% }); %>
</section>
<% include footer %>
</body>
I'm trying to call the function hi() which is written in index.js like so;
function hi(){
console.log('hello');
}
is there any way I can access this function, or could I somehow have the function in ejs and access it from js?
I have following component
///assets/js/app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="greeting">
<h1> Hello World! </h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and html
<!--/templates/layout/app.html.eex-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello Sandbox!</title>
<%= if Mix.env == :dev do %>
<link rel="stylesheet" href="http://domain:8080/styles.css">
<% else %>
<link rel="stylesheet" href="<%= static_path(#conn, "/css/app.css") %>">
<% end %>
</head>
<body>
<div id="root">123</div>
<%= if Mix.env == :dev do %>
<script src="http://domain.ru:8080/app.js"></script>
<% else %>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<% end %>
</body>
</html>
My webpack config is here https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9 . When I open my page, all scripts are loaded from server, but nothing works. No errors or warnings thrown. Webpack compiles and outputs scripts. But on page I can see only 123. What's wrong?
Sry, I can't comment yet, but could use ReactDom.hydrate method instead of render.
It should work in your case.
Problem in webpack.config.js in https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9#file-webpack-conf-js-L9-L10 this broke javascript in browser. I do not know why, but it's true.
I'm currently trying to set up a very basic lightbox effect for a login in a Rails application. I'm using a the plugin Lightbox Evolution. Usage is as follows per the directions:
Make sure it is a valid DOCTYPE.
Include the jQuery library lightbox CSS and the lightbox js file in the head of the pages where you want to use the lightbox
Initialize the plugin:
<script type="text/javascript"
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
The jquery.lightbox.min.js and jquery.lightbox.css are located in the vendor/assets/javascripts and vendor/assets/stylesheets directories respectively.
I've included the lightbox script in the application.html.erb file since I plan on using the lightbox effect on other places on the site.
My application.html.erb file looks like:
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "jquery.lightbox.css", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery.lightbox.min" %>
<%= csrf_meta_tags %>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
</html>
My landing page is app/views/welcome/index.html.erb:
<h1>Landing Page</h1>
Login
and I use the class "lightbox" per the instructions.
When I go to localhost:3000, the html is built as follows in development environment:
<!DOCTYPE html>
<html>
<head>
<title>MetaLinx Material Management</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/containers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scales.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/welcome.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.lightbox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/containers.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.ui.timepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.datetimepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.colorpicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filter-box.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-multiselect.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-select.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.remote-form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.pjax.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_nested_form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.nested-form-hooks.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.widgets.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/custom/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/rails_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/scales.js?body=1" type="text/javascript"></script>
<script src="/assets/welcome.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.lightbox.min.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NGWSCp8qKAwi52ViQNfSP+2WG4teWxwOzCDCFfqQaLc=" name="csrf-token" />
</head>
<body>
<p class="notice"></p>
<p class="alert"></p>
<h1>Landing Page</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
Login
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
I'm using devise for authentication, so it sets up the routes for users/sign_in. When I click the link above, it takes me to the page users/new, but it does not pop-up in the lightbox. the generated html looks like:
app/views/sessions/new.html.erb:
<h2>Sign in</h2>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<div><%= f.submit "Sign in" %></div>
<% end %>
<%= render "devise/shared/links" %>
So the question is what am I doing wrong so that when I click the "Login" link in app/views/welcome/new.html.erb it take me to the login page rather than popping it up using the lightbox jQuery?
Try change href="users/sign_in" to href="#". Since the link really doesn't matter if you just wanna click on it and let lightbox pops out the login form.