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
Related
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 want to set CssClass="form-control" to every textbox in my master page
So what should I do?
You can do the following:
In master page code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//added next line
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
public partial class Site1 : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
//https://stackoverflow.com/questions/23710337/add-class-into-html-tag-by-jquery-in-asp-net-c-sharp
//https://www.experts-exchange.com/questions/25280443/How-to-iterate-through-all-controls-with-masterpage.html
var x = new object();
foreach (Control c in Controls)
{
foreach (Control masterControl in Page.Controls)
{
if (masterControl is MasterPage)
{
foreach (Control formControl in masterControl.Controls)
{
if (formControl is HtmlForm)
{
foreach (Control cont in formControl.Controls)
{
if (cont is TextBox)
{
((TextBox)cont).Attributes["class"] = "form-control";
}
}
}
}
}
}
}
}
}
}
In aspx of master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" />
<asp:TextBox runat="server" ID="textbox2" />
<asp:TextBox runat="server" ID="textbox3" />
<asp:TextBox runat="server" ID="textbox4" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Try this, just add CssClass on your control, that's it:
<asp:TextBox CssClass="form-control" runat="server"></asp:TextBox>
Make sure your bootstrap has reference on your Master Page style, under the Head section:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<%--Added Bootstrap Style Here--%>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</style>
In my masterpage i have placed the ContentPlaceHolder ID="head" inside the head tags and the ContentPlaceHolder ID="MainContent" inside the body tag. When I'm using the code without masterpage, it works fine. Can anyone see what I'm doing wrong?
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no" />
<link href="styles/basic.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery.responsivetable.min.js"></script>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setupResponsiveTables();
});
function setupResponsiveTables() {
$('.responsiveTable1').responsiveTable();
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:GridView ID="GridView1" runat="server" RowStyle-Wrap="false" CssClass="responsiveTable1"
AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" DataKeyNames="id" >
<Columns>
<asp:BoundField DataField="Stilling" HeaderText="Stilling" />
<asp:BoundField DataField="Fornavn" HeaderText="Fornavn" />
<asp:BoundField DataField="Etternavn" HeaderText="Etternavn" />
<asp:BoundField DataField="Telefon" HeaderText="Telefon" />
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<RowStyle Wrap="False"></RowStyle>
</asp:GridView>
</asp:Content>
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>
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