InnerHTML Placement
Mar 5, 2006
I have recently decided to re-approach a function in the code I have been working on based on the recommendations of a few of you helpful folks. The current function takes data accumulated from form calculatiions, formats it for display then opens a fresh window and writes that data into the document using the document.write() method. This presented me with a bit of a problem when it came to saving the document, particularly in Internet Explorer. When I brought that problem up here on the boards, it was suggested that I go from document.write() to innerHTML and rather than open a blank document, I should open a document that at least has the basic coding set up, such as DOCTYPE, HEAD and BODY tags.
This is all fine and dandy and I understand the basic concepts of how it is supposed to work, but in working through the logic of the process, I discovered that my weakness in understanding how to implement the innerHTML method is holding me back a bit. So now I come seeking advice once more, however, before I go any further with this, let me explain how the document is meant to be displayed.
The data is sent to the document in two basic stages. The first of those stages is a visual or "graphical" representation of the data and consists of a foundation image (in this case, a polar chart) with secondary images (stellar bodies and/or stars) placed on top of it to represent the data in a positional format (basicly stars positioned by Right Accension and Declination Angle).
The second stage of the data transfer (which, at this point, I don't see any problem coding since it is pretty straight forward) is a text rendering of the processed information in a tabular format. For the most part, I intend to keep it in tabular format and simply send it to a specific DIV element.
My difficulties are coming from the first stage of the process. My first thought was to load the foundation image from the popup itself rather than using the function to insert it in the document and then send the positioning data to the document as a series of DIV elements in much the same fashion as I was doing before. These DIV elements, or so I assume, when sent to the document, would have to be placed in the body of the document in general. Therefore, I would assume that the body would have to have a name/id attribute that innerHTML could access. My question here is, where exactly does that data go when it is sent. Assuming the basic document has the following appearance; Code:
View 9 Replies
ADVERTISEMENT
Jul 20, 2005
As someone who has a web site, there is this popup (not my own) that comes
up that I can't make go away when others view the page. Is there anyway,
at least, to make sure that the parent window supersedes and is the top
lawyer vs. this smaller pop-up using javascript?
View 3 Replies
View Related
Sep 27, 2006
i have a link through which i am opening a showModelessDialog . in that page there is a link for Cancel and Next. when the user clicks on Cancel the window closes and when the user clicks on Next another showModelessDialog opens [Closing the existing one].The problem is it does the same thing but that second showModelessDialog takes top and left as 0 and goes to the top-left corner of the screen. i have set the center parameter to Yes then also the problem perist. below is my code:
View 1 Replies
View Related
Oct 31, 2011
I believe � can be solved pretty easily by an expert.It's about the script in this thread: http:[url].....how I can adapt the script to work with multiple div's in one page.
View 1 Replies
View Related
Jul 4, 2010
I want the error messages to appear below the text boxes, not to the right. I have my own text after some of my text boxes and with the default settings the error appears between the text box and my text. Looks weird that way. I'd rather have the errors below each element. I tried with the below but didn't get anywhere. I want ALL errors below. Not sure what to do.
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
View 3 Replies
View Related
Feb 21, 2011
I am using jquery validate plugin to validate my form. The form is modified bassistance form, which is a table with various <tr> and <td>. Default placement is
error.appendTo( element.parent().next() );
But I want to append (or display) errors in a single td with id and name as "errorbox" located on the first row of my table. How to modify
errorPlacement: function(error, element) {
error.appendTo( element.parent().next() );
},
View 1 Replies
View Related
Aug 28, 2009
I have a form where I am using the jquery validation plugin. In that form, I have a date field that is using a jquery datepicker plugin so a small calendar gif immediately follows the date field. The date is required. The problem is when the field fails validation, the error
message appears directly after the date input pushing the calendar gif to the right of the error message. I know there is an errorPlacement parameter that you can use, but isn't that for every field in the form? How can I get the error placement to go after the calendar gif
just for the date field. Here is my test code. I am also using an AJAX form submission plugin. The name of my date field is startDate.
$("#myForm").validate({
submitHandler: function(form) {
$('#myForm').ajaxSubmit(function(){
alert('SUCCESS');
});
}});
View 1 Replies
View Related
Aug 17, 2009
I've been banging my head against the wall for about a week now. Everything in the code below works as expected. How I can make the error appear in the last <td> in my table below? It currently appears in <td> 4 along with the first input, but I need it in <td>7.
<script>
jQuery.extend(jQuery.validator.messages, {
required: "?"
});
$(document).ready(function() {
$("#myForm").validate();
});
</script>
Table that prints out multiple sets of Radio Buttons
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4<input type='radio' name='".$row['name_id']."' value=$value1 class='required' >$value1</td>";
<td>5</td>
<td>6<input type='radio' name='".$row['name_id']."' value='$value2 class='required' >$value2</td>";
<td>7</td>
</tr>
View 1 Replies
View Related
Jul 18, 2010
I am using both the jQuery Validation plugin and the datePicker plugin. I would like to get the error message for this showing after the calendar icon for the datePicker plugin. I have tried this and cannot get it to work and so far not found a solution on any website I have checked.
jQuery Validation code
$(document).ready(function() {
$("#adminform").validate({
submitHandler: function(form) {
SubmittingForm();
},
rules: {
date: {
required: true,
date: true
}},
errorPlacement: function(error, element) {
if(element.type == 'input') {
error.insertAfter(element.sibling(a));
} else {
error.insertAfter(element);
}}});
});
Trying the sibling thing was my last probably silly attempt at getting this working.
HTML output when the field fails validation
<fieldset>
<legend>Update Date</legend>
<label for="date" class="admin">Date of Run: </label>
<input type="text" class="date-pick dp-applied error" size="7" value="" name="date" id="date">
<label for="date" generated="true" class="error">This field is required.</label>
<a title="Choose date" class="dp-choose-date" href="#">Choose date</a>
</fieldset>
As you can see the label for the error is placed inbetween the input field and <a> for the calendar image. How to get this label to show after the <a>.
View 2 Replies
View Related
Aug 19, 2009
I am using the jquery form validation plugin [URL] to get some simple validation done on my form. It's working perfect so far. When I set a particular form field to have the class "required" that makes it so that it can't be blank and when the user tries to submit the form, JQuery displays a "This field is required." text beside the field and focuses on it. The text generally appears right beside the input element. I was wondering whether it is possible to actually control where the error text appears? Say like I set an element div element which I want the error to appear. Is there a way to make it the error text appear in that div element?
View 1 Replies
View Related
Jan 30, 2011
I'm writing this web app.For each view, when required, I'll have one or more script files named after the view. Some functions are shared across the site. So I extracted and put them into separate .js files. Some views may have sub-views (such as the login box).
And I ended up with 10 <script> tags per page (includes 3 jquery must-haves). Although in some pages I can lower it to 6, I still think this is a pretty big number, as lots of extra HTTP transaction is required when loading the page.
I put the <script> tags at the end of the page, before closing <body>. Most scripts didn't use $(document).ready().
So is it bad to have 10 <script> tags on each page? Is there a magic number I should never surpass? Is it a good idea to put lots of (unrelated) functions into a single .js?
And is it bad to have scripts executing at the end of the page rather than $(document).ready ?
View 2 Replies
View Related
Dec 1, 2010
Here is a suggestion for the documentation. It can be added to General_Guidelines. This is important because, for me at least, I had to figure it out on my own how to deal with radio buttons. A suggestion in the documentation would have saved me a chunk of time. [URL] Error Placement for Radio Buttons (and perhaps checkboxes). If the default placement of the error message doesn't work for your radio buttons, here is a suggestion.
First, here is my customized message, in jQuery("#frm").validate. Notice the <br> tag.
messages: {
x_gender: " Select One<br/>",
},
Also in the validate function.
// the errorPlacement has to take the table layout into account
// "error" is the error message, as a jQuery object. The element is the first of the group of radio inputs.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.prependTo( element.parent() );
} else { // This is the default behavior of the script
error.insertAfter( element );
}}
I propose this as the default method for radio buttons. And perhaps checkboxes. This way, in my form html at least, the error message appears on a line just above the first radio button. Otherwise, it appeared immediately to the right of the button, between the button and the label.
View 10 Replies
View Related
Oct 14, 2010
[URL]
After placing a div on each image I placed the comments following. However, prev and next lwon't work unless I uncenter the text alignment or move it up top. For some reason it just won't work when I have it centered bottom.
Attachments
gallerytestt.rar
Size : 52.06 KB
Download : 360
View 12 Replies
View Related
Feb 9, 2011
I think this problem is related to javascript. My javascript script is below which changes images after 2 sec. But when i call my start function in img tag in my third row div of my layout, it does not show images in that div or in that area. It show that series of images in first row.
[CODE]...
View 3 Replies
View Related
Mar 16, 2009
Is there a way to add an if and else with in innerHTML like this.
var sfe = document.getElementById("mainform").innerHTML ='<form name="'+frmName+'">'+
'<!-- comment -->'+
'<h2 id="pa" name="dr">';if(n == 1){'+fname+'}else if(n == 2){<b>No Title</b>} '</h2>'+
'more'+
View 4 Replies
View Related
Apr 10, 2006
I'm currently using AJAX to perform some dynamic updates and return some text to the web page. At the moment I'm using innerHTML as follows:
document.getElementById('WrkItemDiv').innerHTML=wrkItemReq.responseText;
but I'd like to be standards compliant. How would I do this using pure DOM stuff?
btw WrkItemDiv is an exisiting <div> I simply want to overwrite the text within it with the newly returned text.
Also, is it possible to change the onMouseOVer code with some text returned in the same way as above using pure DOM?
View 12 Replies
View Related
Oct 22, 2007
I am getting data from two tables in a database using a dropdown box with a onchange and some ajax to update two diferent Div tags, basically the id is passed to a php page,, I grab the data from the two tables, I then echo the data in two html tables. I echo a ** for a delimiter between the two tables,
Then I use a javascript split function to split the responseText into two peices so I can update each DIV with the coresponding data.
Everything works in Firefox, but in IE7 only one div gets updated with its data, the other div will not change, and I get a unknown runtime error. However if I go into my php page and change the data I am echoing after the delimiter to a simple echo 'test' it will work. Code:
View 2 Replies
View Related
Jul 23, 2005
I've got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn't support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement('tr');
stbl.appendChild(newr);
newc = document.createElement('td');
newr.appendChild(newc);
newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";
(works in firefox but fails in IE 6+ too...)
View 22 Replies
View Related
Jul 23, 2005
Here is my problem in a nutshell: a script to model dynamic table
extension. It works under Firefox. But IE just aborts, complaining about
an "unknown runtime error" in the line with "innerHTML". Why?
<html><head></head><body>
<script language="javascript">
function extend() {
var tb = document.getElementById('thetable').tBodies[0];
var newrow = document.createElement('tr');
tb.insertBefore(newrow,tb.rows[tb.rows.length-1]);
tb.rows[tb.rows.length-2].innerHTML =
'<td>A</td><td>dummy</td><td>row</td>'
}
</script>
<table id="thetable">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td colspan="3"><a href="javascript:extend();">extend</a></td></tr>
</table>
</body>
</html>
View 1 Replies
View Related
Jul 23, 2005
IE seems to munge the innerHTML of a document, does anyone know why
it's changing the innerHTML?
<body>
<div style="background-color:LightGrey;" onclick="window.alert( 'one:'
+ getElementById('one').innerHTML );" id="one">
<table id="tableone">
<tr id="trone">
<td>click me</td>
</tr>
</table>
</div>
<div id="two" style="background-color:LightBlue;"
onclick="window.alert( 'two:' + getElementById('two').innerHTML );">
<table id="tabletwo">
<tr id="trtwo">
<td>click me too</td>
</tr>
</table>
<input type="checkbox" checked="checked" value="MYVAL" />
</div>
</body>
View 4 Replies
View Related
Jul 23, 2005
Why doesn't a SELECT element's innerHTML reflected which option was
selected? Works in IE. I need this functionality so that I can retain
what choices a user made in a tabbed interface.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<script language="javascript">
function callAlert(){
var theHTML = document.getElementById('Radius').innerHTML;
//alert(theHTML);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<form id="myForm">
<div id="myDiv">
<table border="0" width="430" cellpadding="3" cellspacing="0">
<tr>
<td font color="#ff0000">*</font>Radius:</td>
<td width="331" height="30" class="formData">
<select onChange="callAlert();" id="Radius" name="Radius">
<option value=".10" id="0">1/10 mile</option>
<option value=".20">1/5 mile</option>
<option value=".25">1/4 mile</option>
<option value=".5">1/2 mile</option>
<option value=".75">3/4 mile</option>
<option value="1">1 mile</option>
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
View 24 Replies
View Related
Mar 8, 2006
I am using a frameset with two frames that looks like this:
|------------------------------|
| |--------------------------| |
| | FRAME 1 | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| |--------------------------| |
| |
| |--------------------------| |
| | FRAME 2 | |
| | | |
| | <html><body> | |
| | <table><tbody> | |
| | <tr> | |
| | <td>Data 1</td> | |
| | <td>Data 2</td> | |
| | </tr> | |
| | </tbody></table> | |
| | </body></html> | |
| |--------------------------| |
|------------------------------|
FRAME 2 has no height, so it looks as if you only have 1 frame. I am
using FRAME 2 to retrieve data from my server.
I open up FRAME 1 with my webpage and leave FRAME 2 empty. When the
user request data I target FRAME 2 and the data is loaded into FRAME 2.
What I have been trying to do is this. Take the innerHTML of the FRAME
2's table and load it into a table in FRAME 1.
View 1 Replies
View Related
Jul 6, 2006
I want to load an external file into my page via XMLhttpRequest and
innerHTML. The external file contains javascript code which is not executed during
or after insertion. All the HTML markup is displayed just fine....
basicly even this code doesnt work:
<div id='tmp'>original Content</div>
<script>
document.getElementById("tmp").innerHTML="<b>new</b>
Content<script>alert('not shown! why?');</script>";
</script>
looking at the page, "new Content" is shown with "new" bold as
expected, but there wont be the javascript alert!
View 1 Replies
View Related
Jul 19, 2006
I use Ajax to retrieve part of a page I need to update. I update a DIV
element with the HTML contents I get from another page.
It works fine.
However the HTML have a SCRIPT tag that the browser should process, but
it doesn't.
Here's an example:
--- pageX.aspx ---
<table>
<tr>
<td>Table 01</td>
</tr>
</table>
<script>
alert("HI");
</script>
--- end pageX.aspx ---
--- page on browser ---
<div id="divContents"></div>
<script>
divContents.innerHTML = getHtmlFromPage("pageX.aspx");
</script>
--- end page on browser ---
When the prowser gets the "pageX.aspx" and updates the contents of the
'divContents' it displays the table, but it didn't process the script.
What am I doing wrong?
View 17 Replies
View Related
Sep 29, 2006
What debugger would let me see the HTML in a div after I've added HTML
to the div using its innerHTML? That is:
var someInputHtml = prompt("input html");
var referenceToSomeDiv = document.getElementById("someDiv");
referenceToSomeDiv.innerHTML = someInputHtml;
When debugging, how do I now see what HTML is in the div "someDiv"?
Maybe there is a FireFox extension for this? Firebug?
View 5 Replies
View Related
Apr 27, 2007
if i use AttachEvent like this,it can't work;
eg:
var img = document.createElement("img");
img.attachEvent("onclick",alert("test"));
var div = document.createElement("div");
div.appendChild(img); //can't work;
div.innerHTML="<-click this";
but i use attachEvent like this,it work; eg:
var img = document.createElement("img");
img.attachEvent("onclick",alert("test"));
var text = document.createElement("span");
text.innerHTML="<-click this";
var div = documet.createElement("div");
div.appendChild(img); //can work
div.appendChild(text);
View 6 Replies
View Related