how to make a popup window centered - javascript

I have a jsp page which calling a function getModify() in utility.js file. that function performing some action and redirecting some values to next jsp page using window.open()..
am getting the another jsp page as popup window.. how to get the popup window center of the screen.
my jsp:
<%# 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">
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="script/Utility.js" data-dojo-config="parseOnLoad: true"></script>
</head>
<body>
<div dojotype="dijit.MenuBarItem" id="SearchMenu21" onclick="getModify();" style="font-size:11pt;" title="menuBarItem">
<img class="images" id="SearchMenu21" name="search5.png" onclick="setImgProperty(this.id)" src="images/uploads/search.png" style="height:20px; width:20px;">
Modify
</div>
</body>
</html>
here is my utility.js file:
function getModify(){
var whereCondn = "";
//alert(gbshowgridFlag);
if(dijit.byId('dynamicgridCWPROCESS')){
var selctedItem = dijit.byId('dynamicgridCWPROCESS').selection.getSelected();
if(selctedItem.length){
dojo.forEach(selctedItem, function(selectedItem){
if(selectedItem !== null){
dojo.forEach(dijit.byId('dynamicgridCWPROCESS').store.getAttributes(selectedItem), function(attribute){
var value = dijit.byId('dynamicgridCWPROCESS').store.getValues(selectedItem, attribute);
//alert(value);
if(attribute == "PROCESS_ID"){
whereCondn = whereCondn+attribute+"="+value;
}
//alert("new alert"+whereCondn);
window.open("modifyTask.jsp?MODIFY="+response,'title','height=600px,width=800px,scrollbars=no,sizable=yes,toolbar=no,statusbar=no');
});
}
});
//alert("grid row selected");
}else{
alert("grid row not selected");
}
}
if(gbshowgridFlag==false){
alert("grid not loaded");
}
}

You can also pass "top" and "left" properties for the popup.
window.open("modifyTask.jsp?MODIFY="+response,'title','height=600px,width=800px,scrollbars=no,sizable=yes,toolbar=no,statusbar=no,top='+ topVar + ',left='+leftVar);
Use calculations based on screen.height , and your optimal popup size to decide topVar and leftVar

Please try:
var x = screen.width / 2 - 800 / 2;
var y = screen.height / 2 - 600 / 2;
window.open("modifyTask.jsp?MODIFY="+response,'title' ,'height=600px,width=800px,scrollbars=no,sizable=yes,toolbar=no,statusbar=no,left=' + x + ',top=' + y);

Related

I get a red curve line when using f-string

def email_verification(email,password):
message = Mail(
from_email='hesheitaliabu#gmail.com',
to_emails=email,
subject='HEY BABYYYYYYYYYYYYYYYYYYY',
html_content=f"""
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<body>
<button onclick="myFunction()">Replace document</button>
<script>
function myFunction() {
window.location.href = "email_verify/" + email + "/" + password;
}
</script>
</body>
</html>
""")
Sg = sendgrid.SendGridAPIClient(api_key=os.environ.get('MyAPI'))
Sg.send(message)
I have define a function called "email_verification" on FLASK to send the email with HTML design. I have used the f-string for the HTML content. But, I get a red curve line under the line of window.location.href = "email_verify/" + email + "/" + password;.
You need to escape literal braces {} in f-Strings in python.
You do this by doubling them. e.g.
def email_verification(email,password):
message = Mail(
from_email='hesheitaliabu#gmail.com',
to_emails=email,
subject='HEY BABYYYYYYYYYYYYYYYYYYY',
html_content=f"""
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<body>
<button onclick="myFunction()">Replace document</button>
<script>
function myFunction() {{
window.location.href = "email_verify/" + email + "/" + password;
}}
</script>
</body>
</html>
""")
Sg = sendgrid.SendGridAPIClient(api_key=os.environ.get('MyAPI'))
Sg.send(message)
Notice here in the syntax highlighting how the body of myFunction is part of the f-String (green) and not a template variable (white) as in your question.
See https://realpython.com/python-f-strings/#braces

Previous Next Buttons in JQuery

I'm trying to make previous and next buttons for viewing this pdf converted to html. I thought I should jump to the next anchor since each page has it's own anchor written like this:
<a href="ArduinoHtmls.html#1" target="contents" >
However when I use $(location).attr('pathname');
I get "/ArduinoHtml.html" no matter what page I'm viewing, so I can't subtract and add 1 like I was thinking of doing. Below is where I got and the files I have.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".previous").click(function(){
// Needed Code Help
});
$(".next").click(function(){
// Needed Code Help
});
});
</script>
</head>
<body>
<h2>Previous and Next Buttons</h2>
« Previous
Next »
</body>
</html>
This is the ArduinoHtml.html file:
<!DOCTYPE html>
<html>
<head>
<title>Arduino and LEGO Projects</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="generator" content="pdftohtml 0.36"/>
<meta name="author" content="Jon Lazar"/>
<meta name="keywords" content="www.it-ebooks.info"/>
<meta name="date" content="2013-09-06T04:13:41+00:00"/>
<meta name="subject" content="IT eBooks"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<frameset cols="100,*">
<frame name="links" src="ArduinoHtml_ind.html"/>
<frame name="contents" src="ArduinoHtml-1.html"/>
</frameset>
</html>
This is the ArduinoHtml_ind.html file:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<title></title>
</head>
<body>
Outline<br/>
<a href="ArduinoHtmls.html#1" target="contents" >Page 1</a><br/>
<a href="ArduinoHtmls.html#2" target="contents" >Page 2</a><br/>
<a href="ArduinoHtmls.html#3" target="contents" >Page 3</a><br/>
<a href="ArduinoHtmls.html#4" target="contents" >Page 4</a><br/>
<a href="ArduinoHtmls.html#5" target="contents" >Page 5</a><br/>
<a href="ArduinoHtmls.html#6" target="contents" >Page 6</a><br/>
<a href="ArduinoHtmls.html#7" target="contents" >Page 7</a><br/>
Below is an image of what opening ArduinoHtml.html looks like. I'm new to this so I'm trying to give all the information I can.
Thank you very much in advance.
Webpage
Use window.location.href instead:
$(".previous").click(function(){
var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) - 1;
window.location.href = window.location.href.split("").push(nextPage).join("");
});
$(".next").click(function(){
var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) + 1;
window.location.href = window.location.href.split("").push(nextPage).join("");
});
Looks complicated, but here's what it does:
var nextPage = window.location.href.split("")[window.location.href.length - 1] - 1;
This gets the current path (window.location.href), makes it an array .split(""), obtains the last character (the number) ([window.location.href.length - 1]) and subtracts 1 (-1;). Same follows for the Next button, except it's adding rather than subtracting.
window.location.href = window.location.href.split("").pop().push(nextPage).join("");
This makes the current URL (window.location.href) equal to the current URL (window.location.href), turns it into an array (.split("")), takes off the last character (the number) (.pop()), adds the new digit to the end (.push(nextPage)) and turns it back into a string (.join("");).
If the page is more static, you can do something like:
var pages = 7;
var currentPage = 0;
var pageUrl = "ArduinoHtmls.html";
$(function(){
$(".previous").click(function(e){
e.preventDefault();
if(currentPage == 0){
return false;
}
var prevUrl = pageUrl + "#";
if(currentPage == 1){
prevUrl + "outline";
} else {
prevUrl + (--currentPage).toString();
}
$("frame[name='contents']").attr("src", prevUrl);
});
$(".next").click(function(e){
e.preventDefault();
if(currentPage == pages){
return false;
}
var nextUrl = pageUrl + "#" + (++currentPage).toString();
$("frame[name='contents']").attr("src", nextUrl);
});
});
If the page is less static, you can still use a lot of this untested code. One minor difference:
var pages = $("a[target='contents']", window.frames[0].document).length;
I am suspicious that this code will not work right away. It's a little hard to understand the relationship of each of the pages as you have described it. I suspect you either want this code in the ArduinoHtml.html, yet I do not know where your buttons will reside since this page is only the frameset page and I suspect you will end up having to make a new frame to contain the HTML for your buttons.
If you decide to create a frame to contain the buttons, then the code is a little more complex:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
var frames = window.parent.frames;
var pages = $("a[target='contents']", frames[0].document).length;
var currentPage = 0;
var pageUrl = "ArduinoHtmls.html";
var contentFrame = frames[1];
$(".previous").click(function(e){
e.preventDefault();
if(currentPage == 0){
return false;
}
var prevUrl = pageUrl + "#";
if(currentPage == 1){
prevUrl + "outline";
} else {
prevUrl + (--currentPage).toString();
}
contentFrame.location.href = prevUrl;
});
$(".next").click(function(e){
e.preventDefault();
if(currentPage == pages){
return false;
}
var nextUrl = pageUrl + "#" + (++currentPage).toString();
contentFrame.location.href = nextUrl;
});
});
</script>
</head>
<body>
<h2>Previous and Next Buttons</h2>
« Previous
Next »
</body>
</html>
So hopefully this helps answer your post yet I think it also opens a can of worms for you too.

How to retrieve multiple values from the database using JavaScript?

<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="APIToDatabase.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<<head>
<title></title>
<script type="text/javascript">
function connectDb()
{
var ConnDB = new ActiveXObject("ADODB.Connection");
ConnDB.ConnectionString="Driver={ODBC Driver 13 for SQL Server};Server=tcp:yueloongserver.database.windows.net,1433;Database=LocationDatabase;Uid=;Pwd=;Encrypt=yes;TrustServerCertificate=no;Connection Timeout=30;";
ConnDB.Open();
var Rs = new ActiveXObject("ADODB.Recordset");
var tempstr = "";
Rs.Open("select Latitude,Longitude from dbo.GPS",ConnDB);
while(!Rs.EOF === true)
{
tempstr = tempstr + Rs("Latitude") + "" + Rs("Longitude");
Rs.MoveNext;
}
test.innerHTML = tempstr;
}
</script>
</head>
<body>
<p><div id=test> </div>
<p><input id="button1" type="button" value="Run" name="button1" onclick="connectDb();"></p>
</body>
</script>
Hi, i am having the problem where i am able to only retrieve one column from the database. However, i would like to retrieve all the columns from the database table.

why javascript doesnt run

I am learning JavaScript.
I've written this code, but it does not seem to run.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript">
function nav(){
try{
var str="<table border=1>";
for (var n in navigator){
str+="<tr><td>" + n + "</td></tr>";
}
str+="</table>
return("jetzt wird das Ding aufgelistet: <br/>" + str);
}catch(e){return(e);}
}
function writeit(){
document.write(nav());
}
</script>
<title>for learning purpos</title>
</head>
<body>
<form>
<script>
document.write(nav());
</script>
<p>press the button to get the properties in navigator</p>
<input type="button" id="btnNavigator" value="get" onclick="writeit();"/>
</form>
</body>
</html>
You haven't closed one string.
str+="</table>";
Best practice is to look into the console from developer tab, inspect page. Also on that tab on the bottom, you can try javascript code or even jQuery if you have the library added.
Your code it's wrong at line 13 you have Invalid or unexpected token because you didn't close the string and at line 30 nav it's not defined.
You can use this code:
function navBuild(n)
{
var tblS = "<table>";
var tblE = "</table>";
var strTrTd = "";
for (i=1; i<=n; i++)
{
strTrTd = strTrTd + "<tr><td>" + i + "</td></tr>";
}
var strAll = tblS + strTrTd + tblE;
console.log(strAll);
document.getElementById("contentBox").innerHTML = strAll;
}
And in your HTML you could use:
<input type="button" id="btnNavigator" value="get" onclick="navBuild(5);"/>
<div id="contentBox"></div>

I lose focus from the main page

I am opening a window that is not in my domain and I can not do to maintain the focus on my window. This is the code.
The work is only for IE.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var win = window;
var myOptions = "width=300,height=250,top=300px,left=300px,toolbar=0,location=0,status=0,scrollbars=0,menubar=0,directories=0,resizable=0";
var myWinReplace = true;
var myWinName = "xwin";
var myUrl = "http://www.google.com";
var myOpen = window.open(myUrl, myWinName , myOptions, myWinReplace);
window.focus(); //option 1
$(myOpen).load(function(){
window.focus(); //option 2
win.focus(); //option 3
setTimeout(function() { window.focus(); }, 500); //option 4
setTimeout(function() { win.focus(); }, 1500); //option 5
});
});
</script>
</head>
<body>
</body>
</html>
I think you can do this:
myOpen.opener.focus();
Here is a link for more information

Categories

Resources