I am rendering partial on click using jquery. Here is the code for it
$('.actCell').click(function (){
alert('Load was performed.');
$.get('/policies/new', function(data) {
$('.policyAddForm').html(data);
});
});
Here is the controller code
def new
#policy = Policy.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: #policy }
end
end
This is my application.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Passport</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<%= stylesheet_link_tag "application", :media => "all" %>
</head>
<body>
<div class="header">
<div class="container">
<img src="/assets/ph_logo.png">
<div class="user"><%=current_user.email%> <div class="userDrop"></div></div>
<div class="userDropMenu">
<div class="userActRow">change password</div>
<div class="userActRow">sign out</div>
</div>
</div>
</div>
<div class="nav">
<div class="container">
<%= yield %>
</div>
</div>
<%= javascript_include_tag "application" %>
<%= yield :javascript %>
</body>
</html>
With above code the problem is my layout get messed up. Div I updated with partial form shows header so it is layout in a layout but my client_validation_gem properties work. as soon as I say layout false my layout issue get fixed but I lose the client_side_validation gem properties. I dont know what is the issue and I am really frustrated. Any help or direction will be very helpful. Thanks,
Looks like you're not loading the rails.validations and rails.validations.custom js files if you use layout: false. You may have to include them in the partial (something like this).
= javascript_include_tag 'rails.validations'
Edit
Just saw that you're adding the form dynamically. You'll also need to trigger client-side validations like this after adding the form:
$('form[data-validate]').validate();
Finally I figured out. I have to remove rails.validations.js file because it was outdated. And add '$('form[data-validate]').validate();' to js file as #David suggested. Thanks for help
Related
base.ejs:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
index.ejs:
<div class="container">
<!-- Button trigger modal -->
<h1>Welcome to Your Diary</h1>
<div>
<span class="label label-default">What would you like to do? </span>
<span class="label label-primary">Here are your Categories:</span>
</div>
</div>
I want block inheritance
EJS does not specifically support blocks, but layouts can be implemented by including headers and footers, like so:
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
https://github.com/mde/ejs#layouts
You could split base.ejs into two files, header and footer, like this:
header.ejs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
footer.ejs
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
</html>
Someone has made EJS with block inheritance capability (https://github.com/mafintosh/pejs)
Straight from the documentation (Retrieved on January, 1st, 2018):
Using blocks it's easy to implement template inheritance. Just declare
a base.html with some anchored blocks:
<body>
Hello i am base
<%{{ content }}%>
</body>
Then a child.html that renders base.html
<%{ './base.html' }%>
<%{ content %>
i am inserted in base
<%} %>
To render the example just render child.html
pejs.render('./child.html', function(err, result) {
console.log(result);
});
Looks pretty good. I'm going to try this on my own project.
You can use ejs-locals or ejs-mate engine for ejs
Sorry for being late. I am in the same situation. What you can do is to pass the content you want to render in the properties of the object. Like this:
<%- include('/partials/',{
title: 'my title',
tags: [
'<h1>Hi, my name is this</h1>'
]
});
%>
EJS does not support blocks, but this is the solution I have implementate. Hope it helps.
I'm a total jQuery noob and I'm trying to use Eric Martin's SimpleModal Confirm Override dialog box in an ASP.Net web page. It's not working - no surprise, I have no idea what I'm doing! Here's a simplified version of my aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Reimbursements.aspx.cs" Inherits="EAS.telecom.Reimbursements" MasterPageFile="~/common/default.master" Title="Reimbursements" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%# MasterType VirtualPath="~/common/default.master" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="Main">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='~/jquery/confirm/js/jquery.js'></script>
<script type='text/javascript' src='~/jquery/confirm/js/jquery.simplemodal.js'>
$.modal('#confirm');</script>
<script type='text/javascript' src='~/jquery/confirm/js/confirm.js'></script>
<script language="javascript" type="text/javascript">
//some regular javascript here
</script>
<asp:Panel runat="server" ID="pnlEmployeeInfo" Enabled="false">
<div id='content'>
<div id='confirm-dialog'>
<h3>Confirm Override</h3>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='~/jquery/confirm/img/confirm/header.gif' alt='' />
<img src='~/jquery/confirm/img/confirm/button.gif' alt='' />
</div>
</div>
//more controls, including an AJAX TabContainer
</asp:Panel></asp:Content>
When I run the page, I see the Demo button and the Demo link, but clicking on them does nothing. What am I missing? Can I use SimpleModal on an ASP.Net page? Within a Content control? Thanks much!
Multiple issues here.
A script tag with a src cannot also contain script body. So, this is invalid.
<script src='~/jquery/confirm/js/jquery.simplemodal.js'>$.modal('#confirm');</script>
If you use an ID, SimpleModal is called like so: $('#content').modal();
That call needs to be within a click event handler.
<script>
$(document).ready(function () {
$('a.confirm').click(function () {
$('#content').modal();
});
});
</script>
express version is 3.2.5, ejs version is 0.8.4
I want to serve stylesheets/style.css
I am doing this way in app.js
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
// render article.ejs
app.get('/u/:name/:day/:title', function(req,res){
Post.getOne(req.params.name, req.params.day, req.params.title, function(err, post){
if(err){
req.flash('error',err);
return res.redirect('/');
}
res.render('article',{
title: req.params.title,
post: post,
user: req.session.user,
success: req.flash('success').toString(),
error: req.flash('error').toString()
});
});
});
my structure is header.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Blog</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
article.ejs content is
<%- include header %>
<p class="info">
author：<%= post.name %> |
date：<%= post.time.minute %>
</p>
<p><%- post.post %></p>
<%- include comment %>
<%- include footer %>
When I access http://localhost:3000/
GET /stylesheets/style.css 304 9ms
while access localhost:3000/u/username/date/postname
GET /u/username/date/stylesheets/style.css 404 10ms
why it shows this /u/username/date/stylesheets/style.css directory
Any ideas?
You don't start your stylesheets path with a /. So it's loading "stylesheets/style.css" relative to whichever HTML file requested it.
I've got a new solution that contains several project 'groups'. Each group contains a Cloud Project, a Web Role Project and a Test Project. All Web Role Projects are MVC4.
One of the Web Roles is the entry point for the visitor. Parts of what the visitor will see, should come from the other Web Roles from within the solution. I cannot get it working and after spending several hours googling, I still cannot solve it. Maybe anyone can be helpful on this issue.
For example, I need to fill the header content with data that I can get from one of the other Web Roles. Let's call that controller HeaderController. The controller in the main project (HomeController) looks like this:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
//var headerController = new Generic.HeaderFooterContainer.Controllers.HeaderController();
//var foo = headerController.Index().ExecuteResult();
//ViewBag.Header = headerController.;
return View();
}
In the comments are some things I've tried to debug some things.
Here's the page layout of the main project. The body is still empty, as this problem is just about the page header which could be placed as html from the ViewBag or ViewData or even with an own #section.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="headerHolder">
<div class="innertube">
<div id="header">
#ViewBag.Header
</div>
</div>
</div>
<div class="contentHolder">
<div class="innertube">
<div id="content">
#RenderBody()
</div>
</div>
</div>
<div class="footerHolder">
<div class="innertube">
<div id="footer">
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bms")
#RenderSection("scripts", required: false)
</body>
</html>
The problem I face is that I just can't find out how I should make this work. How do I get the data in the header? A few things I've noticed are:
If I run the HeaderFooterContainer project in its dedicated solution, it works alright (I can get /Header and get the expected response displayed in the browser window)
If I run the Main project, I can see the home page, but if I ask for /Header, it can find the controller, but not the view. It's probably looking for the view in the main project although it is located in the HeaderFooterContainer project.
I would like to have static Titles in my code for different pages.
How would i go about this, it keeps using the app name in the title.
I have tried
1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site under construction</title>
</head>
<body>
<p id="notice"><%= notice %></p>
<p>
<b>Title:</b>
<%= #page.title %>
</p>
<%= link_to 'Edit', edit_page_path(#page) %> |
<%= link_to 'Back', pages_path %>
</body>
</html>
That did not work
I have tried rails page titles
not working is there something i am missing here.
I assume that is the contents of your view. The default rails project creates a layout that has the application name in the title element. Therefore, you are likely to have something not dissimilar to the following being sent to the browser:
<!DOCTYPE html>
<html>
<head>
<title>Sample application</title>
</head>
<body>
<div>
<!DOCTYPE html PUBLIC "…" SYSTEM "…">
<html>
<head>
<meta …/>
<title>Site Under Construction</title>
</head>
<body>
…
</body>
</html>
</div>
</body>
</html>
The file you need to edit should be app/views/layouts/application.html.erb