I have a getJSON function that converts the results to an html template to display as a list that contains a different hyperlink within each list item. I need to override the normal html function of the link so it doesn't open a new page but loads into a specific divide using the load() method located within my navClickListener() function.
If I put a dummy url into var gotoURL = '';//<--..AND GET IT INTO THIS VAR...
, it works as planned but I need to grab the actual url's from the array items.
I cannot figure a way to do this. Can you please look thru my snippets and pay attention to the inline comments in all CAPS.
Thank-you for your help.
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
. . . .
newItem.find("a").attr("href", this.gotoURL);//<--PREVENT NORMAL FUNCTION...
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
. . . .
// Click listener for navigation items
var target = data.targetKey;
var gotoURL = '';//<--..AND GET IT INTO THIS VAR...
navClickListener(appendE, target, gotoURL);
});
};
/* ========== Navigation click listener function ============= */
function navClickListener(appendE, target, gotoURL) {
$('#' + appendE).on('click', 'a', function(e){
e.preventDefault();
$('#' + target).load(gotoURL);//<--...SO IT GETS INTO HERE??
. . . .
});
};