Question

This has had me stuck for a while. My web searches regarding the onclick JavaScript call has it sometimes with a capital C as in onClick and other times onclick. My code is part of a JQuery Mobile app but the onclick is JS. So, it looks like this:

domEntry = '<li><a href="#poet-details"';
domEntry += ' onclick="getPoetDetails('+ poet_name + ')">';
domEntry += poet_name;
domEntry += '</a></li>';

I’m going to add that to a div. 'poet_name does display correctly with the 3rd line. How do I access it in getPoetDetails? Did I call it right?
Also, please see: http://jsfiddle.net/brucewhealton/XF5AJ/

The function getPoetDetails can be seen at the link given. Do I access it through an event object variable? The application sends a query string to another location, dbpedia.org/sparql, and gets back JSON. I need the poet_selected or poet_name for the second query to get details about the poet because my app is so far only listing poets, not very interesting. I want to figure this out so that I can start my app by letting the user select the nationality from among a category of "Poets_by_nationality" on DBpedia.org. My problem is capturing the user’s selection, what they click on or tap on in a jQuery Mobile app and sending it to another function.

Answer 1

So you are having trouble with an onClick for your anchor tags of poet names? What I think to be the best way to do this is to not have any inline javascript. With this, when you are starting your javascript in the window ready or however you chose to do it, you should add this little line

$('#result').delegate('a', 'click', getPoetDetails);

This tells jQuery to look inside of #result and whenever there is a new anchor tag apply this click event to it. The click event should call getPoetDetails.

Now where you are creating and inserting your anchor tags you should get rid of the javascript stuff and instead have this

domEntry = '<li><a href="#poet-details"';
domEntry += 'data-name="'+ poet_name + '">';
domEntry += poet_name;
domEntry += '</a></li>';

This is giving the anchor a data value of name with the value of the poet’s name. Now you can use jQuery to get this data inside your getPoetDetails function. The start of it can now be this, and keep the rest the same.

var getPoetDetails = function(){
var poet_name_selected = $(this).data('name');
// show loader

I’m pretty sure you are either doing something wrong when you are calling to get your json data, or you are parsing it wrong, but now at least the name is got correctly by getPoetDetails. In order for this to be shown as working in jsfiddle you need to change the onLoad drop down to noWrap body since you already have the document ready in your js.

I hope this helps.