Add a new row dynamically after clicking a button in jquery - javascript

I have to create a form which can dynamically adds rows after clicking a button, below is the code. So basically I want to clone the row with id="ADD" after clicking the btAdd button in the next row.
I don't know what to add inside the append function? I have tried a few things but its not working. Thanks in advance.
$(document).ready(function(){
$("#btAdd").click(function(){
$("#ADD").append(" ");
});
});
</script>
</head>
<body>
<h1></h1>
<div id = "myDiv">
<form name="form1">
<table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
<tr>
<th>Place configuration here</th>
</tr>
<tr>
<td>Server Url: <input type="text" name="surl" id="surl"></td>
</tr>
<tr>
<td>
Filter Name: <input type="text" name="fname"id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</td>
</tr>
<tr id="ADD">
<td>
Filter Options: <input type="text" name="foptions"id="foptions">
<input type="button" name="ADDb" value="+" id="btAdd">
</td>
</tr>
<tr>
<td>
Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</td>
</tr>
<tr>
<td><input type="button" name="submitb" id="submitb" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>


try it:
$("#btAdd").click(function(){
$("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});


Try this
$("#btAdd").click(function(){
$("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");
});
where table1 is the table id.


<!DOCTYPE HTML>
<html>
<head>
<style>
#myDiv { margin: 0 auto; width: 800px; }
.tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
.tr .label { float: left; width: 115px; }
.tr .inputs { float: left; width: 230px; }
.tr .btns { float: left; width: 100px; }
.tr ul { margin: 0; padding: 0; }
.tr li { list-style: none; }
</style>
</head>
<body>
<div id = "myDiv">
<form name="form1">
<div class="tr">
Place configuration here
</div>
<div class="tr">
Server Url:
<input type="text" name="surl" id="surl">
</div>
<div class="tr">
Filter Name:
<input type="text" name="fname" id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</div>
<div class="tr" id="ADD">
<div class="label">Filter Options:</div>
<ul class="inputs">
<li>
<input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
</li>
</ul>
</div>
<div class="tr">
Filter Label:
<input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</div>
<div class="tr">
<input type="button" name="submitb" id="submitb" value="Submit">
</div>
</form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
$ul = $('#ADD ul'), $add = $('#ADD');
$add.on('click.add', '#btAdd', function() {
$ul.append(S);
});
$add.on('click.rm', '[name=rm]', function() {
$(this).closest('li').remove();
});
});
</script>
</body>
</html>

Related

How can I make the button below disabled until all the above section has at least clicked one

my code:
<div class="tables">
<form>
<table class="table table-bordered">
<thead>
<tr>
<th class="thheader">Monday</th>
<th class="thheader">Tuesday</th>
<th class="thheader">Wednesday</th>
<th class="thheader">Thursday</th>
<th class="thheader">Friday</th>
</tr>
</thead>
<tr>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012">10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"> 5pm - 7pm</label>
</center>
</td>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10">10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe"> 5pm - 7pm</label>
</center>
</td>
<td></td>
</tr>
</table>
</form>
</div>
</center>
<center>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" /><label for="btn1">Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" /><label for="btn2" class="labe1">Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" /><label for="btn3">Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" /><label for="btn4" class="labe1">Tuesday, March 21st</label>
</center>
<center>
<button class="disabled white cbtn1 c1" type="submit" id="submit" value="NEXT">NEXT<i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</center>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
enable_cb();
$(".colour-button").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.colour-button1").removeAttr("disabled");
} else {
$("input.colour-button1").attr("disabled", true);
}
}
</script>
CSS:
.colour-button {
display: none;
}
label:hover {
cursor: pointer;
}
.colour-button + label {
background: #c1c1c1;
color: white;
border-radius: 5px;
padding: 5px 10px;
}
.colour-button:checked + label {
background: #cf5630;
}
.thheader{
width:135px;
text-align:center;
background-color:#FAFAFA;
color: #18181d;
}
.tables{
width:800px;
}
.labe{
padding:5px 18px !important;
}
.colour-button1 {
display: none;
}
.colour-button1 + label {
background: #c1c1c1;
color: white;
border-radius: 5px;
padding: 18px 200px;
}
.colour-button1:checked + label {
background: #cf5630;
}
.labe1{
padding:18px 207px !important;
}
.cbtn1.disabled {
background-color: #c1c1c1;
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}
I want it that after I have chosen at least one from each section, to become enabled and be orange, and clickable. How is this possible since it is a button not an input? as you can see I have a javascript for already to make the second section not active if the first isn't chosen yet.

As you are using jQuery you can disable/enable Buttons (and other fields) with the following snippet.
$('#buttonID').prop("disabled", true);
Overall your question was not very clear to me. There are a lot of ways to accomplish what you want. For example you can use listeners or onClick events.
Here is a small fiddle (made more or less from your code) that activates a button if you select at least one date checkbox and one time checkbox: https://jsfiddle.net/3fc30k5s/
good luck :)

Javascript search box not appearing in Domtab

Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/

Need to use one field many times in one html form

I have two problems:
1- I need to enter more than one question in ContentQue field. First click on "Add New Question" button then enter a question, click OK, show the data, then again click on "Add New Question" button, but in this time the input is not shown?
2- I want to force the user to choose one module from select.
Thanks in advanced
<head>
<meta charset="utf-8">
<title>Add New Item</title>
<style>
#myquelist
{
overflow-y:scroll;
}
// To force the user enter data
.btn
{
background-color:#336;
color:#CC6;
border-radius:10px;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
opacity:0.5;
}
.txt
{
background-color:#09F;
color:#009;
border-radius:10px;
}
.err
{
color:#F00;
}
</style>
<!-- Java Script-->
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnquestion').click(function () {
$('#myquelist').hide('fast');
$('#Type3').show('fast');
});
$('#btnOK').click(function () {
var a=$('#ContentQue').val();
var b=$('#qlist').val();
var c=b+"<br>"+a;
$('#qlist').val(c);
$('#ContentQue').val('');
document.getElementById("Type3").style.height="150px";
document.getElementById("Type3").innerHTML=c;
$('#myquelist').show('fast');
});
$('#myquelist').hide('fast');
$('#Type3').hide('fast');
$('#Type2').hide('fast');
$('#ExamType1').click(function () {
$('#Type2').hide('fast');
$('#Type3').hide('fast');
$('#Type1').show('fast');
});
$('#ExamType2').click(function () {
$('#Type1').hide('fast');
$('#Type3').hide('fast');
$('#Type2').show('fast');
});
$('#ExamType3').click(function () {
$('#Type1').hide('fast');
$('#Type2').hide('fast');
alert("A");
//$('#myquelist').show('fast');
$('#Type3').show('fast');
});
// To force the user enter data in text box
$(" :text" ).addClass("txt");
$("p").hide();
$("#PageBody input:text select").blur(function()
{
if(!$(this).val())
{
$(this).parent("div").children("p").show();
$(this).parent("div").children("p").addClass("err");
}
else
{
$(this).parent("div").children("p").hide();
}
});
});
</script>
</head>
<body id="PageBody">
<header><h2>New Exam</h2></header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th><b>Assignment Title :
<td><div><input type="text" name="ExamTitle" autofocus ><p>Please Exam Title</p></div></td>
</tr>
<tr>
<th><b>Exam Type</b></th>
<td>
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked">File
<input type="radio" name="ExamType" value="Text" id="ExamType2">Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3">Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="myquelist">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="Type3">
<input type="text" id="ContentQue" name="ContentQue" >
<button type="button" id="btnOK" name="OK" >OK</button>
</div>
<input type="hidden" id="qlist" name="qlist">
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl" >
<option selected="selected" disabled="disabled" >Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px"; value="Save" />
</td>
</tr>
</table>
</form>
<?php
$qlist = $_POST["qlist"];
?>
</body>
</html>

This needed a fair amount of work. I had to clean up a few HTML issues and change the logic some.
First, much easier to use an Array to store the various questions. I would pass the array to your form handler, but I populated the qlist as you were shooting for.
Second, to show the questions, I used a List. Easier to work with later.
Third, I wrapped the different parts so they are easier to hide/show.
Fourth, I added in verification that a user entered a question when clicking ok and when they submit the form, to ensure they selected a Module.
HTML
<header>
<h2>New Exam</h2>
</header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th width="135px"><b>Assignment Title : </b></th>
<td>
<div>
<input type="text" name="ExamTitle" autofocus />
<p>Please Exam Title</p>
</div>
</td>
</tr>
<tr>
<th height="80px"><b>Exam Type :</b></th>
<td valign="top">
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked" />File
<input type="radio" name="ExamType" value="Text" id="ExamType2" />Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3" />Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="Type3">
<div id="addNew">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="addQuestion" style="display: none;">
<input type="text" id="ContentQue" name="ContentQue">
<button type="button" id="btnOK" name="OK">OK</button>
</div>
<div id="showQuestions" style="display: none;">
</div>
<input type="hidden" id="qlist" name="qlist">
</div>
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl">
<option selected="selected" disabled="disabled">Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px;" value="Save" />
</td>
</tr>
</table>
</form>
CSS
.btn {
background-color: #336;
color: #CC6;
border-radius: 10px;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
opacity: 0.5;
}
.txt {
background-color: #09F;
color: #009;
border-radius: 10px;
}
.err {
color: #F00;
}
#Type3 ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 150px;
overflow: auto;
}
#Type3 ul li {
list-style: none;
}
JQUERY
// Set Globals
var ql = [];
$(document).ready(function() {
// Set View State
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
// Set Action Functions
$('#btnquestion').click(function() {
$('#addNew').hide();
$('#addQuestion').show();
$("#ContentQue").focus();
});
$('#btnOK').click(function() {
var q;
q = $('#ContentQue').val();
if (q == "") {
alert("Please enter a Question.");
$("#ContentQue").focus();
return false;
}
ql.push(q);
$('#qlist').val(ql.join(","));
$('#ContentQue').val('');
if (ql.length > 0) {
var qtext = $("<ul>");
$.each(ql, function(i, v) {
qtext.append("<li id='que-" + i + "'>" + v + "</li>");
});
$("#showQuestions").html(qtext);
}
$("#addQuestion").hide();
$('#showQuestions').show();
$("#addNew").show();
});
$("#form1 input[name='ExamType']").click(function() {
var pick = $(this).val();
switch (pick) {
case "File":
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
break;
case "Text":
$("#Type1").hide();
$("#Type2").show();
$("#Type3").hide();
break;
case "Questions":
$("#Type1").hide();
$("#Type2").hide();
$("#Type3").show();
break;
}
});
});
$("#form1").submit(function(e){
e.preventDefault();
if($("#Modl option").eq(0).is(":selected")){
alert("Please select a Module.");
return false;
}
return true;
});
Working Example: http://jsfiddle.net/Twisty/ax2zds1o/6/
Things you may want to consider:
A button to remove a question from the list
How many questions do you want to allow? 100? 200? 1000? How will you pass a large number of questions?
Allowing the user to arrange the order of the questions in the list before submitting

Why is my JQuery DIV transparent?

My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?
Javascript
function popup() {
alert('opening popup');
var popup = $('.newpopup');
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html(data);
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();
});
})
I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do .getor .ajaxsince it couldn't load a page from the internet to the DIV.
What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?
The HTML is trivial
<div class="newpopup">
</div>
<button id="mypopup">popup</button>
My CSS which is like it is never reached is this
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
And the HTML that is the actual popup / div is this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<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>

There should be a clear solution to this and transparancy really
should not be a default state for an element so how come the element
renders with transparency?
Actually, unless you specify an explicit background colour for an element the default is that they are transparent. This is so that the real page background can show through.
Just putting a background colour (and a z-Index if appropriate) on the popup div should then make it appear as an overlay as expected.
If it's not working then something is preventing the (correct) CSS you've supplied from being used.
Perhaps you should remove the extra HTML body etc from the loaded page? You shouldn't have two <body> tags present in the page at once. If you can't change the loaded page (e.g. if it's also used as a standalone page) then try something like:
popup.empty().append($('body', data).children());
instead of:
popup.html(data);

use following code to apply the background color to the div
$(".newpopup ").css('background-color', 'white');

So, if I'm reading this right, your jQuery script is reading a .jsp file, which has the full header setion, body etc...
You should either place the contents of the popup into an iFrame or strip out all the tags before (and including) the <body> and after (and including) </body>

you will try this attributes in .newpopup class
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'opacity' : '0.80';
or
#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
filter:alpha(opacity=100);
}
#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}
<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>

increment the value of one td in a table

I have a page with an "add item" button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.
I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.
Here is the code with the button, ajax call, and javascript:
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function () {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
here is the page being called by the ajax:
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.
Thanks in advance!

Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.
You should probably set a unique id on your qty input, e.g.:
<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />
and then rewrite the increase/decrease functions to take the id of the field to modify. I don't actually speak PHP but you get the idea

Categories