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

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!