following is my template code :
<html>
<head>
<style>
.table
{
display:table;
border-collapse:separate;
border-spacing:2px;
}
.thead
{
display:table-header-group;
color:white;
font-weight:bold;
background-color:grey;
}
.tbody
{
display:table-row-group;
}
.tr
{
display:table-row;
}
.td
{
display:table-cell;
border:1px solid black;
padding:1px;
}
.tr.editing .td INPUT
width:100px;
}
</style>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script>
var counter = 0;
var txt1 = "group_save";
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "input";
newText.name = txt1+counter;
//newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
function edit(element){
var tr = jQuery(element).parent().parent();
if(!tr.hasClass("editing")) {
tr.addClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).text();
jQuery(this).text("");
jQuery(this).append('<input type="text" value="'+value+'" />');
} else {
jQuery(this).find("BUTTON").text("save");
}
});
} else {
tr.removeClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value1 = jQuery(this).find("INPUT").val();
alert(value1);
jQuery(this).text(value1);
jQuery(this).find("INPUT").remove();
} else {
jQuery(this).find("BUTTON").text("edit");
}
});
}
}
</script>
</head>
<body >
<form name="group" method="post" action="process.cgi">
<div id="mainContainer">
<div><input type="button" value="Add" onClick="addNew()"></div>
</div>
<div><input type = "submit" value = "Save"></div>
</form>
[% IF count > 0%]
<b>Details of Groups</b><br>
<div class= "table">
<div class = "thead">
<div class = "tr">
<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
</div>
</div>
<div class= "tbody">
[%- SET i = 0;
WHILE i < id.size; -%]
<form class = "tr">
<div class = "td"> [% id.$i %]<br/></div>
<div class = "td"> [% group_name.$i %]<br/></div>
<div class = "td"> [% group_desc.$i %]<br/></div>
<div class = "td">[% actv.$i %]<br/></div>
<div class = "td action" ><button type="button" onclick="edit(this);">edit</button> </div>
<form>
[%- SET i = i + 1;
END -%]
</div>
</body>
</html>
while i run my cgi code, i got the following template error.i checked my code and didn't find that evident, which gives the error.could any one please help me track this error.so that, i can go with the rest of the modifications in the file.that is i want to save the changed content in the database.???
updated :
error ---
Undefined subroutine &main::ThrowTemplateError called at /var/www/html/centralbugzilla/groups.cgi line 24.
line no 24 is : $template->process("list/group.html.tmpl",$vars)
|| ThrowTemplateError($template->error());
Firstly, you shouldn't assume that people will just know which templating system you are using. It looks to me like you are using the Template Toolkit, but there are many template engines for Perl.
Secondly, the template is a complete red herring here. The problem is in your Perl code. When the template can't be processed successfully, your code calls a function called ThrowTemplateError, but Perl can't find that function anywhere. Where is that function defined?
(Ok, I suppose it could look like the problem is in your template and not the code. There's some error in your template which means that TT can't process it and therefore the missing function is called. So fixing the error in your template will mean that the missing function no longer gets called. But it's still missing. And it will be a problem again the next time you accidentally break your template. So best to fix it now, I think.)
Related
I'm the biginer . I have tried to append span into the list items which i have been dynamically created.But its not working. Within the function this code is working But Outside its not working...
Listcheck[i].appendChild(span); its not appending properly
var listcheck = document.getElementsByTagName("LI");
var span = document.createElement("SPAN");
for (var i = 0; i <= listcheck.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
span.textContent = "X";
span.className += "closeicon";
listcheck[i].appendChild(span);
}
function searchinput() {
var li = document.createElement("li");
var inputtext = document.getElementById("client_course").value;
var t = document.createTextNode(inputtext);
document.getElementById("myUL").appendChild(li);
li.appendChild(t);
}
<html>
<head>
<link rel="stylesheet" href="css/mainstyle.css">
<script src="JS/todo_JS.js"></script>
</head>
<header>
<div class="main">
<div class="checkportion">
<div class="chk_b">
<ul id="myUL">
</ul>
<input type="checkbox" class="check_class" id="check1">
<label for="check1">Javascript</label>
</div>
</div>
<div class="search_portion">
<Input type="text" id="client_course">
<input type="Submit" Value="add" onclick="searchinput()">
</div>
</div>
</header>
</html>
Your first block of code must not perform when script is loaded
because no one li in body at that time. Lis are added only when user
click button.
Where is your client_source?
var inputtext = document.getElementById("client_course").value;
3.Where is your MyUL?
document.getElementById("myUL").appendChild(li);
4.Your function searchinput creates li but does not append it to document. Therefore here:
listcheck[i].appendChild(span);
you have an error. listcheck[i] is undefined because no one li is appended.
UPD
It throws an error because this script performs one time, it is not a function that performs after some actions.
Page is loaded
Script performs (but function does not, because it performs only
after click on button)
3. Your first block does not see any LI so it
is undefined Solutions:
Create event and dispatch it to your
element
(developer.mozilla.org/ru/docs/Web/API/EventTarget/dispatchEvent)
Use MutationObserver
I'm very new to JQuery.
I already can, get the data from textbox and do some calculation and show it to other 'textbox' though I want to post it to 'div' or 'p' whatever it is as long as not textbox.
here's my code
<div id="result" style="display:none;">
<div class="col-sm-5 text-right"><label>Participant fee (IDR):</label></div>
<div class="col-sm-7"id="parcost" ></div>
<div class="col-sm-5 text-right"><label>Populi fee (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="popcost"></div>
<div class="col-sm-5 text-right"><label>Total Estimated Cost (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="totcost"></div>
</div>
$(document).ready(function(){
$('#calc').click(function(){
var num_participant = parseInt($("num_participant").val());
var reward = parseInt($("reward").val());
var esttime = parseInt($("esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
/*
document.getElementById("result").style.display = "block";
document.getElementById("parcost").value = parcost;
document.getElementById("popcost").value = popcost;
document.getElementById("totcost").value = totcost;*/
document.getElementById("result").style.display = "block";
$("#parcost").html(parcost);
$("#popcost").html(popcost);
$("#totcost").html(totcost);
return false;
});
});
Still wont work, if I change it from "document.getelementById" to "$".
and even using "document.getelementById" it won't showed on the "div".
any ideas?
I'm not sure if you're asking this but try something like this,
var totCost = document.getElementById("totcost").value;
$("#yourDivID").html(totCost);
I'm not sure what you are asking about but if you want to send the result to a div, just use $("#divId").html(result)
I think that you must use .text or .html in place .value.
look at this example using jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>
If you wish to add a result in a div try with:
jQuery("#divID").append("<p>" + data + "<p>");
To update the content of a <div> or <p> element, you would use innerHTML instead of value.
So in your sample code you would update this line:
document.getElementById("parcost").value = parcost;
into this:
document.getElementById("parcost").innerHTML= parcost;
Furthemore, since you are already using jQuery, you can simplify your click function:
$('#calc').click(function(){
var num_participant = parseInt($("#num_participant").val());
var reward = parseInt($("#reward").val());
var esttime = parseInt($("#esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
$("#result").css("display", "block");
$("#parcost").html(parcost);
$("#popcost").val(popcost);
$("#totcost").val(totcost);
});
<!DOCTYPE html>
<html>
<head>
<title>Business Card</title>
<script type="text/javascript">
window.onload = init;
function init(){
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields(){
document.getElementById("businessCard").innerHTML = "Business Card Info";
document.getElementById("name").innerHTML = "Name";
}
</script>
</head>
<body>
<div id="businessCard">
<div id="name"></div>
</div>
<input type="button" value="populate fields" id="populateFields">
</body>
</html>
I can see div with id, 'businessCard' updated with "Business Card Info" but, I the div inside that with id 'name' is not getting updated.
innerHTML on outer div clears out your inner div . save the inner div before using innerHTML on outer div.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
//save inner div
var innerdiv = document.getElementById("name");
innerdiv.innerHTML = "Name";
var outerdiv = document.getElementById("businessCard");
outerdiv.innerHTML = "Business Card Info";
// add inner div back
outerdiv.appendChild(innerdiv);
}
<div id="businessCard">sme
<div id="name">fdfdf</div>
</div>
<input type="button" value="populate fields" id="populateFields">
Since some say innerHTML is evil because of it's consequences in DOM. Another solution is to use .firstChild.nodeValue.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
document.getElementById("businessCard").firstChild.nodeValue = "Business Card Info";
document.getElementById("name").firstChild.nodeValue = "Name";
}
<div id="businessCard">
<div id="name"> </div>
</div>
<input type="button" value="populate fields" id="populateFields">
I've been trying to get this to work and thought it would be relatively easy but i'm just unable to target my div's with javascript.
I want a list of boxes and each one will be clickable and each one has a buddy which is hidden. when you click a , it hides and shows its buddy which will have an input box. Type the text in you need and press ok and it changes back to it's original displaying the text you have entered.
the head contains the following:
<head>
<script language="javascript">
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>
And then my HTML contains:
<div id="div0">
<a href="#" onclick="showhide('div1');" style="text-decoration:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
Input: <div id="showinput"></div>
</div>
</a>
</div>
<div id="div1" style="display:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
<input type="text id="addInput" /">
<input type="submit" value="submit" name="submit" onclick="showhide('div1');" />
</div>
</div>
I'm trying to add the following but it just won't update the original and the script just makes the buddy div show below the original. How can i hide the original at the same time?
var myobj = document.getElementById("addInput");
var mytext = myobj.value;
document.getElementById("showinput").innerHTML = mytext;
You are missing a closing quote around type="text so the input id is not set. Try:
<input type="text" id="addInput" />
I have an html file, in which, i want to edit the fields.
Following is my html code :
<body>
<div class= "table">
<div class = "thead">
<div class = "tr">
<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
<div class = "td"></div>
</div>
</div>
<div class= "tbody">
<form class = "tr">
<div class = "td">1</div>
<div class = "td">hello</div>
<div class = "td">hwryou</div>
<div class = "td">y</div>
<div class = "td action" ><button type="button "onclick="edit(this);">edit</button> </div>
<form>
</div>
</div>
</body>
following is my javascript code :
<script language="javascript" type="text/javascript" src="serialize-0.2.min.js">
function edit(element){
var tr = jQuery(element).parent().parent();
if(!tr.hasClass("editing")) {
tr.addClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).text();
jQuery(this).text("");
jQuery(this).append('<input type="text" value="'+value+'" />');
} else {
jQuery(this).find("BUTTON").text("save");
}
});
} else {
tr.removeClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).find("INPUT").val();
jQuery(this).text(value);
jQuery(this).find("INPUT").remove();
} else{ jQuery(this).find("BUTTON").text("edit");
}}); }
}</script>
while creating the out put, when i click the edit button, it is showing the reference error edit is not defined.what may be reason for that?
updated :
i have an other requirement that, on clicking the save button, the changed content should be saved in the database.How can and where i should write the update query? also i required a delete button so that on clicking the delete button, an update command should run.HOw can i achieve this ?/
A script can be inline or external, it cannot be both.
The presence of the src attribute causes the text node children of the script node to be ignored.
If you want inline and external scripts, use two script elements.
<script src="serialize-0.2.min.js"></script>
<script>
function edit(element){
// etc
<script type="text/javascript" src="serialize-0.2.min.js"></script>
<script type="text/javascript">
function edit(element){
// Your Code
}
</script>
Try this.