Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Junior Member
    Join Date
    May 2003
    Posts
    5
    Member #
    1376
    I am trying to make a page through comment feature for my site where it doesn't need to reload the page, just get the content and insert it. Currently I am doing a simply thing which is create an xml object like this:
    Code:
    <root>
    <pages>(HTML FOR THE PAGES links)</pages>
    <content>(HTML FOR THE COMMENTS)</content>
    </root>
    Which is properly escaped and everything so the data is available properly. Then call the usual Ajax controls to get the data and get out the pages and content html and throw it in the proper places on the page formatted properly.

    The problem I have run into is that the content I can pass through innerHTML is limited to about 4k, so I am getting a lot of problems with the long data thats being passed from within the tags.

    My Question is: What is the reason behind this and how do I correct it without having to make the code any more complex?

    Example site: http://dev.secondangle.com/anime/ani...?id=1#comments
    Example XML: http://dev.secondangle.com/anime/ani...hp?id=1&page=2

    JavaScript Code I am using below:

    Code:
    function commentsNextPage( id, page )
    {
    	var cRef = document.getElementById('commentsContent');
    	var pRef1 = document.getElementById('commentPage1');
    	var pRef2 = document.getElementById('commentPage2');
    
    
    	var url = "[[ANIME_PATH]]/anime.comments.php?id="+id+"&page="+page;
    
    	var http_request = false;
    
    	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    		http_request = new XMLHttpRequest();
    		if (http_request.overrideMimeType) {
    			http_request.overrideMimeType('text/xml');
    			// See note below about this line
    		}
    	} else if (window.ActiveXObject) { // IE
    		try {
    			http_request = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try {
    				http_request = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e) {}
    		}
    	}
    	/* ERROR! - Refresh this page, and resubmit. If that doesn't work, damn, its broken. Please tell us. <a href=\"$anime_page/feedback.php\" title=\"Feedback page\">Use this feedback page.</a> */
    	if (!http_request) {
    		if ( outputRef )
    		{
    			outputRef.innerHTML = "<strong>Error:</strong> Unable to report this since you don't have a javascript XML thingy (this is AJAX enabled!) Try Firefox!";
    		}
    		return false;
    	}
    
    	http_request.onreadystatechange = function() {
    	
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
    				var xmldoc = http_request.responseXML;
    				var root_node = xmldoc.getElementsByTagName('root')[0];
    
    				if ( root_node.getElementsByTagName('status')[0].firstChild.data == "success" )
    				{
    					cRef.innerHTML = root_node.getElementsByTagName('content')[0].firstChild.data;
    					pRef1.innerHTML = root_node.getElementsByTagName('pagelist')[0].firstChild.data;
    					pRef2.innerHTML = root_node.getElementsByTagName('pagelist')[0].firstChild.data;
    
    					alert( cRef.innerHTML.length );
    
    				}
    				else
    				{
    					alert ( 'some error occured' );
    					return false;
    				}
    				
                } else {
                   alert('server-side error');
                }
            }
    
    
    	};
    	http_request.open('GET', url, true);
    	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    	http_request.send(null);
    
    }

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    There's a limit on the data that can be passed to innerHTML? I didn't know that.

    Just a suggestion, perhaps you could load the comments with the page, and then use Ajax to update only the comments that come after the page has loaded. Perhaps you record the id of the comments that have come with the page load, and then you query the server, sending this id. Then the server can send you just the comments that are new, instead of sending everything all over again. That would be more efficient as you don't keep sending the same old data all over again.

    Anyway, about your innerHTML problem, perhaps you shouldn't send HTML code through AJAX as you have done. Perhaps you could make use of the XML structure.. Perhaps something like this:

    Code:
    <root>
      <comments>
        <comment>
          <name>somebody</name>
          <content>something something something</content>
        </comment>
        <comment>
          <name>somebody else</name>
          <content>lalalalalala lalalala</content>
      </comments>
    </root>
    You could have many comment nodes inside the comments tag. Then you could just loop through them and add it to the comments section of the page, using DOM. It also fits W3C's specifications

    By the way, if you don't send any POST data, as you have done above, like the http_request.send(null), then you don't need to specify the request header for Content-type as you did. This is because, there really is no content. Even if you do send any data over via the http_request.send(data) I don't think you have to specify the Content-type header. In fact I have never done so before.
    Hyperair

  4. #3
    Junior Member
    Join Date
    May 2003
    Posts
    5
    Member #
    1376
    I did some more testing and I think it is the:
    [minicode]cRef.innerHTML = root_node.getElementsByTagName('content').item(0). firstChild.data;[/minicode]

    That line is exactly 4096 characters long (i did a: alert(cRef.innerHTML = root_node.getElementsByTagName('content').item(0). firstChild.data.length); ) regardless of how long it really is. Strings have no length limit in javascript, so I don't know why that is returning less data then it should.

    What you're saying is probably the best way to do it, but I really want to be lazy and just have all the HTML passed to me to be put directly in the page. The data itself is XML compliant, its sort of like a binary file, properly escaped and everything so it doesn't mess with the structure at all. I already wrote a function that queries the database in php that outputs all the html code to make it a bit easier, but if I can't get over this 4k limit, I'm going to have to do it the way you suggested, which is just a bit more work.

    Thanks for your help, I'll continue to investigate.

  5. #4
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    You're welcome.

    That way would really defeat the purpose of not reloading the page you know.. The reason why people prefer not to reload the page is because there is less data transfer with the server. Doing it this way could burden the server, and when you have many visitors to your site, the server will more likely crash.
    Hyperair

  6. #5
    Junior Member
    Join Date
    May 2003
    Posts
    5
    Member #
    1376
    Well I figured it out, its as simple as:

    Code:
    var content_node = root_node.getElementsByTagName('content')[0];
    content_node.normalize();
    cRef.innerHTML = content_node.firstChild.data;
    throwing in that .normalize();

    Well I think it burdens the server a bit less in the respect that the rest of the page doesn't have to be loaded, only the queries that are for the comments need to be done and the comments just need to be parsed. And the html data is not that much more than the original markup for the information. But I do see your points about it being smaller just to pass the data and have the client reconstruct the information in a nicer way.

  7. #6
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    I haven't seen the method normalize() before. What does it do?
    Hyperair

  8. #7
    Junior Member
    Join Date
    May 2003
    Posts
    5
    Member #
    1376
    I don't know, I just found this solution on the web.

    This kind of explains it: http://www.howtocreate.co.uk/tutoria...ript/dombasics

    ...
    Also important to note is that although the specifications say that no matter how much text exists between tags, it should all be in one text node, in practice this is not always the case. In Opera 7 and Mozilla/Netscape 6+, if the text is larger than a specific maximum size, it is split into multiple text nodes. These text nodes will be next to each other in the childNodes collection of the parent element.

    In Opera, this maximum text node size is 32 KB. In Mozilla/Firefox/Netscape 6+, it is 4 KB. Although the normalize() method of the parent node(s) should be able to replace the multiple text nodes with a single text node containing all the text, this only works in Mozilla/Firefox/Netscape 6+. In Opera it puts all of the text into a single node and then truncates that node to 32 KB, so the contents of all except the first node are lost. Running the normalize method can crash Internet Explorer 6 and does not exist in Internet Explorer 5 on Windows.

    For this reason, I do not recommend trying to normalize. It is better to manipulate the contents of text nodes separately. In fact, you can create your own text nodes and add them to the childNodes collection. Although to the DOM, they will still appear as separate nodes, they will appear as a single piece of text in the document. Basically, you need to be aware that your text may be split into several nodes, if it is 4 KB or over, or if you have added extra text nodes in yourself. In order to get that text in a single variable, you may need to look through every child node, and if they are consecutive text nodes append them together to get the total string.
    Changing the text of text nodes
    ...
    And judging by that warning, I don't think my method is that cross-platform, so I'm going to have to rework some of this.

  9. #8
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    In my opinion, what that excerpt is trying to say is that, one text node contains an arbitrary amount of text. One text node cannot store more than that. Therefore, you may have text split into more than one text node. (Reminder: text nodes are created using document.createTextNode("text") ). Also, that excerpt says it's inadvisable to use normalize(), because it can crash IE6 and doens't exist in IE5. So don't use normalize().

    This (IMO) will not cause a problem to your innerHTML, and your XML data will not be truncated.

    For example, something like this:
    Code:
    <mytag>text (100 KB) </mytag>
    If I want to extract all those text, it will be split into more than one text node. So, I will have to do this (instead of the normalize() method)
    Code:
    // obj refers to mytag
    var myString,myArray=[];
    for (var i=0; obj.childNodes[i]; ++i)
    {
    myArray.push(obj.childNodes[i].nodeText); // get the node text from each node and put it into the array
    }
    myString = myArray.join(""); // myString now contains the full text
    I used an array and the Array.join() method because for large string concatenations, arrays are more efficient than the standard string concatenation.

    Hope this helps.

    By the way, IE5 is an obsolete browser. Don't bother yourself too much about it. IE5:Mac on the other hand... is a complete piece of junk. I never design anything with IE5:Mac in mind.
    Hyperair

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Might want to check to make sure that you're only iterating over text nodes, too (i.e., check the nodeType or tagName and make sure it's not a regular tag, but rather specifically a text node).

    Kind of retarded that that happens.

    Then again, why don't you use innerHTML to fetch the text instead of grabbing a text node?

  11. #10
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    If I'm not mistaken, the responseXML object that returns from an AJAX request doesn't have the innerHTML feature.
    Hyperair


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

firefox ajax truncate

,

firefox ajax truncate large

,

firefox data xml truncate

,

xml truncated how many

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com