...

View Full Version : table generator code to iframe



starrwriter
05-30-2004, 03:14 AM
I posted this yesterday, but it never appeared, so here goes again --

In the WYSIWYG editor I'm developing I have a form table generator in a popup window. The table code is based form input (cols, rows, etc.) and is displayed in a textarea. This has to be copied and pasted into the source code of the web page under construction.

I want the table code to be inserted directly into the source code without copying and pasting it from the popup window. This would involve passing form output from a child window to an iframe embedded in the parent window. Any ideas on how would I script this?

<SCRIPT>
function makeTable() {
var rows = document.form.rows.value * 1
var cols = document.form.cols.value * 1
var width = document.form.width.value * 1
var border = document.form.border.value * 1
var cellpadding = document.form.cellpadding.value * 1
var align = document.form.align.value
var tdalign = document.form.tdalign.value
var bgcolor = document.form.bgcolor.value
if (bgcolor == "" || bgcolor == null) { bgcolor = "white" }
var valign = document.form.valign.value
var table = "<table width=\"" + width + "\"\n"
table += " border=\"" + border + "\"\n"
table += " cellpadding=\"" + cellpadding + "\"\n"
table += " align=\"" + align + "\"\n"
table += " bgColor=\"" + bgcolor + "\"\n"
table += "\n<!-- -->\n\n"

var tdwidth = width / cols
for (i = 1; i <= rows; i++) {
table += "<!-- Row " + i + " -->\n"
table += "<tr>\n"

for (t = 1; t <= cols; t++) {
table += "<td width=\"" + tdwidth + "\" align=\"" + tdalign + "\" valign=\"" + valign + "\">\n"
table += " Row " + i + ", Column " + t +" \n"
table += "</td>\n"
}
table += "</tr>\n\n"
}
if (table.indexOf("NaN") != -1) {
table = "Sorry, there was an error generating your table.\n"
table += "Please check all the fields and then try again."
} else {
table += "</table>"
}
document.form.table.value = table //CHANGE THIS LINE TO WHAT?
document.form.table.focus() //ALSO CHANGE THIS LINE TO iframe.focus()?
}
</script>

<input type="button" value="Generate Code" onclick="makeTable()">
<br>
<textarea name="table" rows="10" cols="60"></textarea>

kwhubby
05-31-2004, 09:25 AM
Well I hope I am understanding what you want corectly, but all you would have to do should be to change those 2 lines to:
opener.iframeid.document.write(table)
opener.iframeid.focus()

you might use .innerHTML = table instead of .write(table)

starrwriter
05-31-2004, 09:46 PM
Well I hope I am understanding what you want corectly, but all you would have to do should be to change those 2 lines to:
opener.iframeid.document.write(table)
opener.iframeid.focus()

you might use .innerHTML = table instead of .write(table)

The iframe is NOT the opener (parent window) of the popup. The table generator is popped up from a toolbar button on the editor page. The iframe (named iView) is embedded in the editor page and contains the HTML of the web page under construction. Since I keep getting error message "iView undefined," I need a line in the table generator script that will define iView.

This is for a browser-based WYSIWYG editor using the design mode (content editable) feature of IE 5.5+.

kwhubby
05-31-2004, 11:57 PM
Maby I am confused of what you are saying, I tried to read what you said carefully. If the editor page is the opener of the popup and the Iframe is on the editor page, then what I posted is exactly how you could do this. Opener refers to the parent page that opened it and since the Iframe is on that page it is a child of the editor page. So opener.iView is how you would refer to the iframe from the popup.

starrwriter
06-01-2004, 04:03 AM
Maby I am confused of what you are saying, I tried to read what you said carefully. If the editor page is the opener of the popup and the Iframe is on the editor page, then what I posted is exactly how you could do this. Opener refers to the parent page that opened it and since the Iframe is on that page it is a child of the editor page. So opener.iView is how you would refer to the iframe from the popup.

I was sure this wouldn't work, but you are right. It does insert the table HTML into the source code in the iframe, BUT it also screws up the save function. When I hit the save button to save the page, a SECOND identical table is inserted adjacent to the first.

I've tweaked the save function all day to try to eliminate this problem, but nothing works. Javascript is the devil's toy. Fix one problem and that creates two more elsewhere in the script.

Here's the original save function in case you can see a solution I missed:

function saveFrame(){
var d, e, i, s;
d = iView.document;
e = new Enumerator(d.images);
while(!e.atEnd()){
i = e.item();
s = i.src;
s = s.slice(s.lastIndexOf("/") + 1);
i.src = s;
e.moveNext();
}
var html = iView.document.documentElement.outerHTML;
iView.document.write(html);
iView.document.execCommand('SaveAs');
}

starrwriter
06-01-2004, 04:06 AM
Maby I am confused of what you are saying, I tried to read what you said carefully. If the editor page is the opener of the popup and the Iframe is on the editor page, then what I posted is exactly how you could do this. Opener refers to the parent page that opened it and since the Iframe is on that page it is a child of the editor page. So opener.iView is how you would refer to the iframe from the popup.

I was sure this wouldn't work, but you are right. It does insert the table HTML into the source code in the iframe, BUT it also screws up the save function. When I hit the save button to save the page, a SECOND identical table is inserted adjacent to the first.

I've tweaked the save function all day to try to eliminate this problem, but nothing works. Javascript is the devil's toy. Fix one problem and that creates two more elsewhere in the script.

Here's the original save function in case you can see a solution I missed:

function saveFrame(){
//Convert image paths from absolute to relative
var d, e, i, s;
d = iView.document;
e = new Enumerator(d.images);
while(!e.atEnd()){
i = e.item();
s = i.src;
s = s.slice(s.lastIndexOf("/") + 1);
i.src = s;
e.moveNext();
}
//Save document
var html = iView.document.documentElement.outerHTML;
iView.document.write(html);
iView.document.execCommand('SaveAs');
}

kwhubby
06-01-2004, 05:19 AM
Well it would be really helpful if you could post or link to the whole thing. But looking at what you posted at this line:
var html = iView.document.documentElement.outerHTML;
iView.document.write(html);

It looks like the reason it is copying the table is because it is writing the current HTML in the iframe to the iframe which might explain it duplicating another table. I am not sure exactly on what the point of this part of the code is but if u want to replace the html you could try setting the value of innerHTML instead of using the write method.

starrwriter
06-01-2004, 05:31 AM
Well it would be really helpful if you could post or link to the whole thing. But looking at what you posted at this line:
var html = iView.document.documentElement.outerHTML;
iView.document.write(html);

It looks like the reason it is copying the table is because it is writing the current HTML in the iframe to the iframe which might explain it duplicating another table. I am not sure exactly on what the point of this part of the code is but if u want to replace the html you could try setting the value of innerHTML instead of using the write method.

Save function uses outerHTML, so I'm not sure what you mean by "setting the value of innerHTML."

The editor is strictly for offline use, so I don't have it posted anywhere online. It is also WAY too big to post here (maybe a thousand lines of HTML, CSS and javascript.)

starrwriter
06-01-2004, 05:50 AM
Save function uses outerHTML, so I'm not sure what you mean by "setting the value of innerHTML."

The editor is strictly for offline use, so I don't have it posted anywhere online. It is also WAY too big to post here (maybe a thousand lines of HTML, CSS and javascript.)

Never mind. I substituted innerHTML for outerHTML and it worked. I got about 4 hours sleep last night and my mind isn't functioning well today.

Thanks for your help.

kwhubby
06-01-2004, 06:43 AM
Im not sure exactly how this thing of yours works, but these two lines seem pointless and probobly could be removed and might fix the problem:
var html = iView.document.documentElement.outerHTML;
iView.document.write(html);

edit: did not see your last post... glad I could help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum