Search jQuery

jQuery Forum

listview

in jQuery Mobile • 8 years ago

I have connected a page to an xml file and i am trying to construct a listview from the data. The data is coming through correctly but it doesn't look like a proper listview should, Its basically a bulleted list. When i inspect the list in Chrome, no styles or classes have been added so i think i am close but not quiet there. Also the search feature also works which to me suggests it is listview, it just is not applying the classes. If i just create a static, hand-coded list, all classes are applied. What an earth am i doing wrong!!! Im still quite new to jquery but i am getting there slowly!

Below, is the script from my external .js file

$(document).ready(function() {

$.get('myXML.xml', function(data) {

$('#result').empty();

var htmlSM = '';

$(data).find('item').each(function () {

var $entry = $(this);

htmlSM += '<li>';

htmlSM += '<h3>' + $entry.find('place').text() + '</h3>';

htmlSM += '<p>' + $entry.find('short_description').text() + '</p>';

htmlSM += '</li>';

});

$('#result').append($(htmlSM));

});

return false;

});

and on the actual .html file i have a block of code as follows:

</ul>

I have tried changing .append to .html, but no joy, also my first option which didn't work either was to add in ui-data-role="listview" in the external .js

Any help would be greatly appreciated

I have also attached a zip file of my test files if it helps.

Attachments

RSS.zip
Size : 38.25 KB Downloads : 1303 Download

Replies(33)

Godsbest

Re: listview

8 years ago

You have to use .trigger( 'create' ) after you insert new content into the DOM.

.......
.......
$('#result').append($(htmlSM));
$('#result').parent().trigger( 'create' );
....
....

smitchell..

Re: Re: listview

8 years ago

Hi,

Thanks for that, i tried adding the line of code where you said but i couldn't get it to work unfortunately. Have I got to do anything else?

Thanks again for your help so far?

Cheers

Godsbest

Re: listview

8 years ago

You may want to share your markup (html) and the rest of your code. Is your ul element within a data-role="content" div?

smitchell..

Re: Re: listview

8 years ago

Thanks, i shared it on the original post. It was called RSS.zip. If it hasn't been uploaded properly i could upload it again if it helps?

Cheers again

Godsbest

Re: listview

8 years ago

I see it now. However, just so you know, most of us are reluctant to download and open zip files. Well, I found a solution for you; no need to look into the zip file!!

It seems this may be an additional bug with the listview and may need to be reported. See other issue with listview: https://github.com/jquery/jquery-mobile/issues/5680

You may want to create the ul element dynamically too and then call .trigger() on the element you insert the new content in. See demo here: http://jsfiddle.net/fiddleyetu/fwpF6/

Uncomment the last line and click run.

smitchell..

Re: Re: listview

8 years ago

Sorry about the zip file. I thought that would have been more helpful!! But next time I will just upload the .html files

Thanks for the link, i have played around with it and it seems to be exactly what i needed, it is the same problem, however I still cant get it to work in my file

I will keep playing with it though till hopefully i get it to work.

smitchell..

Re: Re: listview

8 years ago

Thank you, thank you very much. With your help I got it to work! And i was just about to throw in the towel.

Cheers again

Godsbest

Re: listview

8 years ago

Great!! What was the problem?

smitchell..

Re: Re: listview

8 years ago

Im not exactly sure, i kept playing! but i added this code to the bottom like you mentioned:

$('#result').append($(htmlSM));

$('#result').trigger("create");

I then added back in this code at the top:

var htmlSM = '<ul data-role="listview" data-filter="true">';

and stripped back the code on the html file to this:

and happy days! I have now gone one step further by adding in dynamic links to each list entry

Thanks again for your help, it is greatly appreciated

John Chac..

Re: listview

8 years ago

$('#result').append($(htmlSM)).trigger("create");

is enough... remember jQuery chaining... :)

smitchell..

Re: Re: listview

8 years ago

Thank you. I forgot about that, changed the code and it still works! Thanks

Godsbest

Re: listview

8 years ago

I have established that this is not a bug. When you modify an existing listview, there's a jQM method for refreshing the listview so it can enhance the new content: listview('refresh'). Sorry for providing misleading info.

Now if you comment the last line in this same: http://jsfiddle.net/fiddleyetu/fwpF6/2/ it should work as expected.

smitchell..

Re: listview

8 years ago

Thanks all. Below was my finished code:

One final question tho, the below is working with a local xml file, how can i modify the code so that it replaces 'myXML.xml' with 'feed://www.vetsonline.com/annonces/rss.php?idp=18&id_rss=103&site=14&page=accueil&c_texte=&c_secteur=&c_type_transac=
&c_type=&template=rssv2.xml'

I tried a straight swop but it doesn't work! Have i got to do anything else?

$(document).ready(function() {

$.get('myXML.xml', function(data) {

$('#result').empty();

var htmlSM = '<ul data-role="listview" data-filter="true">';

$(data).find('item').each(function () {

var $entry = $(this);

htmlSM += '<li>';

htmlSM += '<a href="' + $entry.find('link').text()+ '">';

htmlSM += '<h3>' + $entry.find('place').text() + '</h3>';

htmlSM += '<p>' + $entry.find('short_description').text() + '</p>';

htmlSM += '</a>';

htmlSM += '</li>';

});

htmlSM += '</ul>';

$('#result').append($(htmlSM)).trigger("create");

});

return false;

});

Thanks again

John Chac..

Re: listview

8 years ago

$(document).ready(function() { is not recommented...

http://view.jquerymobile.com/1.3.0/docs/faq/dom-ready-not-working.php

smitchell..

Re: Re: listview

8 years ago

Thanks for that, the link was very helpful. Im now confused tho after 'Godsbest' comment.

I did remove the document.ready function and change it to $( document ).delegate("#home", "pageinit", function() but it still didnt work. I left the alert code in, and it fired the alert box so it was working, but not loading the text

I changed the id to #home, this page does already exist, should it not and let the code generate the page.

Am i missing anything else?

Godsbest

Re: Re: listview

8 years ago

I know this is very tricky and you may not find much documentation on this. Here is your premise:

At the start of my application, load my XML file, parse it and build listview markup on-the-fly and enhance it.

Now let's look for a jQM event that can help us achieve this ... ... pageinit? This fires whenever a new page is loaded and created. But you want to add content to your markup only once. When pageinit occurs, the #result container may not be ready yet. So this would not be the appropriate event. Any other jQM event you can think of?

If you were trying to manipulate enhanced markup, maybe then DOM ready would not be good. Since:

1. DOM ready occurs only once (first page)

2. When DOM ready occurs you can be sure the #result element or other element is available to be populated,

Then it is the most appropriate event for this job.

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Godsbest

Re: listview

8 years ago

The use of DOM ready in this particular case is valid; it's not being used with respect to a jQM event. Rather it's being used to determine when to add content to the DOM, just as you would in jQ. Right?

John Chac..

Re: listview

8 years ago

is this abt cross domain ajax?

http://stackoverflow.com/questions/11736431/make-cross-domain-ajax-jsonp-request-with-jquery/11736771#11736771

Godsbest

Re: listview

8 years ago

Not at all!

smitchell..

Re: listview

8 years ago

Thank you both for all your help so far. With regards to John's comment, at the moment, i will be hosting this web app on a different server to where the RSS feed is hosted. Is this a problem and should i be aware of this as my code will break (when i actually get it working!).

My end goal though is to get it hosted on the same server, does that mean my code could work as is? And i did check and its not available as JSON format.

Thanks Godsbest, i will look into your links and investigate further

One last point for now which i have just discovered, if i change "myXML.xml" to 'http://www.animalhealthadvisor.co.uk/Vetsonline_jobs/myXML.xml' it works! This is where web app is hosted for now. Why does this work? The URL is slightly different to the first URL as its smaller and doesn't have any PHP stuff in the URL, is this the reason why?

Godsbest

Re: listview

8 years ago

The "myXML.xml" URL is a relative URL - relative to your document .. which means if you moved your document to a different folder, you would have to modify the URL in your ajax call since the location of the xml file has changed relative to your document.

The latter URL: 'http://www.animalhealthadvisor.co.uk/Vetsonline_jobs/myXML.xml' is an absolute URL. When you move your document around within your server, you do not need to edit this URL in your ajax call as the absolute URL is always the same.

However, if you try to make an ajax call from a different domain, you will run into issues of cross-domain scripting also known as same origin restriction. Are you planning at any point to grab data from a different domain?

smitchell..

Re: Re: listview

8 years ago

Thanks for that, I have two ways this could go. The more likely option at the moment is this:

The rss feed "feed://www.vetsonline.com/annonces/rss.php?idp=18&id_rss=103&site=14&page=accueil&c_texte=&c_secteur=&c_type_transac=

&c_type=&template=rssv2.xml" is hosted on 'Vetsonline.com', this is feed from the jobs section on the site. The web app that i am creating will be hosted on a DIFFERENT server, possibly 'ahajobs.co.uk' which is hosted on 123-reg.com or a new server that I could buy just for this web app. So in this instance, i will be grabbing data from a different domain.

In the ideal scenario, but not likely at the moment, i would like to host this directly on 'Vetsonline.com', but I will have to have this discussion with them when i am further on with the project. This set up is rather complicated as they are not in the UK!

Hope this helps?

Godsbest

Re: listview

8 years ago

There ways in which you can grab data from a different domain & consume it on the client-side, so when you get to that point you can use the one that best suits you:

1. JSONP is best, if available ( the source has to be able to serve JSON)

2. Google Feed API

3. Proxy server-side script

Glad to be of any help.

smitchell..

Re: Re: listview

8 years ago

Thanks, I think you might have mentioned this in an existing question I posted.

I think i am going to have to spend some time and read all the documentation as it seems a bit over my head at the moment. I am starting to grasp other things and its taking shape but accessing data remotely is bogging me down.

Can i for now, just ignore this problem i dont understand, and work with the file locally, which I do kind of understand, and then when the app is completed, will it be reasonably easy to modify my code to use, for example google API (when i have grasped it), without rewriting my entire code?

Godsbest

Re: listview

8 years ago

Here is a simple demo on how to fetch a remote feed and display the contents on your page: http://jsfiddle.net/fiddleyetu/PJp2A/

jQM: http://jsfiddle.net/fiddleyetu/PJp2A/1/

smitchell..

Re: Re: listview

8 years ago

That link looks fantastic. Thank you. I'm hoping to revisit this next week and hopefully crack it once and for all.

Cheers for all your help.

smitchell..

Re: Re: listview

8 years ago

Thanks for that, this is working brilliantly. I changed some of it and it seems to be working well. I have a question tho. This is working great with the url in the code below, however this is only part one of my app. The second part wants to stream some jobs from a new URL. But this is not working, this URL has a file extension of .xml unlike the url that works which is much cleaner and shorter.

This is the URL that i would like to stream from. http://www.vetsonline.com/annonces/rss.php?idp=18&id_rss=103&site=14&page=accueil&c_texte=&c_secteur=&c_type_transac=&c_type=&template=rssv2.xml

I didnt think it was working at all but have just released that it is grabbing the feed, but in the console it is displaying no entries. Is this because its an .XML file. If so, is there anything i can do to resolve this. Or if not, what i can i tell my web hosts to do to change the url so that I can stream from it. Unfortunately they did say I cant have it in JSON, but they have managed to get one feed to work for me!

//Finished code so far

var gurl = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=20&q=";

var ynews = 'http://www.vetsonline.com/actualites/rss.php?rubrique_id=262,263,479';

$.get(

gurl + encodeURI( ynews ) + "&callback=?",

function(data) {

if( data.responseStatus == 200 ) {

console.log( data );

var newsFeed = '<ul data-role="listview" data-filter="true"';

$.each(data.responseData.feed.entries,function(i,v) {

newsFeed += '<li>';

newsFeed += '<a href= "'+ v.link +'" >';

newsFeed += '<h3>' + v.title + '</h3>';

newsFeed += '<img src="http://www.vetsonline.com/actualites/upload/vetsonline3R/site_vetsonline3r_actu64184_photo.jpg"/>';

newsFeed += '<p>' + v.contentSnippet + '</p>';

newsFeed += '<p>' + v.publishedDate + '</p>';

newsFeed += '</a>';

newsFeed += '</li>';

});

newsFeed += '<ul>';

$('#NewsHome').html(newsFeed);

} else {

alert( 'There was an error' );

}

$('#NewsHome').trigger( 'create' );

'json'

);

Godsbest

Re: Re: listview

8 years ago

I guess you are getting responseStatus=400. To check that you can move console.log( data ) to right above the if statement. If this is the case then content type in the header is not correct. The API only accepts application/rss+xml and application/atom+xml.

smitchell..

Re: Re: listview

8 years ago

Yep, thats what I am getting. Just moved the console.log and now getting that error.

So do i just go back to them saying that can they just add a correct header that supports the following

application/rss+xml and application/atom+xml or do i need to word that a bit better.

As they are from France and need to make this as clear as possible?

Godsbest

Re: Re: listview

8 years ago

Correct!! Have them set the correct content-type in the header. Let us know how that goes.

smitchell..

Re: Re: listview

8 years ago

Thanks for that. I have requested this and will let you know how i get on. Sometimes they are quick, but sometimes they dont reply... :-)

yuvaraj

Re: listview

8 years ago

for example we r using json like following.u can try like the following code..

<html>

<title>Youtube Json</title>

<body>

<h3>

Header

</h3>

</div>

Enter The Search

</label>

</fieldset>

</div>

<a id="but2" data-role="button" data-theme="b" href="#page1" data-icon="arrow-r"

data-iconpos="right">

Button

</a>

</div>

</ul>

<h3>

Footer

</h3>

</div>

var enter="";

var view="";

var yimage="";

$("#but2").click(function(){

alert("Button Clicked");

$.getJSON("http://gdata.youtube.com/feeds/api/videos?q="+$('#ser').val()+"&format=5&max-results=10&v=2&alt=jsonc&callback=?",

function(root){

alert($('#ser').val());

$.each(root.data.items,function(i,item){

enter=item.title;

view=item.content["5"];

yimage=item.thumbnail.sqDefault;

alert(yimage);

Creation();

});

function Creation(){

$("#y").append('<li data-theme="c"><a href="'+view+'" data-transition="slide"><img src="'+yimage+'" width="100" height="100"><h3>'+enter+'</h3><hr></li>');

}

</script>

</body>

</html>

yuvaraj

Re: listview

8 years ago

the above will the youtube json i had used.to display the searched video with the keyword..

Top Reply

Response title

Attachments

Attachments

Replies(33)

Statistics

Tags

Actions