Ajax call does not work for this custom code

Instead of doing:

data: {action: 'performers', catname: catname}

Try:

data: 'action=performers&catname="+catname;

You may also want to define “catname” globally, i am not sure if scope is an issue with your ajax handler but this could be why it is not being set. As an example try to alert catname within the ajax handler above cache=false; if the alert is not thrown then catname is not set.

Instead of using alerts which can become tedious you could use console.log(catname) and review the value within the console.

In relation to using nonce for security e.t.c I can”t help you there, I am sure there are a plethora of articles out there explaining its use. google it. check out the wordpress codex to.

Hope this helps.