SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    FireFox innerHTML length limit

    Hi there,

    I've encountered a strange and surprising problem here with setting the innerHTML of a document element by it's ID.

    Ok...so I have a relatively large block of content (text and html) coming from an xml structured data file. I was trying to write this content to a page element as described above, but it kept on cutting half of the content off. (this is in Firefox)

    With firebug, I was able to see that the content coming from the XML had no problems and the html characters have already been converted to entities correctly as they should be, ready to be written to the page using Javascript.

    Then I opened up Opera...and I was surprised to see that the content (text and html) was written to the document element without any problems...as previously encountered with Firefox. I tried Firefox again...same problem.

    It seems like the problem is with firefox and not the javascript itself.

    What does this mean?
    I can break the content up into smaller parts and write the content part after part to the element, but I'm not sure how I'll be doing this without messing up the html tags, etc...

    Please leave your comments.
    Your feedback and advice will be greatly appreciated.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can use the following code in FF1.0.7 to insert 10,000 divs into the <body> element using innerHTML:
    Code:
    <html>
    <head><title>test</title>
    <script type="text/javascript">
    //<![CDATA[
    
    
    window.onload=function()
    {
    	var str = "";
    	for(var i = 0; i < 10000; ++i)
    	{
    		str += "<div>hello " + i + "</div>";
    	}
    
    	document.getElementById("target").innerHTML = str;
    	
    	
    };
    
    //]]>
    </script>
    </head>
    <body id="target">
    
    </body>
    </html>
    but it kept on cutting half of the content off.
    Post the content just before and just after that point.

  3. #3
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is the code just before and just after the point where it cuts off.

    Code:
    change the directory.<br/><br/>
    
    <p style="border:1px #999999 dotted; padding:10px; background-color:#fff6e4;">cd ZendOptimizer-3.2.2-linux-glibc21-i386</p>
    
    After changing the directory
    ...but this is not how the code looks that comes from the XML, since I'm using php to convert all html characters to entities. So this is what I see in the XML :

    Code:
    change the directory.&lt;br/&gt;&lt;br/&gt;
    
    &lt;p style=&quot;border:1px #999999 dotted; padding:10px; background-color:#fff6e4;&quot;&gt;cd ZendOptimizer-3
    
    .2.2-linux-glibc21-i386&lt;/p&gt;
    
    After changing the directory
    It cuts off just after the "cd Zendopt" and doesn't finish the word, but seems to close the </p> tag by looking at the html in firebug.

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I used php to cut up the content into 10 parts and then parsed it through to the Javascript in order to write it to the document element, and that worked, but the html keeps on messing up because tags are being cut in certain places.

    It's going to take quite a bit of work to prevent this from happening, but it's possible. Do you maybe know of a class or function available which will split content without damaging the html code ?

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I think your problem might be the result of either PHP converting "<" ">" to entities. Or there is a bug in changing them back to "<" ">" in the JavaScript.

    Is there a reason as to why you are changing them in the first place?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    I think your problem might be the result of either PHP converting "<" ">" to entities. Or there is a bug in changing them back to "<" ">" in the JavaScript.

    Is there a reason as to why you are changing them in the first place?
    Hi there,

    Well...I use JavaScript with xmlhttprequest to post data through to a PHP file which in it's own turn retrieves data from my MySQL database. The PHP then responds back to the JavaScript with XML structured data.

    I have a tag like this :

    Code:
    <pageContent> *content goes here* </pageContent>
    ...and then I get the text of this tag in my JavaScript function using :

    Code:
    var pageContent = responseXML.getElementsByTagName('pageContent')[0].firstChild.data;
    When I don't convert the html characters to entities, the JavaScript can't seem to read the XML structure correctly as shown in the line of code below. It simply gives the following error when I don't use htmlentities() in my php code :

    Code:
    responseXML.getElementsByTagName("pageContent")[0] has no properties
    http://www.tribulant.com/templates/js/functions.js
    Line 218
    So yeah...I'm not really sure what workaround to use on the JavaScript side to read the <pageContent> tag even if the chars weren't converted to entities.

    Any ideas?

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <content>
        <![CDATA[
            <p>HTML Content here</p>
        ]]>
    </content>
    This is also how sitepoint does it with there AJAX response, if you use Firebug you can intercept it and see how it works.

    I myself haven't played with AJAX too much however hopping to change that soon.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Please note...the same page works perfectly fine in Opera.
    I haven't tested IE though. (don't have it)

    Should I post a link here? ...or would that be inappropriate?

  9. #9
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    Code:
    <content>
        <![CDATA[
            <p>HTML Content here</p>
        ]]>
    </content>
    This is also how sitepoint does it with there AJAX response, if you use Firebug you can intercept it and see how it works.

    I myself haven't played with AJAX too much however hopping to change that soon.
    logic_earth, do you want to be my hero?

    The cdata tags certainly did the trick...and guess what...I don't have to use htmlentities() anymore...infact, if I do, the page outputs the html source itself.

    Thank you very much...I'm really happy now.
    I appreciate all your help.

  10. #10
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    I myself haven't played with AJAX too much however hopping to change that soon.
    Ajax is amazing! I only started with it recently, but I've build an entire site using Ajax, with not a single page refresh. I mean it...not even one. The site consists of about 80% dynamic content from my database.

    Seo was a problem for be in the beginning, but I've been working on creating permanent statis links for all dynamic pages which allows search bots to read the content of my pages without any problems.

    Users love it! They really enjoy the speed and usability of Ajax.

  11. #11
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Heh, never been a hero but I suppose. ^^;

    Anyways glad it worked I was playing with XML just a few hours ago and needed CDATA for the data.

    Quote Originally Posted by Contrid View Post
    logic_earth, do you want to be my hero?

    The cdata tags certainly did the trick...and guess what...I don't have to use htmlentities() anymore...infact, if I do, the page outputs the html source itself.

    Thank you very much...I'm really happy now.
    I appreciate all your help.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Contrid View Post
    Ajax is amazing! I only started with it recently, but I've build an entire site using Ajax, with not a single page refresh. I mean it...not even one. The site consists of about 80% dynamic content from my database.

    Seo was a problem for be in the beginning, but I've been working on creating permanent statis links for all dynamic pages which allows search bots to read the content of my pages without any problems.

    Users love it! They really enjoy the speed and usability of Ajax.
    What about the ones with javascript disabled?

  13. #13
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ajax is amazing! I only started with it recently, but I've build an entire site using Ajax, with not a single page refresh. I mean it...not even one. The site consists of about 80&#37; dynamic content from my database.
    Then your site has one of the poorest designs on the web. However, if you want to limit access to your site to certain user groups, that is certainly a choice you can make.

  14. #14
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    What about the ones with javascript disabled?
    Hmmm...from what I read, 95&#37; of web users have Javascript enabled.

    Anyways....this site of mine is more of a hobby than anything else. I enjoy using it to experiment with new technologies and ideas.

    Obviously you are right...
    A 100% Ajax site like this is outrageous considering the fact that some users might not be able to use it...or might not even like it.
    Even so...it really is a great site and I truly enjoy developing it further pushing the limits where I can in order to learn more in the process.

  15. #15
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    Then your site has one of the poorest designs on the web. However, if you want to limit access to your site to certain user groups, that is certainly a choice you can make.
    What does design have to do with usability?
    I mean...my site validates. Both the html, css and the javascript.
    In fact...my site seems to be pretty busy with the new javascript interface.
    As I mentioned above, this site is more of a hobby than anything else. I don't use it for business or to generate money. It's just there to experiment with new technologies and ideas.

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In that case that's fine, you're free to exclude whoever you want. My site currently doesn't work well in IE6 because I like using sibling and child selectors. The great thing is that I don't care because it's a personal hobby.

  17. #17
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Contrid View Post

    Code:
    var pageContent = responseXML.getElementsByTagName('pageContent')[0].firstChild.data;
    Sorry for the late post, but I just ran into this problem myself, and found another way to solve it.

    What I discovered is that Firefox breaks the long data into lots of text nodes, 4096 chars each. I guess it doesn't break up the CDATA sections, which is why that solution also worked.

    You could have got it to work by doing:

    Code:
    var parent=responseXML.getElementsByTagName('pageContent')[0];
    var pageContent='';
    for (var i=0; i<parent.childNodes.length; i++)
      pageContent+=parent.childNodes[i].data;
    So it's not a Firefox bug, just what you (and I) get for being lazy and using "firstChild".


Bookmarks

Posting Permissions

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