I have modified this javascript code that I found on jsfiddle. My aim is to display tables when a link has been clicked, and when clicking on a different link it displays a different table and hide the previous table. Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<script>
var elem=document.getElementById("loginTable");
var hide = elem.style.display =="none";
var elem2=document.getElementById("loginTable2");
var hide2 = elem2.style.display == "none";
function toggleTable(){
if (hide){
elem.style.display="table";
elem2.style.display="none";
}
else{
elem.style.display="none";
}
}
function toggleTable2(){
if (hide2){
elem2.style.display="table";
elem.style.display="none";
}
else{
elem2.style.display="none";
}
}
</script>
</head>
<body>
<a href="#" id="loginLink" onclick="toggleTable();return false" >Business Cards</a>
<table id="loginTable" border="1" align="center" style="display:none">
<tr>
<td>
Business card table
</td>
</tr>
</table>
<a href="#" id="loginLink" onclick="toggleTable2();return false" >Letterheads</a>
<table id="loginTable2" border="1" align="center" style="display:none">
<tr>
<td>
Letterhead table
</td>
</tr>
</table>
</body>
</html>
It worked on jsfiddle, but when I place it on my HTML page, it won't run.
Any suggestions?
Also, I have no knowledge of JavaScript, I have only modified it and it ran on jsfiddle, but not my HTML page.
when your script load its not find DOM elements so its not working
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<a href="#" id="loginLink" onclick="toggleTable();return false" >Business Cards</a>
<table id="loginTable" border="1" align="center" style="display:none">
<tr>
<td>
Business card table
</td>
</tr>
</table>
<a href="#" id="loginLink" onclick="toggleTable2();return false" >Letterheads</a>
<table id="loginTable2" border="1" align="center" style="display:none">
<tr>
<td>
Letterhead table
</td>
</tr>
</table>
<script>
var elem=document.getElementById("loginTable");
var hide = elem.style.display =="none";
var elem2=document.getElementById("loginTable2");
var hide2 = elem2.style.display == "none";
function toggleTable(){
if (hide){
elem.style.display="table";
elem2.style.display="none";
}
else{
elem.style.display="none";
}
}
function toggleTable2(){
if (hide2){
elem2.style.display="table";
elem.style.display="none";
}
else{
elem2.style.display="none";
}
}
</script>
</body>
</html>
if you want to use script in head section you need to write window.onload function
<script>
window.onload=function(){
// your JS code
}
</script>
Related
I was able to display a block of text in a td after mouseover event, however I aim to reset, i.e display oringinal content of the td on mouseout/mouseleave the code i used is as follow. pls help
I get an undefined error when the code is run. i think the problem is seeting the event to element variable.
<html>
<head>
<title></title>
<script>
<!--
var content=new Array()
content[0]='Menus first'
content[1]='Menu Second'
content[2]='Menu Third'
function changetext(whichcontent){
document.getElementById("descriptions").innerHTML=whichcontent
}
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=temphtml;
}
//-->
</script>
</head>
<body>
<table width="400" border="1">
<tbody>
<tr>
<td><div id="scriptmenu" onmouseleave="reset()">
<p><a href="index.html" onMouseover="changetext(content[0])" >Menu First</a><br>
Menu Second<br>
Menu Third<br>
</p>
</div></td>
<td><div id="descriptions" align="left">
<p><b>Welcome</b><br>
Enjoy!<br>
</div></td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
if (document.all)
var temphtml=descriptions.innerHTML;
</script>
</body>
</html>
Try this example. add onmouseout with every onmouseover
Other change to focus on
var defaultData = document.getElementById("descriptions").innerHTML;
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=defaultData;
}
<html>
<head>
<title></title>
<script>
<!--
var content=new Array()
content[0]='Menus first'
content[1]='Menu Second'
content[2]='Menu Third'
function changetext(whichcontent){
document.getElementById("descriptions").innerHTML=whichcontent
}
//-->
</script>
</head>
<body>
<table width="400" border="1">
<tbody>
<tr>
<td><div id="scriptmenu" >
<p>Menu First<br>
Menu Second<br>
Menu Third<br>
</p>
</div></td>
<td><div id="descriptions" align="left">
<p><b>Welcome</b><br>
Enjoy!<br>
</div></td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
var defaultData = document.getElementById("descriptions").innerHTML;
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=defaultData;
}
</script>
</body>
</html>
I have a webpage where multiple user information details is there.so when i click on the complete (here complete button is there beside every user details) button it should do some task(eg. I'm sending mail here) and disable the button after i redirected to same page again.
How do I do it?
Any possible suggestion?
[ It's a blade template as i'm making laravel web application]
A demo of my webpage:
<html>
<head>
<title> User Details </title>
<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 src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="container">
<h3> Student Details </h3>
<table class="table table-striped table-bordered" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Student Name</td>
<td>Stdunet Email</td>
<td>Course Name</td>
<td>Phone Number</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($user as $row)
#if($row->courses()->first())
<tr>
<td>{{$i}}</td>
<td>{{$row->name }}</td>
<td>{{$row->email}}</td>
<td>{{$row->courses()->first()->name}} </td>
<td>{{$row->phone}}</td>
<td>
Complete
</td>
</tr>
<?php $i++; ?>
#endif
#endforeach
</tbody>
</table>
</div>
</body>
</html>
You can use jquery's .one() method.
// prevent anchor to click
$(document).ready(function() {
var clickCtr = 0;
$("a.btn").click( function() {
if(clickCtr > 0) {
return false;
}
clickCtr++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Complete
So there is couple ways to handle your issue.
A simple one from the client side would be to use jQuery (since your importing it in your HTML) to temporarily disable the button.
Here is an exemple:
$(document).ready(function () {
clicked = false;
$(".btn").on('click', function (event) {
if (!clicked) {
clicked = true;
$(".text").text("Clicked!");
setTimeout(function(){
clicked = false;
$(".text").text("");
}, 2000);
} else {
$(".text").text("Already clicked!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn btn-warning">Complete</button>
<text class="text"></text>
I'm using an iframe as target for one of my forms. I need to transform the html of the iframe once the form is submitted. I tried using the onload event, but when the event is fired, my iframe does not have the html resulting from my form yet (right on the debugger breakpoint):
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="javascript">
function loaded(){
var lResponse = document.getElementById('results');
debugger;
}
</script>
<div>
<table>
<tr>
<td width="100%">
<form id="serverForm" target="results" <web:taskProcessorName attribute="action" type="admin"/>>
<div>
<table>
<tr>
<td>
<div name="resultsDiv" id="resultsDiv" style="display: none">
<iframe name="results" id="results" onload="loaded" frameborder="0"></iframe>
</div>
</td>
</tr>
</table>
</div>
<!-- Hidden Inputs -->
<input type="hidden" name="server" value="..." />
</form>
</td>
</tr>
</table>
</div>
<script language="javascript">
document.getElementById('serverForm').submit();
document.getElementById('resultsDiv').style.display='block';
</script>
</body>
</html>
No 3rd party library - pure javascript.
I use the following instead and that seems to catch the event when the iframe html is set already:
function lLoadFunc(){
var lResponse = document.getElementById('results');
}
if(lResponse.addEventListener)
lResponse.addEventListener('load', lLoadFunc, true);
I have a simple menu with collapsing tables, working with Javascript. My problem is when I open it in the browser it comes up with all tables already collapsed! How can I open it with the menu sections "closed", to then collapse each section only onclick? I know it's in the Javascript but I'm new to it so bear with me... Thank you!
Here's the basic code:
<head>
<script>
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = '';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p1 onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td id="r1">ver biografia</td></tr>
<tr>
<td>
<p2 onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td id="r2">lista</td></tr>
<tr>
<td>
<p3 onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td id="r3">lista</td></tr>
</table>
</body>
</code>
Since you are using pure javascript and not a library like jquery, I'd suggest a couple of modification to easily target your elements. Try to put the items to show and hide inside a span so you can use document.getElementsByTagName and then add the Id to those spans rather than on td. My concern was that you have more td in your code, so you using document.getElementsByTagName would affect them as well, which is not what you need. However, you need to be careful that my solution would also suffer from that side effect if you have more spans in your code, which is likely, so you need to take this consideration before you implement this live. Here is the code and you can see a live demo here
<head>
<script>
function init(){
var numberOfRows = document.getElementsByTagName('span').length;
for (var i = 0; i < numberOfRows; i++){
document.getElementsByTagName('span')[i].style.display = 'none';
}
}
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = 'inline';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td>
<p onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td><span id="r1">ver biografia</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td><span id="r2">lista</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td><span id="r3">lista</span></td></tr>
</table>
I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.
<html>
<script type="text/javascript" language="javascript">
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"textfield\"";
newtd.innerHtml=output;
newtr.appendChild(newtd);
function create_row()
{
document.getElementById("table1").appendChild(newtr);
}
</script>
<body>
<table id="table1">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</table>
</body>
</html>
I am using IE7.
In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.
So you should modify your script to append TRs into the TBODY
Few remarks about your code:
You need to properly close tags: var output="<input type=\"textfield\"" is not valid
There's no input type="textfield" defined
The property to set the html of a given DOM element is called innerHTML and not innerHtml
You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
You are missing a head section in your document
I've tried cleaning your code a bit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('table1').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</table>
</body>
</html>
UPDATE:
As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('tablebody').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tbody id="tablebody">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
You are missing a head tag.
The script should be in the head tag.
The html code for the input element is missing a closing bracket.
The type "textfield" does not exist.
The code only works once as you create the elements outside the function.
The method is innerHTML, not innerHtml.
You have to add the row to the tbody element, not the table itself.
I have tested this in Firefox 3 and IE 8 and it works:
<html>
<head>
<script type="text/javascript">
function create_row() {
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"text\">";
newtd.innerHTML=output;
newtr.appendChild(newtd);
document.getElementById("table1body").appendChild(newtr);
}
</script>
</head>
<body>
<table>
<tbody id="table1body">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</tbody>
</table>
</body>
</html>