reference to jquery function does not work

Question

In my layout, i am referring to a jquery function when you click on a div

echo '<div class="fright menu_opcion" onclick="cambiarMenu(-1, \'users\', \'panel\');">Inicio</div>';
echo '<div class="fright menu_opcion" onclick="cambiarMenu(-1, \'eventos\', \'index\');">Eventos</div>';
echo '<div class="fright menu_opcion" onclick="cambiarMenu(-1, \'eventos\', \'add\');">Crear evento</div>';

HTML code :

<div class="fright menu_opcion" onclick="cambiarMenu(-1, 'users', 'panel');">Inicio</div>
<div class="fright menu_opcion" onclick="cambiarMenu(-1, 'eventos', 'index');">Eventos</div>
<div class="fright menu_opcion" onclick="cambiarMenu(-1, 'eventos', 'add');">Crear evento</div>

But always get this error:

function :

<script>
cambiarMenu = function( evento_id, controller, action ) {
 if (evento_id == 0)
 return;
 url='<?php echo $this->Html->url(array('admin'=>'true',
 'plugin'=>null,
 'controller' => 'menus',
 'action' => 'menu_change'));?>/'+evento_id;
 $.post(url, function(data) {
 if(data) 
 if (data != -1){
 window.location.href = '<?php if ($SuperAdmin) $action = 'view'; else $action = 'view';
 echo $this->Html->url(array('admin'=>'true',
 'plugin'=>null,
 'controller' => 'events',
 'action' => $action));?>';
 } else {
 redirect = ('<?php echo $this->Html->url(array('admin'=>'true',
 'plugin'=>null,
 'controller'=>'',
 'action' => ''));?>/').split('admin');
 window.location.href = redirect[0] + 'admin/'+controller+'/'+action;
 }
 }
 );
}

This function refers to where to redirect the user, I am using Cakephp why the code is.

Uncaught ReferenceError: cambiarMenu is not defined

• Karl-André Gagnon: If it's a jQuery function, shouldn't there be a dollar sign somewhere?!
• hateful: Sorry! add the function to my post! @Karl-AndréGagnon
• Uzbekjon: Can you pastebin the rendered HTML? Is your javascript included on the final page?
• hateful: I did not understand what you need @Uzbekjon
• Uzbekjon: Show us the HTML from the browser, not PHP file.

Answer 1

Is the javascript function defined in the page? or Is the javascript file containing the function included correctly? It could be a timing issue.

Read further if you want a way to do this that's cleaner, more reliable, and easier to debug...

Do this with a jQuery event listener:

<script>
function cambiarMenu(val1,val2,val3)
{
 alert('cambiarMenu called with '+val1+','+val2+','+val3);
}
$(document).ready(function(){
 $(".menu_opcion")
 .click(function(){
 var menuVal = $(this).html();
 switch(menuVal)
 {
 case "Inicio":
 cambiarMenu(-1, 'users', 'panel');
 break;
 case "Eventos":
 cambiarMenu(-1, 'eventos', 'index');
 break;
 case "Crear evento":
 cambiarMenu(-1, 'eventos', 'add');
 break;
 default:
 }
 });
 /*etc etc etc....*/
});
</script>
<div class="fright menu_opcion">Inicio</div>
<div class="fright menu_opcion">Eventos</div>
<div class="fright menu_opcion">Crear evento</div>

Then again I'm biased against using a php echo statement and a zillion quote escapes for every line of html, and putting javascript in html onClick attributes when it can be avoided.

Stuff's a lot easier to debug...

$(document).ready... handles loading issues. You can also chain other events using this handler strategy, such as mouseover etc:

$(".menu_opcion")
 .click(function(){
 var menuVal = $(this).html();
 switch(menuVal)
 {
 case "Inicio":
 cambiarMenu(-1, 'users', 'panel');
 break;
 case "Eventos":
 cambiarMenu(-1, 'eventos', 'index');
 break;
 case "Crear evento":
 cambiarMenu(-1, 'eventos', 'add');
 break;
 default:
 }
 })
 .mouseover(function(){})
 .mouseout(function(){}); 
 /*etc etc etc....*/

Please note that the semicolon only goes at the end of the chain, not after each event... Cheers!