Search jQuery

jQuery Forum

rachel.ri..

List anchor OnClick Method

in Getting Started • 10 years ago

Hey All,

Since ICS does not support URL parm passing, I am trying to convert all of my links to use localStorage. I am doing that by setting an onCall method and sending my parameter to that method, then storing it. This works on one page, but on the following page, does not - on the page it doesn't work, it seems as though it never even jumps into the onClick method b/c I can't see my console.info messages come across but the anchor link does fire off and goes to the next page. Just looking for any guidance as I am a bit stuck with something that seems so easy - maybe this is even more of a js issue than JQM. Also want to mention this is using the latest version of PhoneGap.

var serviceURL = "******";
var results;
$('#projectListPage').live('pageshow',function(event) {
getProjectList();
});
function getProjectList() {
var id = localStorage.getItem('userID');
$.getJSON(serviceURL + 'projectList.php?id=' + id, function(json){
$('#projectList li').remove();
results = json.results;
//check if no projects
if(results == null || results == "" ){
$('#projectList').append('<li>You have no tasks</li>');
$('#projectList').listview('refresh');
}
//list projects
$.each(results, function(i,project){
$('#projectList').append('<li><a href="projectDetails.html" onClick="return storePage(' + project.id + ');"><h3>' + project.name + '</h3><p></p><p>' + project.description + '</p></a></li>');
});
//$.mobile.showLoadMessage(false);
$('#projectList').listview('refresh');
});
}
function storePage(pageID){
localStorage.setItem('projectID',pageID); //this stores correctly
return true;
}

Does not work on TaskLists.js

$('#taskPage').live('pageshow',function(event) {
var id = localStorage.getItem('projectID');
var serviceURL = "http://******";
$.getJSON(serviceURL + 'getTaskLists.php?id=' + id, function(json){
var results = json.results;
//validate not error returned instead of results
if(results == null || results == "" ){
$('#taskList').append('<li>You have no task lists</li>');
$('#taskList').listview('refresh');
}
//grab task Lists
$.each(results, function(i,taskLists){
$('#taskList').append('<li><a href="projectTaskDetails.html" onClick="return storePage(' + taskLists.id + ');"><h3>' + taskLists.name + '</h3><p></p><p>' + taskLists.description + '</p><p>Start Date: ' + taskLists.start_date + '</p><p>Due Date: ' + taskLists.due_date + '</p></a></li>');
});
$('#taskList').listview('refresh');
});//<--end post
});
function storePage(pageID){
console.info('inside onClick taskLists function'); //does not even enter the method
localStorage.setItem('tlID',pageID);
return true;
}

Replies(7)

alano999

Re: List anchor OnClick Method

10 years ago

I think it might be as simple as a typo. You need onclick (all lower case).

Also, if you're developing for newer versions of jQuery, you should do a straight swap, use .on() instead of .live() because the latter is being deprecated.

Let me know how it goes.

Alan

alano999

Re: List anchor OnClick Method

10 years ago

I found this case to be so weird, that I had to look deeper. I have copied your code across and staged it on my own server to see what was going on.

Well the solution came to me as I was reading the wiki notes at the bottom of the jQuery documentation. They hint that events are not copied across during an append operation. This is not mentioned within the main text of the documentation though.

So, with a bit of testing, I can confirm... you cannot (and should not) append events.

You should, arguably in any case, instead add a delegated event handler afterwards. This is how I have re-written TaskLists.js (I have not tested the local storage aspect)...

$('#taskPage').on('pageshow', function(event) {
var id = localStorage.getItem('projectID');
var serviceURL = "http://******";
$.getJSON(serviceURL + 'getTaskLists.php?id=' + id, function(json){
var results = json.results;
var $taskList = $('#taskList'); //copy, rather than re-calculate repeatedly
//validate not error returned instead of results
if (!results){ //shortcut test for 0, null, undefined, false, NaN, empty string
$taskList.append('<li>You have no task lists</li>');
$taskList.listview('refresh');
}
//grab task Lists
$.each(results, function(i,taskLists){
$taskList.append('<li><a href="projectTaskDetails.html" data-id="' + taskLists.id + '"><h3>' + taskLists.name + '</h3><p></p><p>' + taskLists.description + '</p><p>Start Date: ' + taskLists.start_date + '</p><p>Due Date: ' + taskLists.due_date + '</p></a></li>');
});
$taskList.on('click', 'a', storePage);
$taskList.listview('refresh');
});//<--end post
});
function storePage(){
var pageID = $(this).data('id'); //"this" and "$(this)" represent the clicked <a>
console.info('inside onClick taskLists function: ' + pageID);
//localStorage.setItem('tlID',pageID);
return true; //or whatever you wish to return as <a> onclick result
}

The key changes are:-

Swapped your .live() for a .on(). If you are running version of jQuery older than v1.7, then you should stick with .live().
Used a cached selector, var $taskList = $('#taskList'); , so jQuery does not need to recalculate the reference every time it's used (a lot of times).
Within the .append(), save the pageID value into a custom Data attribute, then read it out later, as required.
Add a jQuery delegated event handler for the newly appended DOM fragments (if your jQuery is older than v1.7, use .live() instead of the newer .on().

I strongly suggest you change the "project" JavaScript too. It's almost certainly a pure fluke it worked in your test cases. Shout if you need assistance.

Best wishes,

Alan

rachel.ri..

Re: List anchor OnClick Method

10 years ago

Wow, thank you very much for the help and really diving into it. I'm starting with the projectList page...implemented all of your changes (had to use .live() instead of .on) - looks like it still won't jump into the storePage function and sore the pageID. Thank you again for all of your help, greatly appreciate it!

var serviceURL = "******";
var results;
$('#projectListPage').live('pageshow',function(event) {
getProjectList();
});
function getProjectList() {
var id = localStorage.getItem('userID');
$.getJSON(serviceURL + 'projectList.php?id=' + id, function(json){
results = json.results;
var $projectList = $('#projectList');
//check if no projects
if(!results){
$projectList.append('<li>You have no projects</li>');
$projectList.listview('refresh');
}
//list projects
$.each(results, function(i,project){
$projectList.append('<li><a href="projectDetails.html" data-id="' + project.id + '"><h3>' + project.name + '</h3><p></p><p>' + project.description + '</p></a></li>');
});
//$.mobile.showLoadMessage(false);
$projectList.live('click', 'a', storePage);
$projectList.listview('refresh');
});
}
function storePage(){
var pageID = $(this).data('id'); //"this" and "$(this)" represent the clicked <a>
console.info('inside storePage on project list');
localStorage.setItem('projectID',pageID);
return true;
}

rachel.ri..

Re: List anchor OnClick Method

10 years ago

I think the issue is the 'click' functionality not firing. I've noticed that the click won't work on another button I have in the app either although it works in my Froyo version. Tried changing it to use .on & .live, but still no luck.

alano999

Re: List anchor OnClick Method

10 years ago

Did the taskList version respond to clicking, and save the data to local storage?

rachel.ri..

Re: List anchor OnClick Method

10 years ago

No, it didn't jump into the storePage either. I tried going back to fix the projectList to your code change recommendations as well since that is the predecessor to the taskList page (btw, really appreciate all of the performance/cleaner code suggestions you gave me). Seems pageShow doesn't want to fire-off on either page...

alano999

Re: List anchor OnClick Method

10 years ago

Hi. Can I please quickly check with you what technologies you are using... just so I can replicate your configuration.

You already mentioned PhoneGap - which I have never used before and I am not sure I can install simply.

What about other libraries such as jQuery UI and jQuery Mobile? What are the versions of all libraries, including jQuery Core and PhoneGap?

Cheers,

Alan

Top Reply

Response title

Attachments

jQuery Forum

List anchor OnClick Method

Replies(7)

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Re: List anchor OnClick Method

Statistics

Tags

Actions