Call a JavaScript function from HTML doesn't work - javascript

I have this function and HTML file:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen">
<link href="resources/css/printStyle.css" rel="stylesheet" media="print">
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function updateSubSubject(param)
{
selectList();
document.getElementById("addSubSubjectDialog").showModal();
document.getElementById("Departments_Select").value=param;
}
function selectList(){
var selectDepartment=document.getElementById("Departments_Select");
var selectSubjects=document.getElementById("Subjects_Select");
var departmentsArray =getList("departments");
var subjectsArray= getList("subjects");
for (var i = 0; i < departmentsArray.length; i++) {
var departmentsOption = document.createElement("option");
departmentsOption.value = departmentsArray[i];
departmentsOption.text = departmentsArray[i];
departmentsOption.name = departmentsArray[i];
selectDepartment.appendChild(departmentsOption);
}
for (var i = 0; i < subjectsArray.length; i++) {
var subjectsOption = document.createElement("option");
subjectsOption.value = subjectsArray[i];
subjectsOption.text = subjectsArray[i];
subjectsOption.name = subjectsArray[i];
selectSubjects.appendChild(subjectsOption);
}
}
</script>
</head>
<body class="grad" style="font-family: 'Open Sans', sans-serif;">
<div class="header"
style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;">
</div>
</div>
<div align="center" class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px" >
<form:form method="post" modelAttribute="sub_subjects">
<table dir="rtl" class="table" >
<th><label style="float:right;"><fmt:message key="subjectName" /></label></th>
<th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th>
<th><label style="float:right;"><fmt:message key="department" /></label></th>
<c:forEach items="${sub_subjects.sub_subjects_list}" var="subsubject" varStatus="status" >
<tr id="tr">
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td>
<td >
<input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>
</td>
</tr>
</c:forEach>
</table>
<br/>
</div>
</form:form>
</div>
</div>
</div>
</div>
</div>
<dialog id="addSubSubjectDialog" style="width:25%; height:35%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div>
<form action="addSubSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2>
</div>
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%; ">
<h2 style="float:right; width: 20%; font-size: 100%;">
<fmt:message key="select_subject" /> </h2>
<select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select>
</h2>
</div>
<div style="width:100%; hegit:20%; margin-top: 15%;">
<h2 style="font-size:100%;">
<h2 style="float:right; width: 20%; font-size: 100%;"> <fmt:message key="select_department" /></h2>
<select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select>
</h2>
</div>
<div style="height: 60px;margin-top:30% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
</body>
<script type="text/javascript">
function getList(listName){
var ListFromDB = [];
if(listName=="departments")
{
<c:forEach items="${departmentsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.inCurrentLanguage}"/>" );
</c:forEach>
}
else if(listName=="subjects")
{
<c:forEach items="${subjectsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.description}"/>" );
</c:forEach>
}
return ListFromDB;
}
</script>
</html>
The problem is that when I run this HTML file and click on the "editSubSubject" button nothing happens. The JavaScript function doesn't get called. When I remove the params of this function and call it like this: onClick="updateSubSubject()" it works fine and opens the dialog,
What is wrong in my code?


You are escaping your double quotes here, which is causing the error:
onClick="updateSubSubject("this is the text")"
You need to either escape the double quotes (using ") or use single quotes:
onClick="updateSubSubject('this is the text')"

Related

textbox is not showing on first click

I have input textbox that shows on click search button , but it does not show on first click it shows after first click or on double click. How to solve that.
My code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$(this).focus()
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>

Use show() before focus.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$()
$(this).show();
$(this).focus();
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>

The main issue with tghe code was the logic that you handled to hide the #locationsearchbox was wrong. You have to exclude the #loaction-search element aswell since we are already handling the click event of the same, or else the action will trigger twice
$("#loaction-search").click(function () {
$("#locationsearchbox").animate(
{
width: "toggle",
},
350,
function () {
$(this).focus();
}
);
});
$(document).on("click", function (e) {
var $target = $(e.target);
if (
!$target.closest(".clear-search").length &&
!$target.closest("#locationsearchbox").length &&
!$target.closest("#loaction-search").length
) {
$("#locationsearchbox").hide();
}
});
$(".clear-search").click(function () {
$("#locationsearchbox").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div
id="loaction-search"
style="
background-color: red;
padding: 5px;
width: 100px;
border-radius: 5px;
"
>
search
</div>
<table>
<tr>
<td>
<div style="position: relative">
<span class="clear-search"> X</span>
<input
type="type"
placeholder="search here"
name="name"
value=" "
id="locationsearchbox"
style="display: none"
/>
</div>
</td>
<td>
<a
title="Zoom to India"
id="loaction-search-2"
class="map-icon-search"
>
click
</a>
</td>
</tr>
</table>

Disable submit button until atleast one checkbox is checked

I have a foreach loop to generate checkboxes and I want to make sure that the submit button remains disabled until atleast one checkbox is checked by the user. But the button remains disabled even after a checkbox is checked.
:
Here's my jsp file
<%# 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 uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="bootstrap.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
</script>
<style type="text/css">
body {
background: #CCFFCC;
!
important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<title>Resolve</title>
</head>
<body>
<h2>Hi There!</h2>
<h3>Browse through all unresolved issues and choose to resolve
some:</h3>
<div style="background-color: transparent; !important"
class="table-responsive">
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button class="btn btn-primary btn-lg">Back</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Issue Id</th>
<th>Description</th>
<th>Status</th>
<th>Resolved?</th>
</tr>
</thead>
<form:form class="form-horizontal" modelAttribute="ticketForm"
action="${pageContext.request.contextPath }/contact/resolveissue"
method="get" id="myform">
<c:if test="${not empty form}">
<c:forEach var="listValue" items="${form}">
<tr>
<td>${listValue.ticketId}</td>
<td>${listValue.description}</td>
<td>${listValue.status}</td>
<td>
<div class="col-lg-10">
<input type="checkbox" name="resolve"
value="${listValue.ticketId}" class="form-control">
<form:errors path="resolve"></form:errors>
</div>
</c:forEach>
</c:if>
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button type="submit" class="btn btn-primary btn-lg"
disabled="disabled">Resolve</button>
</div>
</div>
<!-- <button type="submit" class="btn btn-primary btn-lg center-block">Resolve</button>
-->
</form:form>
</table>
</div>
</body>
</html>

You have to put all your js/jquery into the ready method as follows :
<script type="text/javascript">
$(document).ready(function(){
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
});</script>

This should do the trick:
$(function(){
$("#myform").on("change", "input", function(){
status=($("#myform").find("input:checked").length==0)?"disabled":"";
$("button").prop("disabled", status);
})
})
Here is the Fiddle to play with.

Programmatically Click a Button on Web GUI after passing from Login Page

I would like to programmatically Power on a Server Using SuperMicro Web GUI.
Initially the login page form http://server1 code is
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
After Typing the userename:password as ADMIN:PASSWORD it goes to a control page http://server1/cgi/url_redirect.cgi?url_name=mainmenu where the server can be switched on by clicking a button whose code is given below
<input type="button" class="btnStyle" id="btn_poweron" align="left" value="Power On">
The Entire HTML Code of the Login Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<link rel="stylesheet" href="../css/basic.css" type="text/css">
<script language="JavaScript">
if (window != top)
top.location.href = "/"; //location.href;
</script>
<style type="text/css"></style>
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
var lang_setting;
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
function checkform() {
if (Trim(form1.name.value) == "") {
alert(lang.LANG_LOGIN_INVALID_USERNAME);
form1.name.focus();
return;
}
if (Trim(form1.pwd.value) == "") {
alert(lang.LANG_LOGIN_INVALID_PASSWORD);
form1.pwd.focus();
return;
}
document.form1.submit();
return;
}
function checkEnt(e) {
var key = window.event ? e.keyCode : e.which;
if (key == 13) {
checkform();
}
}
function PageInit() {
var msg = document.getElementById("login_word");
msg.setAttribute("value", lang.LANG_LOGIN_LOGIN);
return;
}
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
</head>
<body onload="PageInit()">
<table style="margin: 0px; height: 100%; width: 100%" border="0" background="#FFFFFF" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 25%; vertical-align: bottom; text-align: center">
<table style="margin: 0 auto;" border="0" width="412px">
<tbody>
<tr>
<td>
<img src="../images/logo.gif" style="margin: 0px; padding: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="height: 75%; vertical-align: top; text-align: center">
<table class="login">
<tbody>
<tr>
<td>
<h3><script>document.writeln(lang.LANG_LOGIN_PROMPT);</script>Please Login
</h3>
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<br>
<br>
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<br>
<br>
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And the Entrie HTML Code of the PowerOn Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var lang_setting;
/*
EraseCookie("langSetFlag");
EraseCookie("language");
*/
EraseCookie("mainpage");
EraseCookie("subpage");
EraseCookie("RELOAD");
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
onunload = function() {
var url = '/cgi/logout.cgi';
var pars = '?time_stamp=' + (new Date());
var myAjax = new Ajax.Request(
url, {
method: 'post',
parameters: pars
} //reigister callback function
);
}
-->
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<style type="text/css"></style>
</head>
<frameset cols="100%,*" border="0" frameborder="no" framespacing="0">
<frame src="../cgi/url_redirect.cgi?url_name=topmenu" id="TOPMENU" name="topmenu" scrolling="yes" noresize="false" marginheight="0" marginwidth="0">
</frameset>
</html>

How to make my popup not transparent and sideways draggable?

I'm making a Jquery popup / dialog and I've manged to position it on the page at a click so that the div renders over the other elements but the page is transparent and when I drag it, I can drag it upwards and downwards but when I drag it sideways it resizes instead of moves. can you tell me what I could do to resolve these 2 issues?
It looks like this
My popup HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
The CSS is
.newpopup {
position: absolute;
top:50%;
left:50%;
}
The Javascript is
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
$.get('/PandoraArendeWeb/popup.jsp', function(data) {
popup.html(data);
popup.show('fast');
});
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
Please tell me how to
1) make the popup not transparent
2) make the popup sideways draggable
The HTML that actually activates the popup is trivial:
<div class='newpopup'>
</div>
<button>popup</button>
Thank you

Ok I created simple test case using jsfiddle here, i dont think theres anything wrong with your jquery but i believe it the ajax call so to test this as on your server to make sure your ajax call is working (as i cant), if your ajax call falls it will not popup. in the test case it will alert "Error".
HTML:
<button>popup</button>
<div class='newpopup'>
</div>
jQuery:
function popup() {
alert('opening popup');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
//Comment me out and use the version below to show working
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html("test");
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})​
​
CSS:
.newpopup {
position: absolute;
top:50%;
left:50%;
background-color:#ff0; //Yellow
} ​
EDIT
Just remembered try commenting out the ajax and use the bit below. the popup shows and you can drag it :)

In YUI3 why does Y.one return null?

I've got a webpage that validates as XHTML 1.0 Strict. I'm using YUI3 and I'm using the seed-file-based instantiation. In several places in my javascript code, I'm doing something like:
YUI().use("node", function(Y){
var node = Y.one("#my_element_id");
});
It works great, cross-platform, cross-browser, etc. in almost every case. However, I was testing yesterday, and I came across one time it didn't work. It made no sense to me, the element I was trying to grab was:
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...
</form>
I know for sure it is well-formed markup, so that's not the issue. If I do:
YUI().use("node", function(Y){
var node1 = Y.one("#component_form");
var node2 = document.getElementById("component_form");
var node3 = Y.one(document.getElementById("component_form"));
});
node1 is null, and node2 is the element I was looking for, and so is node3.
Anyone have a similar experience, or know if this is a YUI3 bug, or what?
Here is a full markup example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<!-- metadata -->
<title>Inventory Management System</title>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script src="./util.js" type="text/javascript"></script>
<style type="text/css">
td{
vertical-align:text-top;
}
legend{
border: 2px #D4D0C8 groove;
padding: 2px;
font-weight: bolder;
}
fieldset{
border: 2px #D4D0C8 groove;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 10px;
}
label{
font-weight: bold;
}
#err_container{
color: red;
display: none;
visibility: hidden;
margin: 10px;
}
#status_container{
color: green;
display: none;
visibility: hidden;
margin: 10px;
}
</style>
</head>
<body>
<div id="canvas">
<form id="st_frm" method="post" action="" style="display:none; visibility: hidden;">
<fieldset style="border:none; margin:0; padding:0;">
<input type="hidden" name="state" id="st" value=""/>
</fieldset>
</form>
<div id="navbar">
home
| components | products
</div>
<h1 id="main_h1">
Update Component
</h1>
<form id="component_form" method="post" action="/inventory/index.php">
<fieldset>
<legend id="component_form_legend">Component Information</legend>
<input type="hidden" id="component_form_id" name="id" value="8"/>
<input type="hidden" name="state" value="1"/>
<table>
<tr>
<td><label for="manufacturer_name_id">Manufacturer:</label></td>
<td><input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/></td>
</tr>
<tr>
<td><label for="manufacturer_part_number_id">Part Number:</label></td>
<td><input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/></td>
</tr>
<tr>
<td><label for="ct_id">Component Type:</label></td>
<td>
<select id="ct_id" name="component_type">
<option value="0">New Type</option>
<option value="5" >sfkd</option>
<option value="6" >qwrqew</option>
<option value="7" selected="selected" >Resistor</option>
</select>
<input id="nct_id" type="text" name="new_component_type" size="10" style="visibility:hidden; display: none;" />
</td>
</tr>
<tr>
<td><label for="description_id">Description:</label></td>
<td>
<textarea id="description_id" name="description" rows="3" cols="25">limits the flow of current...</textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input id="component_form_submit_button" type="button" value="Update Component"/>
<span id="component_form_hide_when_new" >
<input id="component_form_delete_button" type="button" value="Delete Component"/>
<input id="component_form_new_button" type="button" value="New Component"/>
</span>
<input id="component_form_delete" name="delete" type="hidden" value="0"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="error_container"> </div>
<div id="status_container"> </div>
</td>
</tr>
</table>
</fieldset>
</form>
<ul id="component_form_list">
<li>
Vishay 1123114123
</li>
</ul>
</div>
</body>
</html>
EDIT
IE 8 crashes on the var s = ... line because frm is null.
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one("#" + frmId);
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
but....
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one(document.getElementById(frmId));
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
works in both...

Did you miss one double quote?
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...

Categories

Resources