SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)

    JSON text not formatting like regular HTML?

    Hi everyone,

    I am quite new to Javascript and this is the first time I have worked with JSON.

    I have a website that I am pulling the most up-to-date R.S.S. blog post and placing 10 words of it on the home page of the site - a preview of the blog article.

    I am successful at getting the blog content however the method I am using does not format within the HTML properly. If I copy the JSON blog text from the browser and paste the text into the PHP file within the same <div> where the JSON text normally appears it formats properly.



    NOTE: You may want to look at the links using firefox as I have not fully optimized the site for I.E. 6 or I.E. 7.

    Here is an example of the problem http://www.eliegante.com/index.php

    You can see the text is not wrapping within the lightest gray box.



    Here is an example with the same text copied into the <div> http://www.eliegante.com/index2.php

    You can see in this example that the text (when not rendered using JSON) formats as expected.



    To save you some time:

    Here is my javascript:
    Code:
    function call_rss(rssURL) {   
            agent.call('','rss','callback_rss',rssURL);
          }
     
          function callback_rss(str) {   
            var temp = document.getElementById('rss').innerHTML;
            document.getElementById('rss').innerHTML = str + temp;
          }
     
    window.onload = function(){
        call_rss('http://www.eliegante.com/blog/?feed=rss2');
    }
    This is the source of the rendered HTML page (just for this section) when rendering the JSON text:
    HTML Code:
    <div id='buttons'>
                    <div id='bn1'><a href="./talk_to_us.html"></a></div>
                    <div id='bn2'><a href="./promotions.html"></a></div>
                    <div id='bn3'>
                    
                        <a href="./blog">
                            <div id='rss'> </div>
                        </a>
            
                </div>
    
                </div><!-- end buttons -->
    Have I used the wrong approach? Can I format the JASON text that is being rendered in the DOM? Do you have any suggestions of how I could get the text looking like that of http://www.eliegante.com/index2.php?

    Your help will be greatly appreciated as I have been struggling to find a solution to no avail!

    Regards,
    ServerStorm
    Last edited by ServerStorm; Feb 26, 2008 at 15:37.
    ictus==""

  2. #2
    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)
    Anchors (<a>) are inline-level elements and are not allowed to contain DIV elements (they are block-level). You need to fix this first. Instead of putting a DIV in an anchor, simply give the anchor display:block in CSS.

    The cause of your problems I think is that you are setting the innerHTML as str + temp. Try setting it as just str.

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi Raffles,

    Whoops I forgot that it was inside a anchor so I removed the <div> and I already have a display: block; in my CSS.

    Certainly the text has moved to the proper vertical position however it is still not wrapping within the width (explicitly set in the CSS)
    Code:
    #bn3 a{
        background-image: url(../images/home/bn_def_Elies_Blog.jpg); /* source for start image */
        background-repeat: no-repeat;
        font: 1.6em Papyrus,Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        text-align: center;
        padding-top: 70px;
        display: block; /* a tag must be a block */
        margin-top: 44px;
        margin-left: 90px;
        width: 164px; /* width of reactive image */
        height: 134px; /* height of reactive image */
    }
    This is the HTML formatting I have now:
    HTML Code:
    <div id='bn3'>        
          <a id='rss' href="./blog"></a>        
    </div>
    And I changed as you suggested the javascript to:
    Code:
    function call_rss(rssURL) {   
            agent.call('','rss','callback_rss',rssURL);
          }
     
          function callback_rss(str) {   
            var temp = document.getElementById('rss').innerHTML;
            document.getElementById('rss').innerHTML = str;
          }
     
    window.onload = function(){
        call_rss('http://www.eliegante.com/blog/?feed=rss2');
    }
    Still the JASON text doesn't (http://www.eliegante.com/index.php) adhere to the specified CSS width; whereas (again) if I place text with the <a></a> then this text does (http://www.eliegante.com/index2.php) adhere?

    Do you have any other suggestions?

    BTW thanks for the reply!

    Regards,
    ServerStorm
    ictus==""

  4. #4
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Rather than using innerHTML (most experienced people recommend not using it) I tried to implement it in DOM to see if the rendered output was different. I tried it two ways:
    1. dynamically inserted an a tag with attributes and then append a textnode to the tag
    2. appended textNode to element ID
    Both techniques placed text in the proper area within the HTML however neither respects the bounds (ie width and height defined for the <a> tag in the CSS).

    I must be missing fundamental understanding of how DOM or innerHTML commit the data to the document as it seems that other people using this technique can dynamically render the text and have it format within the document.

    I am continuing to try to solve this on my own; however I am running out of ideas (based on my lack of javascript related knowledge) as to how to do additional troubleshooting!

    Here is my updated Javascript (appending the textNode):
    PHP Code:
    function call_rss(rssURL) {   
            
    agent.call('','rss','callback_rss',rssURL);
    }
     
    function 
    callback_rss(str) {  
        
    rssTextNode document.createTextNode(str);
        var 
    rssA document.getElementById("rss");
        
    rssA.appendChild(rssTextNode);

          } 
    window.onload = function(){
        
    call_rss('http://www.eliegante.com/blog/?feed=rss2');

    Here is the XHTML being used:
    HTML Code:
    <div id='buttons'>
                    <div id='bn1'><a href="./talk_to_us.html"></a></div>
                    <div id='bn2'><a href="./promotions.html"></a></div>
                    <div id='bn3'><a id='rss' href="./blog"></a></div>
                </div><!-- end buttons -->
    Here is a link to how this is behaving poorly

    Even if you can't explain why my implementation is working, is it possible you can let me know how it can be that appending text manually within the <a id='rss'><a> works (to be expected) but when I append to the same tag with DOM elements it ignores the the <a> elements bounds?

    Regards,
    ServerStorm
    ictus==""

  5. #5
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)

    Solved

    ************ SOLVED THIS ********************

    I can't believe it! The problem has nothing to do with Javascript but rather the string itself The string that I was passing it had the double spaces encoded with the &nbsp:&nbsp, which meant there was never any white space. Text in Firefox and I.E. will not wrap if without whitespaces, which is why this wasn't working.

    If this text was being used as mark-up it would be ok, however not for data output.

    I change the way the string formats and it works... grrrrrrrrrrrrrrrrrrrr

    Regards,
    ServerStorm
    ictus==""


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
  •