To access the value of an ID we can use :
document.getElementById(ID).value.
But I have a problem of accessing an ID in a table. There is a frame inside a table. The content of the frame is a table also because I want to scroll up and down the table.
main.html :
<script type="text/javascript">
function show_name()
{
alert(document.getElementById("name1").value);
}
</script>
<table id="table1">
<tr>
<td>
<div id="mydiv">
<!-- the ajax func call myframe.php and pu result here -->
</div>
</td>
</tr>
</table>
<input type="button" value="Show Name" onClick="show_name()">
myframe.php :
<iframe height="500px" height="400px" src="table2.php"></iframe>
Below is table2.php. It produces a table interactively based on a parameter passed into it. And of course the feedback inserted into "mydiv".
<?php
// mysql_connect();
// mysq_query....
?>
<table id="table2">
<tr>
<td>
<input type="text" id="name1" value="john">
</td>
</tr>
</table>
The code run very good, and everything come up into the page correctly. By I want to do someting with an object inside the frame, but how to access it ?
So far pushing the button give nothing, that means the object can not be accessed by the code. Of course, there will be more meaningfull process rather than just alert a name.
Thanks for help.
To access the element inside the iframe:
window.frames[1].document.getElementById('name1');
Related
Hello i have a problem... Suppose that i have a table whit two textBox and one button.. when i click the button i must read the value of a textBox and create a directory in a specific path and the directory must be named like the value that i read on the TextBox
I've tryed this code but it dosn't work :(
file = directory.php
<?php
$idCantiere = $_POST["idCantiere"];
$codiceCommessa = $_POST["codiceCommessa"];
echo("Registrazione avvenuta");
chdir("../inserimento");
opendir(".");
mkdir("../inserimento/prova/".$idCantiere);
?>
file prova.html
<table method="POST" action="directory.php">
<tr>
<td bgcolor="#B2E5FB">Cantiere</td>
<td colspan="11"> <input type="text" id="idCantiere"></td>
</tr>
<tr>
<td bgcolor="#B2E5FB">Codice Commessa</td>
<td colspan="11"> <input type="text" id="codiceCommessa"></td>
</tr>
<tr><td><button name="insAffidatario" type="submit" onclick="directory.php">Inserisci Affidatario</button></td></tr>
</table>
The problem with your code and it is a specific one; is that you used <table></table> for what should be a form, it should be <form></form>.
Then you used ID's instead of name attributes. You need to add name="idCantiere" and name="codiceCommessa" to their respective inputs.
You may also want to remove onclick="directory.php" here. The "action" already takes care of that.
Side note: Place your table inside the form and not outside. <form> cannot be made child of <table>.
Also make sure that the paths (and folders) correspond and that they are writeable with proper group/user permissions.
Error reporting will be of help also.
http://php.net/manual/en/function.error-reporting.php
and set to catch and display.
I have the following codes:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='${row.content}';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
</c:forEach>
The problem is that it only shows the result of the last content instead of printing it out line by line according to number.
What you are creating, if you view the page source in the browser, would look something like this (note the ${row.content} will have already been replaced on the server):
<td>0<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='The first row content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>1<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Some different content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>2<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Yet some more content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
You're going to have many copies of function load() and many times where window.onload is assigned window.onload=load;
When this arrives at the browser and is interpreted, only the last definition of function load() will be in effect; only the last time you assign window.onload=load; means anything (because you keep replacing the value of window.onload) -- each redefinition of load() will replace the previous one - so only your last var content='${row.content}'; is ever executed.
In addition, you will have many <div> tags with the same id of "content" and that's not allowed.
The content of each of those <td><div>...</div></td> blocks can be set by the JSP/JSTL itself on the server -- there is no need to set the innerHTML via javascript.
You can use the totalRow varStatus that you set up to provide the number for the first <td> -- you don't need to increment your own counter.
You can use Expression Language (EL) to access the content value of each row.
Inline style="blah blah blah" sucks. Use that only if absolutely necessary.
Instead, put all this style in CSS targeting .contentbits:
style="table-layout:fixed; width:405px; word-wrap:break-word;"
becomes
.contentbits {
table-layout:fixed;
width:405px;
word-wrap:break-word;
}
The page fragment becomes much simpler:
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td>${totalRow}</td>
<td>
<div class="contentbits">${row.content}</div>
</td>
</c:forEach>
It's not the right way to do it, but a simple solution would be use addEventListener instead onload:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
window.addEventListener("load", function () {
var element = document.getElementById("content<%=number%>");
element.innerHTML=Utf8.decode('${row.content}');
}, true);
</script>
</div>
</td>
</c:forEach>
In fact your code is using only the last "onload" because, when loading the page, it will execute the javascript load callback only when finish full loading it. So, each time you loop is executed, it updates the load callback reference for the last one, so when onload is triggered, the last only will be executed.
But your code has other errors too. The content id, repeats at the code lot of times, that will make your div getElementById useless, because you have lot of ids that are equal. Ids must be unique to work property.
To finish, it's not a good pattern to mix your HTML with scripts inside, is better to have you logic file (javascript file) outside, then it can make changes in your code when finish to load, reading the html that was generated. You also can create data attribute in your div then read it by the javascript to manage all itens with a specific data attributes.
To keep it simple, I will add an example:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;" data-content="${row.content}">
</div>
</td>
</c:forEach>
Now the script file (I'm using jQuery for this example works on any browser):
$(function() {
$("[data-content]").each(function(item) {
$(item).html(Utf8.decode(item.attr('data-content')));
});
});
This question is related to another question of mine. Thanks to some help I am now able to show duplicate elements upon click on the addButton.
I would like to keep track of how many elements have been duplicated. This will also help to assign different id to the duplicate elements.
Here is a sample of my code:
<html>
<head>
<%! int n = 1; %>
<script type="text/javascript">
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRowClone.id = 'tableRow'+<%=n%>;
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}
</script>
</head>
<body>
<table>
<tr id="tableRow">
<td>
<fieldset>
<legend> This is box number <%=n++%> </legend>
<table>
<tr>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()">
</td>
</tr>
</table>
</body>
</html>
If you read my other question, you will find the code samples similar. Now, I want to print out different legends by incrementing a JSP integer, n.
Thus far all duplicates show "This is box number 1" in the legend. It seems like n doesn't increment to 3 onwards.
I would like to show that n increases to assign id to the duplicates.
The JSP is generating the HTML on the server-side while the Javascript is running on the client-side. Meaning, when the Javascript is running the page was already rendered with the values of n (which is 1 at the time of creation). Since the JSP is not running again the value of n remains 1.
Solution: run everything on the client-side (JS) including the counter.
I render a View with a table in it. Each row of the table is an object that could be edited. So, the last column of this table has a bunch of "EDIT" buttons. When one of these EDIT buttons is clicked, JavaScript function must pick up the Id of the object represented by current row. Ultimately, I would like to end up with a clean HTML: no "onclick", "onmouseover" attributes and no custom made-up attributes. Below I have 2 examples that I'm not thrilled with. Any good ideas?
Example 1:
View.aspx
<td>
<input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" />
</td>
JavaScript
function JSFunction(id)
{
//some code that does whatever with id
}
Example 2:
View.aspx
<td>
<input type="button" value="EDIT" customAttribute="<%: ObjectId %>" />
</td>
JavaScript
$('input[type=button]').click(function() {
var id = this.attr('customAttribute');
//some code that does whatever with id
});
P.S. If you could come up with a better question title, please share as well :)
One way I handled this in the past is to use the html5 data-attribute. Which is picked up by versions of jQuery 1.4.3 and above.
<table>
<tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'>
<td>
Row Id 1
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'>
<td>
Row Id 2
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
Then in your jquery you can do the following:
$("input[type=button]").click(function(){
var rowInfo = $(this).parents("tr.row").data("rowInfo");
//Do something with rowInfo.Id;
});
By using the data attribute you can have a rich json object that could contain more information than just an attribute. Plus you only have to declare one data-attribute to hold all relevant information.
Example of this working on jsfiddle.
The way I do it is I have the server render the id to the <tr> tag, you could either make up your own attribute or store it in the id attribute. Then if you have a edit button inside a td you just write jQuery to find the id stored in the <tr> tag.
html:
<tr myId="1">
<td>
<input type="button" value="EDIT" />
</td>
</tr>
jQuery:
$(function() {
$("input[type=button]").click(function() {
var id = $(this).parent().attr("myId");
});
});
Although I usually assign a class of "edit" to my edit buttons rather than selecting them by their type (as I have a save button on the page).
I would use the jQuery metadata plugin as then data can be embedded in a number of different ways onto any element. The usual way is to add it to the class like this:
<input type="button" class="button { objectId : <%: ObjectId %> }" />
I am having an issue with accessing my form by it's name. When I use document.form[0].mylink.value it recognizes the value and outputs to the innerHTML that I specify. However, when I use document.myform.mylink.value it doesn't seem to recognize the form. I have tried this in chrome 6.0 and also firefox 3.6.3 and get the same result in both. I really need to be able to access my form values by using the form name (instead of document.form[0]), any ideas why document.myform.mylink.value doesn't work?
<form name="myform">
<table>
<tr><td valign="middle" align="center">
<div id="textResponse"></div>
</td></tr>
<tr><td height="30" valign="middle" align="center">
<input name="mylink" value="Enter a URL" size="31" />
</td></tr>
<tr><td valign="top" align="center">
Click
</td></tr>
</table>
</form>
<script type="text/javascript">
function submitForm2(){
//This one does NOT work:
my_link = document.myform.mylink.value;
//This one also does NOT work:
//my_link = document.forms['myform'].mylink.value;
//This one works:
//my_link = document.forms[0].mylink.value;
document.getElementById("textResponse").innerHTML="<p>"+my_link+"</p>";
}
</script>
Technically what you have should work ok... the full syntax below should also work:
var my_link = document.forms['myform'].elements['mylink'].value;
If by chance your variable in your "real" code is "mylink" not "my_link" you will get failures in IE as it will auto-reference the form element, not the value you are trying to extract.
That all said, your code as posted... works just fine in Firefox/IE (demo here: http://jsfiddle.net/Ymg8W/ )