I try to add JQuery DataTable to my JSP page but nothing happens. I ckecked that all files: jquery.dataTables.js, jquery.dataTables.css, jquery.js is found.
Here's my JSP page:
<%# page contentType="text/html; charset=UTF-8" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<script type="text/javascript"
src="<c:url value="resources/jquery.js"/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="resources/jquery.dataTables.css"/>" />
<script type="text/javascript"
src="<c:url value="resources/jquery.dataTables.js"/>"></script>
<script type="text/javascript">
$(function() {
$("#student").dataTable();
});
</script>
</head>
<body>
<table id="student">
<thead>
<tr><td>Students</td></tr>
</thead>
<tbody>
<c:forEach var="student" items="${students}" varStatus="loopCounter">
<tr>
<td>${loopCounter.count}</td>
<td>${student.studentFullName}</td>
<td>${student.studentBook}</td>
<td>${student.groupStudent.groupStudentNumber}</td>
<td>${student.studentEnter}</td>
<td>${student.studentOKR}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
Related
I use Code A and get a result as I expected.
But Ifind there are many repeated code in Code A, such as the string "textAreaInput" are found in many places.
So I use a const InputID to store the string "textAreaInput" and use the const in many place in Code B, but Code B can't get the correct result, why ?
Code A
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
</script>
<script src="Js/jquery-3.6.3.min.js"></script>
<script src="Js/my.js"></script>
<link href="Css/Main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<textarea id="textAreaInput">
Hello
</textarea>
<input type=button value="Clear" onclick="clearInput('textAreaInput')">
</asp:Content>
my.js File
function clearInput(inputID) {
$('#' + inputID).val('')
}
Main.css File
#textAreaInput {
font-size: 14px;
line-height: 1.6;
}
Code B
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
const InputID = "textAreaInput"
</script>
<script src="Js/jquery-3.6.3.min.js"></script>
<script src="Js/my.js"></script>
<link href="Css/Main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<textarea id= InputID> //I rewrite
Hello
</textarea>
<input type=button value="Clear" onclick="clearInput(InputID)"> //I rewrite
</asp:Content>
...The same
I use MYSQL Workbench as the database,I have 3 columns uname,orderdet,ordercost under the orders table.I have to retrieve the values from the database to the jsp webpage for a single user.
details.jsp
<%# page import="javax.servlet.http.*,javax.servlet.*"%>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<!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=UTF-8">
<title>JSP Cart</title>
</head>
<body>
<sql:setDataSource var="mydb" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/form" user="root" password="sudhakar" />
<sql:query dataSource="${mydb}" var="listUsers">select orderdet,ordercost from orders where uname =" <%=session.getAttribute("name") %>"</sql:query>
<div align="center">
<table border="1" cellpadding="5">
<caption><h2>Cart Details</h2></caption>
<tr>
<th>order</th>
<th>ordercost</th>
</tr>
<c:forEach var="user" items="${listUsers.rows}">
<tr>
<td><c:out value="${user.orderdet}" /></td>
<td><c:out value="${user.ordercost}" /></td>
</tr>
</c:forEach>
</table>
<button>Go back
</button>
</div>
</body>
</html>
I have a javascript file (jquery.visualize.plugin.js) that displays a chart.
First, I display in a .aspx page with a repeater control. So I have this :
And and just below I have the graphic. It works well in .aspx page.
Now, I would like display in HTML page but it doesn't work.
Here is my Html page :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
<title></title>
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
</head>
<body>
<headertemplate>
<table id="table_campaigns" class="display">
<caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
<thead>
<tr>
<td></td>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</tr>
</thead>
</headertemplate>
<itemtemplate>
<tbody>
</tbody>
</itemtemplate>
<footertemplate>
</table>
</footertemplate>
</body>
</html>
Here is my .aspx page that works well :
<%# Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="Page_Statistiek_2.aspx.cs" Inherits="PageWebSage100.Page_Statistiek_2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script language="javascript" type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="JavaScript/jquery.visualize.plugin.js"></script>
<link type="text/css" rel="stylesheet" href="Css/base.css"/>
<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css"/>
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server" OnItemCreated="Repeater1_ItemCreated">
<HeaderTemplate>
<table>
<caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
<thead>
<tr>
<td></td>
<th scope="col"><asp:Label runat="server" ID="Ym4"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym3"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym2"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym1"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym0"></asp:Label></th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<th style="text-align:left" scope="row"><%# DataBinder.Eval(Container.DataItem, "Interventie") %></th>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[0],2) %></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[1],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[2],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[3],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[4],2)%></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I just added the script in the head tag.
Ps : I use a dataTable in HTML page.
What's wrong?
You're trying to use parts of ASP.NET Repeater control in HTML page. This is not going to work since Repeater works only in ASPX pages (with corresponding code-behind to handle databinding and/or rendering (i.e. Repeater1_ItemCreated).
If you want to display content of that page in an HTML page - you have couple choices - for example use IFRAME and display original ASPX page in the IFRAME within HTML page or use jQuery .load() method to load content of ASPX page into container DIV within the HTML page.
As an alternative if you want to reuse table HTML table already rendered by Repeater - just copy/paste table element (table, tbody, tr, th, td elements in their entirety) but to not include any HeaderTemplate, ItemTemplate, FooterTemplate tags.
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.
I have a page where i have used framsets.
Top Frame = header information(Like logout, login user information etc)
left Frame = Menu Items
Center Frame = Data pages for the corresponding clicked menu
My problem is when i try to log out from the application The logout functionalist is called in header section and it also works find but the other frames are not closed.
How to over come this :
This the overall design with formsets
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%# taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%# taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%# page contentType="text/html"%>
<%# page pageEncoding="UTF-8"%>
<%
String resourcePath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<title>SecureEyes - Infusing Security</title>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/frameset.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/commonForHomePageTemplate.js"></script>
<script language="javascript">
<!--
var opt_no_frames = false;
var opt_integrated_mode = false;
var _help_prefix = "";
var _help_module = "";
var _context = "";
//-->
</script>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="64,*">
<form method="post" >
<frame border="0" frameborder="0" framespacing="0" id="topFrame" name="topFrame" src="<%=resourcePath%>/common/header.jsp" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no">
<frameset border="0" frameborder="0" framespacing="0" id="MainFrameSet" cols="209,*">
<frame noresize="noresize" border="0" frameborder="0" framespacing="0" id="leftFrame" name="leftFrame" src="<%=resourcePath%>/common/left_menu.jsp" >
<frame border="0" frameborder="0" framespacing="0" id="workFrame" name="workFrame" src="<%=resourcePath%>/common/WelcomePage.jsp" marginheight="7" marginwidth="7" noresize="noresize" scrolling="auto">
</frameset>
<input type="hidden" id="method" name="method" />
</form>
</frameset>
</html>
this is the place where i have logout functionalities :
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%# taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%# taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%# page contentType="text/html"%>
<%# page pageEncoding="UTF-8"%>
<%#page import="com.secureyes.eswastha.struts.viewmodel.UserViewModel"%>
<%
String resourcePath = request.getContextPath();
UserViewModel userVM = new UserViewModel();
if(session.getAttribute("userDetails")!=null){
userVM = (UserViewModel) session.getAttribute("userDetails");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="https://indedev.com:8443/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/commonForHomePageTemplate.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/header_data/prototype.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/header_data/tooltip.js"></script>
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/general.css">
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/custom.css">
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/layout.css">
<link rel="stylesheet" type="text/nonsense" href="<%=resourcePath%>/header_data/misc.css">
<script>
var tooltip;
var opt_no_frames = false;
var opt_integrated_mode = false;
function logOut(){
top.close();
document.forms[0].action="LogoutAction.htm";
document.forms[0].method.value="loginPage";
document.forms[0].submit();
}
</script>
<script>
history.forward();
</script>
</head>
<body onload="SetContext(''); " onunload="" id="topCP">
<div class="body">
<form method="post">
<table cellspacing="0" width="100%">
<tbody>
<tr>
<td class="companyLogo"><span class="topLogo"><img src="<%=resourcePath%>/header_data/logo.png" name="logo" border="0" height="53"></span></td>
<td>
<div id="topTxtBlock" class="withTopRightLogo">
<span id="topTxtLoggedInAs">Logged in as <b><%=userVM.getUsername()%></b></span>
<span id="topTxtMyAccount"><a class="tootlipObserved" name="" id="" href="#" onmouseover='tooltip.set(event, [{"type":"string","string":"View preferences of your control panel account."}]);' onmouseout="tooltip.hide();" >My account</a></span>
<span id="topTxtLogout"><a class="tootlipObserved" href="#" onclick='if (confirm("Are you sure you want to log out?")) logOut("logout"); return false;' onmouseover='tooltip.set(event, [{"type":"string","string":"Log out of eSwastha."}]);' onmouseout="tooltip.hide();">Log out</a></span>
</div>
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="method" name="method" />
</form>
</div>
<div style="position: absolute; top: 14px; left: 1111px; display: none;" class="tooltip">View preferences of your control panel account.<br></div>
</body>
</html>
When i press refresh than everything is loading again, so how to disable refresh and back and forward functionality using javascript ?
Simple answer: Don't - use - frames