Parsing json with javascript and displaying results error?

Question

I am parsing a json feed with javascript and then displaying the results. I am also using jquery mobile. I find that when I parse and then display, a bullet appears for one of the li's and I don't why it's showing.

When I try to just statically display the results, this li bullet doesn't show. Any ideas on why this is happening?

Parsing json + displaying:

         $("#results").append('<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">   <a href="#page2" data-transition="slide">  <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">'+item.business.name+'</li> <li class="custom_listview_img" style = "background-image:url('+item.images.image_smart+');"></li></a></ul>');

Static display:

         <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal"> 
            <a href="#page2" data-transition="slide">
            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">Himalayan Flavors</li> 
            <li class="custom_listview_img" style = "background-image:url('http://c.yipitcdn.com/thumbor/SOWRPRFYvkagojw-sA_VPeSKK_k=/408x357/smart/c.yipitcdn.com/deal/20-to-spend-on-food-and-drink-3761-1374483321.jpg');"></li>
        </a>
        </ul>

There's no JSON in the code you've shown. You do seem to have an object called item, but since you don't show any details of that object we'd just be guessing about whether you're using it correctly... Also, it's invalid html to have an <a> tag as a (direct) child of a <ul> element. — nnnnnn
– nnnnnn, Commented Jul 27, 2013 at 3:39
The json works as I'm getting results shown. My question is why the <li> is displaying in the .append. — sharataka
– sharataka, Commented Jul 27, 2013 at 3:40
You don't need to add classes when appending items dynamically. This will result in duplicate styling. Just add data role, data transition, custom styles and then call $('ul').listview() or listview('refresh'). — Omar
– Omar, Commented Jul 27, 2013 at 3:43

adeneo · Accepted Answer · 2013-07-27 03:41:33Z

1

This is a styling issue, do:

ul {list-style : none;}

in CSS to remove the bullets

FIDDLE

answered Jul 27, 2013 at 3:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

sharataka Over a year ago

When I try this, there is still some margin on the left where the bullet would have been.

adeneo Over a year ago

@sharataka - It's supposed to be like that, but set the padding to 0, and it's gone

Omar Over a year ago

Jquery mobile way, enhance markup $('ul').listview(); after appending items dynamically fiddle.jshell.net/Bj7bb

krishwader · Accepted Answer · 2013-07-27 05:40:13Z

0

The most probable reason of this is their is a onload js that is changing the style of your list. so once the page is loaded. It is not called.

try calling expicilty eg after your code put

$("#listview").css("list-style-type","none");

And importantly THEIR IS NO JSON IN YOUR GIVEN CODE

edited Jul 27, 2013 at 5:40

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

answered Jul 27, 2013 at 3:44

ManMohan Vyas

4,0924 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Parsing json with javascript and displaying results error?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related