How to close frameset? - javascript

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

Related

JavaScript function has not been executing as expected in asp.net

I have a basic asp.net web form application harmonized with JavaScript. There is a jQuery calendar and I try to send selected date to server.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarSample1.aspx.cs" Inherits="CalendarApplication.CalendarSample1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker" onclick="datepickerSendData()"/></p>
<br />
<input ID="lblDates" />
<br />
<br />
<asp:Button ID="btnTamam" Text="Tamam" runat="server" OnClick="btnTamam_Click" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function datepickerSendData() {
document.getElementById("lblDates").innerHTML = "YOU CLICKED ME!";
}
</script>
The JavaScript function datepickerSendData has not behave as expected. I expect to change the content of the lblDates however, no change. Could you please point out the problem?
Thanks in advance.
There is no inner html as input is self closing tag.
document.getElementById("lblDates").value = "YOU CLICKED ME!";

capture image clicked in one page and display the same in another page HTML

Newbie to HTML...creating a custom furniture website with custom design tab which helps in designing your own furniture..now i wanted to capture the image clicked(out of many) by user in my main.html page and display the selected image in secondary.html page when the user navigates to second page to select the color for the sofa...Need help!
main.html
<div class="red">
<div class="blue">4 Seater <img src="images/4_Seater_Default.jpg" alt="4_Seater_Default.jpg" onclick="showImage('4_Seater_Default.jpg');" /></a></div>
<div class="blue">3 Seater<img src="images/3_Seater_Default.jpg" alt="3_Seater_Default.jpg" onclick="showImage('3_Seater_Default.jpg');" /></a></div>
<div class="blue">2 Seater<img src="images/2_Seater_Default.jpg" alt="2_Seater_Default.jpg" onclick="showImage('2_Seater_Default.jpg');" /></a></div>
<div class="blue">1 Seater<img src="images/1_Seater_Default.jpg" alt="1_Seater_Default.jpg" onclick="showImage('1_Seater_Default.jpg');" /></a></div>
Page 1:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Page 1</title>
<script type="text/javascript">
function filename(){
var fullPath = document.getElementById("image").src;
var filename = fullPath.replace(/^.*[\\\/]/, '');
var fileid = filename.split("\.")[0];;
window.location.href = "test2.jsp?imgid="+fileid;
}
</script>
</head>
<body>
<IMG id="image" SRC="images/1.png" width="100px" alt="Logo" onclick="filename();">
</body>
</html>
Page 2:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Page 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imageId = location.search.split('imgid=')[1];
document.getElementById('image').src = "images/"+imageId+".png"; \\it will set the value of the img src to 1.png which is passed from the previous page
});
</script>
</head>
<body>
<IMG id="image" SRC="images/2.png" width="400px">
</body>
</html>
EDIT
In Page1 onclick event we are simply calling the filename() function. This function in turn is appending the imageId in the url of the second page. Now, when you land on the second page, the $(document).ready(function(){}) is taking the imageId from the url and setting the SRC of the <IMG> tag with the image 1.png.
Try below code:
function showImage(imagePath){
window.location.href= "www.yourdomain.com/yourDirectory/path/showImage?image_path="+imagePath;
}
and on the above url you can use this path to show image + any other content, whatever is required.

Jquery Color box popup is not working with Firefox when nested iframe and FrameSet is used

I have used jquery color box pop up and it is working fine with Google chrome but not working with Firefox.
I have 3 pages Default.aspx, Default2.aspx & Default3.aspx
Default3.aspx is nested inside Default2.aspx and Default2.aspx is nested inside Default.aspx.
Complete source code is as follows:
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">
<frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0"
scrolling="AUTO" noresize="noresize">
</frameset>
</html>
Default2.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<table style="width:100%">
<tr>
<td>
<iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
</td>
</tr>
</table>
</body>
</html>
Default3.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
function fn_openPopUp(url) {
$.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
}
</script>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
<form>
<div>
<img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
<map name="P1">
<area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
coords="237,196,237,265,400,265,400,196" />
</map>
</div>
</form>
</body>
</html>
Now I am browsing Default.aspx from google chrome then it is working fine but not with Firexfox
Colorbox PopUp will be open, when you remove the attribute target="_top" from in Default3.aspx page.
You can do this:
$('map area[target="_top"]').removeAttr('target');

Selenium can not find javascript element

I want to do login a page with this code:
driver.findElement(By.xpath(".//*[#id='uiPostGetPage']")).sendKeys("admin");
But selenium can not find this element because i checked source code there isn't an element which called uiPostGetPage
There is the site's source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Airties</title>
<script type="text/javascript" src="/lang.js"></script>
<script type="text/javascript" src="/js/Definitions.js"></script>
<script type="text/javascript">
<!--
document.title = "AirTies " + __DEF_BuildProfile;
if (top.frames.length!=0)
top.location=self.document.location;
// -->
</script>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Cache-control" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">
<script language="JavaScript" type="text/JavaScript">
<!--
document.title = "AirTies " + __DEF_BuildProfile;
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<frameset rows="115,*" frameborder="NO" border="0" framespacing="0">
<frame src="top_login.htm" name="topFrame" scrolling="NO" noresize >
<frame src="loginmain.html" name="mainFrame">
</frameset>
<noframes>
<body>
</body></noframes>
<head>
<META HTTP-EQUIV="Cache-control" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1">
</head>
</html>
If you looked there isn't any element which contains login codes.
What can i do to sendKeys this hidden uiPostGetPage element?
I suspect the desired element is inside an iframe. Switch to it:
driver.switchTo().frame("mainFrame");

Jquery basic function test call is not working?

My Jsp is ,
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- <%#include file="include.jsp"%> --%>
<%# taglib prefix="form" uri="../tld/spring-form.tld"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../jquery/jqueryChat.js"></script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" value="Ajax Submit" onclick="madeAjaxCall()">
</body>
</html>
My JqueryChat.js will be .,
function madeAjaxCall(){
alert("Hello 99");
alert($("#test").val());
}
When I click the button I am getting the error as ,
I need to get the value of the text-box in the alert.
Good answers are definitely appreciated.
Hi you need to call jquery object onload before you are using on click event here..As $(document).ready().So only ist
The following code works perfectly for me.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function(){
alert("Hello 99");
alert($("#test").val());
});
});
</script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" id="button" value="Ajax Submit">
</body>
</html>
Check if your jquery.js and jqueryChat.js are downloaded from proper place.
Put your JS code in $(document).ready(function() { .. });
Use $("#button").click(function(){ instead of
onclick="madeAjaxCall()"

Categories