Search jQuery

jQuery Forum

Screen name:
smitchell1547

smitchell1547's Profile

12 Posts

27 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

dates
[4Replies]
- 11-Jun-2013 10:01 AM
- Forum: Using jQuery
Hi

I am using google RSS feed to pull in an xml file using jquery and jquery mobile, this works well, however the date is reversed. In the XML file, the date is correct (DAY-MONTH-YEAR) but in my app the dates (Months and Days) are reversed. Is this easy to fix? and if so, could anybody please help me?

Any help would be greatly appreciated?

Below is the code that i have so far: the area is highlighted in red if it helps?
var googleResult = [];
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("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");

feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
feed.includeHistoricalEntries();
feed.setNumEntries(90);
feed.load(function (result) {
   console.log(result);

if (!result.error) {
googleResult = result ;
var output = '<ul data-role="listview" data-filter="true" data-filter-placeholder="Search for a phrase/word">';
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var publishedDate = new Date($(this).find("publishedDate").text());
var day = publishedDate.getDate();
var month = publishedDate.getMonth() + 1;
var year = publishedDate.getFullYear();
var SMdate = month + '/' + day + '/' + year;

output += '<li>';
output += '<a href= "#feedContent?i=' + i + '" data-transition = "slide" >';
//output += '<p class="ui-li-aside">' + entry.publishedDate + '</p>';
output += '<h1>' + entry.title + '</h1>';
output += '<p>' + entry.publishedDate + '</p>';
//output += '<p class="ui-li-aside">' + entry.publishedDate.slice(0, 12) + '</p>';

var snippet = entry.contentSnippet;
//var code = entry.content.slice(-3);
var sm = entry.contentSnippet;
var code = entry.content.match(/\/VS|\/VN|\/PM\/OT/);
//var code = entry.content.match(/VNT|VT\d\d/);
var nCode = sm.concat(code);
//alert(code);

//output += '<p>' + entry.contentSnippet + '</p>';
output += '<p>' + nCode + '</p>';

output += '</a>';
output += '</li>';
}
output += '</ul>';

$('#jobsFeed').html(output);
$('#jobsFeed').trigger('create');

}
});
}
google.setOnLoadCallback(initialize);

$(document).on("pagebeforechange", function (e, data) {
   // We only want to handle changePage() calls where the caller is
   // asking us to load a page by URL
   if (typeof data.toPage === "string") {
   // We are being asked to load a page by URL
   var u = $.mobile.path.parseUrl(data.toPage), _re = "#feedContent";

   if (u.hash.search(_re) !== -1) {
   var i = urlParam("i", data.toPage);
   $("#feedContent").remove();
   var $page = $("<div data-role='page' id='feedContent' data-add-back-btn='true'><div data-role='header'><h1>" + googleResult.feed.entries[i].title + "</h1></div></div>");
   var $content = $("<div data-role='content' id='feedContent'></div>");
$content.append(googleResult.feed.entries[i].content);
   $page.append($content);
   $.mobile.pageContainer.append($page);
   }
   }
});

select menu
[1Reply]
- 11-Jun-2013 06:49 AM
- Forum: jQuery Mobile
Hi All,

I have this code (below) that works well but i am having some issues with a select menu. When you select an item from the list, it adds some text to the search bar and filters the results of my listview. That works well. but when you select an option, the highlighted state doesnt change, it keeps the first option that you choose, and will never change, however, it does know what you have selected as the filtering still works, but gives the user no visual appearance to what they have choose.

Any help anybody could give me would be appreciated.

Thanks

<div data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Filter jobs</h1>
</div>
<div data-role="content">

<div data-role="fieldcontain" id="filterJobs">
<label for="selectmenu" class="select">Filter by title:</label>
<select name="selectmenu" id="selectmenu" data-theme="a" data-native-menu="false">
<option value="" data-placeholder="true" >Please select...</option>
<option value="">All</option>
<option value="/VS">Veterinary Surgeon</option>
<option value="/VN">Veterinary Nurse</option>
<option value="/PM">Practice Manager</option>
<option value="/OT">Other</option>
</select>
</div>
<p><a href="#home" data-role="button" data-rel="back" data-theme="a">OK</a></p>
</div>
</div>

This is the js that makes the search work, and have now realised this is the problem, if i remove this, then the users choice is reflected in the dropdown menu, but i really need that code. Is there something i could change in this snippet

$(function() {
$('#selectmenu').change(function() {

var val = $(this).val();

$('.ui-input-text').val(val); //put value of select menu on search bar Filter

//alert('You selected ' + val);

function simulateKeyUp(character) { //simulate keyup to run the filter
jQuery.event.trigger({ type : 'keyup', which : character.charCodeAt(0) });
}
$('.ui-input-text').keyup();

$('body').keyup(function(e) {
jQuery.event.trigger({ type : 'keyup', which : character.charCodeAt(0) });
$('.ui-input-text').val('');

});

simulateKeyUp("e");
$('.ui-input-text').val(''); //clear filter search bar

});
});

Standard search for list view
[0Replies]
- 20-May-2013 10:01 AM
- Forum: Developing jQuery Mobile
Hi

I have a listview that is an RSS feed and has a data-filter=true attribute

If you enter text in the search filter, it only searches for the text in the contentSnippet, if you click on the list item, it displays the entire text for the rss feed. Is it possible to set the search, so it searches the entire entry and not just the snippet of the text.

Any help would be greatly appreciated.

Cheers

Filtering a listview
[0Replies]
- 20-May-2013 07:03 AM
- Forum: jQuery Mobile
Hi,

Is it possible to filter a listview with a dropdown/select menu. I'm really struggling with this and would really appreciate any help!

Cheers

Sean

Filter from a select menu
[1Reply]
- 09-May-2013 12:06 PM
- Forum: jQuery Mobile
Hi

I have a listview that is styled with jQuery mobile that is being pulled in dynamically via googles API. It has a data-filter true attribute applied and that works well.

I have added a dropdown menu above the listview, that ideally, i would like the user to select an item and then it filters/searches the listview content for that word and refines the list accordingly.

For example, in the dropdown, one of the options is Vet Nurse, I have configured the export value as 'VN1'. In the body of some of the listview items, the words 'VN1' will appear in the text. When the user selects 'Vet Nurse' from the list, i would like it to filter and displays only the items that have the words 'VN1'. Like a super charged data-filter, but with predefined search words.

If anybody could give me any guidance, this would be extremely appreciated. Thank you very much

Content not styling
[2Replies]
- 15-Apr-2013 09:05 AM
- Forum: jQuery Mobile
Hi

If I try and create extra pages to my app, such as homepage, when the user clicks on the 'Search' button on the home page, when the script(next page) loads, it doesn't style up the list views. It only styles up when you refresh the page.

Is this something down to how and when the script loads. Is this JS loading too quickly before the page content is available and thats why it needs to refresh.

I tried exporting the JS code into a separate JS file and injecting it on page load but thats not working either.
But still think its loading up before the page is.

Can i attach the JS file to a button/link or am i missing another trick?

'Im pretty sure that i am using a multi-page template. All of my pages are nested inside one html document. Is it best if i separated the content out and created a new doc for the listview pages'.
Also, I stripped out the code, and all the files I have are index.html that uses 2 script files located in a JS folder/ and a CSS Folder which has one file.

Thank you for any help yo can give me.

RSS feed
[7Replies]
- 15-Apr-2013 04:30 AM
- Forum: jQuery Mobile
Hi,

I have this code which populates a listview from an RSS Feed, what i would really like is when the user clicks a link, it goes to a new page in my app and displays the 'content' tag from the feed.

If anyone could give me any guidance on how i could achieve this, it would be greatly appreciated, thankyou.

Below is the code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("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");

feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
//feed.includeHistoricalEntries();
feed.setNumEntries(100);
feed.load(function(result) {

if (!result.error) {

var output = '<ul data-role="listview" data-filter="true">';
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
output+= '<li>';
output += '<a href= "landing.html" >';
output+= '<h1>' + entry.title + '</h1>';
output+= '<p>' + entry.contentSnippet + '</p>';
output+= '</a>';
output+= '</li>';

}
output+= '</ul>';
$('#jobsFeed').html(output);
$('#jobsFeed').trigger( 'create' );

}
});
}
google.setOnLoadCallback(initialize);

</script>

</head>
<body>
<div data-role="page" id="jobs">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" id="jobsFeed">

</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>


</body>
</html>

Dynamic listview
[2Replies]
- 15-Apr-2013 03:55 AM
- Forum: jQuery Mobile
Hi,

I have this code which is working quite well. The listview is styling up properly 'ALL EXCEPT' the first item in the list. Is their any reason for this? When i inspect the item in chrome, it is telling me that no classes has been added to the list item, so I know this is the problem but have no idea how to fix it.

How can i force the styling on this item. I have tried moving the entire code block on the page but nothing is working.

Any help is greatly appreciated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("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");

feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
//feed.includeHistoricalEntries();
feed.setNumEntries(100);
feed.load(function(result) {

if (!result.error) {

var output = '<ul data-role="listview" data-filter="true"';
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
output+= '<li>';
output += '<a href= "'+ entry.link +'" >';
output+= '<h1>' + entry.title + '</h1>';
output+= '<p>' + entry.contentSnippet + '</p>';
output+= '</a>';
output+= '</li>';

}
output+= '</ul>';
$('#jobsFeed').html(output);
$('#jobsFeed').trigger( 'create' );

}
});
}
google.setOnLoadCallback(initialize);

</script>

</head>
<body>
<div data-role="page" id="jobs">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" id="jobsFeed">

</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>


</body>
</html>

selectors
[1Reply]
- 12-Mar-2013 12:23 PM
- Forum: jQuery Mobile
Hi

Can anybody help me grab some data from the below snippet, i need to get hold of the data inside the content:encoded tag.

My code which has worked so far to get the rest of the data is something like this:
'<h1>' + $entry.find('place').text() + '</h1>'; but for this example the ![CDATA[ is getting me!
If i try '<h1>' + $entry.find('content:encoded').text() + '</h1>'; it returns nothing! What is the <!CDATA and how to i get past this?

<content:encoded>
<![CDATA[
Burghfield and Goring Veterinary Surgeries<br />Goring-on-Thames, Oxon<br />To run own branch surgery in pretty village of Goring-on-Thames, Oxon. Surgery very well equipped with lab, theatre, xray, u/s, dental station and a great team of nursing staff. Full back-up given at sister practice with number of certificate holders. All applicants considered, no OOH, 1 in 4 Saturdays, 4 day week standard but could suit someone wishing to job-share. See fullyvetted.co.uk for more information or call 07973 666259. * VT43.1113<br /><a href="http://www.vetsonline.com/annonces/emploi_curl.php?page=emploi&id=306790">Apply online</a><br /><br />© Vetsonline <br />
]]>
</content:encoded>

Thank you in advance for any help you can give me

listview
[33Replies]
- 11-Mar-2013 08:12 AM
- Forum: jQuery Mobile
Hi

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 data-role="listview" data-filter="true" id="result">

</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: 1272

loading data
[6Replies]
- 28-Feb-2013 12:24 PM
- Forum: jQuery Mobile
Hi

If anybody could give me some advice I would be extremely grateful. I am in the process of creating a recruitment app and I am having some problems accessing a data file from this URL http://www.vetsonline.com/annonces/rss.php?idp=18&id_rss=80&site=14&page=accueil&c_texte=&c_secteur=&c_type_transac=&c_type

It seems to be a php file. Can i access this data from jquery and what is the best method to achieve this. Before I do any thing I would like to console.log the data so I can read it but im struggling with that to.

I have successfully loaded it via the zRSSFeed plugin and it brings in all the content, but i have no idea to format it. Ideally to start with, I would like to parse the data file and just show the headline and one line of text from the description, and then link it to a new page within the app with further information instead of linking to the URL redirecting them to our website.

Any help or guidance would be greatly appreciated

Thank you

Jquery mobile books
[1Reply]
- 15-Feb-2013 06:33 AM
- Forum: Developing jQuery Mobile
Hi

Im rather new to jquery and jquery mobile. I've got a basic understanding of both.

Can anybody recommend any good books on both subjects that are up to date as there are so many to choose from. I have an ok knowledge of html and css and I have manage to create a mini jobs site from jquery mobile but i'm looking to enhance it further.

Also, Apologies if this is silly question, but is Jquery UI very similar to jquery mobile as there is some books on that topic too.

Thank you in advance for any guidance

Cheers

Sean

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend