jQuery not formatting html right

Question

I can upload a picture of the problem if you need one, but I need the last item to look like the rest. I read an rss feed and grab the first title, then populate it in the list. I try to format it like the rest, but it is not working. Here is my function:

<script type="text/javascript">

jQuery(function() {

    jQuery.getFeed({
        url: 'xml/rss-21.xml',
        success: function(feed) {

            var html = '';

            for(var i = 0; i < 1; i++) {

                var item = feed.items[i];


                html += '<li data-theme="c">'
                + '<a href="#page1" data-transition="slide">'
                + item.link
                + '">'
                + item.title
                + '</a>'
                + '</li>';
            }

            jQuery('#result').append(html);
        }    
    });
});

</script>

I need it to formatted like:

<li data-theme="c">
                    <a href="http://www.tristateis.com" data-transition="slide">
                        Win a Free Digital Pocket Memo
                    </a>
                </li>

Thank you for your help.

I'm at work so i can't see it because of the network restrictions, can you just add the code of what you're getting ? — Isaac Gonzalez
– Isaac Gonzalez, Commented Aug 9, 2012 at 19:30
Hey Isaac I got it to format correctly, I was leaving out some css. However it is not working in chrome, but it is working in safari. Any suggestions? — Sean Richardson
– Sean Richardson, Commented Aug 9, 2012 at 19:48

grdaneault · Accepted Answer · 2012-08-09 18:54:48Z

1

Looks like you're not actually making a link here, the href should be item.link (assuming that's the correct value)

html += '<li data-theme="c">'
        + '<a href="' + item.link +'" data-transition="slide">'
        + item.title
        + '</a>'
        + '</li>';

answered Aug 9, 2012 at 18:54

grdaneault

8401 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sean Richardson Over a year ago

Your right, I just need the title to be displayed not the link. I forgot to take that out in my original post. I copy your text above but I still does not look like the rest of the elements in my list. Here is what it looks like: postimage.org/image/y0nyv4tin

grdaneault Over a year ago

in that case it looks like there's probably some class missing that the others have. The html it produces is valid. You can right click on one of the other links and choose inspect element in chrome and it will show all the styles / properties that the tag has

Sean Richardson Over a year ago

Thank you! I inspected the element and found out what I needed!

Isaac Gonzalez · Accepted Answer · 2012-08-09 19:14:19Z

The problem seems to be on when you're appending to html :

html += '<li data-theme="c">'
            + '<a href="#page1" data-transition="slide">'
            + item.link
            +" "               
            + item.title
            + '</a>'
            + '</li>';

Also what you can do to get more control than just formatting a string is to do this:

var li = $('<li></li>',{
   'data-theme' : 'c',
});

var link = $('<a></a>',{
    href : item.link
    text : item.title,
    'data-transition' : 'slide'
});

And then just li.append(a); that way it's easier to edit and it's also a better practice

Ibu · Accepted Answer · 2012-08-09 19:19:57Z

1

html += '<li data-theme="c">'
+ '<a href="#page1" data-transition="slide">'
+ item.link
+ '">' // problem here
+ item.title
+ '</a>'
+ '</li>';

should be

html += '<li data-theme="c">'
+ '<a href="#page1" data-transition="slide">'
+ item.link
+ item.title
+ '</a>'
+ '</li>';

EDIT:

you need to put the link in the right place:

html += '<li data-theme="c">'
+ '<a data-transition="slide" href="'
+ item.link + '" >'
+ item.title
+ '</a>'
+ '</li>';

edited Aug 9, 2012 at 19:19

answered Aug 9, 2012 at 18:42

Ibu

43.9k14 gold badges82 silver badges109 bronze badges

3 Comments

Sean Richardson Over a year ago

Thanks for the solutions, but it is still not working correctly, tried both solutions. The text is in the ul,but still not formatted correctly.

grdaneault Over a year ago

you should probably remove the first href="#page1" then

Sean Richardson Over a year ago

I used your edit, but it looks the same. I do not need item.link, I can just use #page1. Can I use the theme in my jQuery Function?

Collectives™ on Stack Overflow

jQuery not formatting html right

3 Answers 3

3 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Related