hateful hateful - 7 months ago 6
Javascript Question

reference to jquery function does not work

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

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....*/

Cheers!

Comments