Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table generator code to iframe

    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>

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    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)
    Kris Hubby
    kwhubby site

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kwhubby
    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+.

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Kris Hubby
    kwhubby site

  • #5
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kwhubby
    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');
    }

  • #6
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kwhubby
    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');
    }

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Kris Hubby
    kwhubby site

  • #8
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kwhubby
    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.)

  • #9
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by starrwriter
    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.

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    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
    Last edited by kwhubby; 06-01-2004 at 06:45 AM. Reason: did not see your last post
    Kris Hubby
    kwhubby site


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •