"funcion x" no esta definida

tutata_6 · #1 (**permalink**) 16/08/2013, 15:50

Bueno el problema que tengo es el siguiente: La función "ShowRecords()" que esta en ShowRecords.js no funciona y cuando leo la consola de chrome me dice que no esta definida pero no comprendo por que, por cierto ya revise la ruta de mi script y esta correcta y no encuentro otra razón porque no funcione.

El código de la pag. web:

Código HTML:

Ver original<!DOCTYPE html>
 
<html lang="ES-es">
<head>
    <meta charset="utf-8">
    <title>SimpleAdmin - Dashboard</title>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css">
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
    <link rel="stylesheet" href="css/style.css">
    
    <!-- Optimize for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <!-- jQuery & JS files -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/fancybox/jquery.fancybox.pack.js"></script>
    <script src="js/script.js"></script>
    <script src="js/ShowRecords.js"></script>
    <script type="text/javascript">
    ShowRecords(1,"sucursal");
    </script>
</head>
<body>
 
    <!-- TOP BAR -->
    <div id="top-bar">
        
        <div class="page-full-width cf">
 
            <ul id="nav" class="fl">
                <li class="v-sep"><a href="#" class="round button dark menu-user image-left">Logged in as <strong>admin</strong></a>
                    <ul>
                        <li><a href="#">Change Password</a></li>
                        <li><a href="#">Log out</a></li>
                    </ul> 
                </li>
            
                <li><a href="#" class="round button dark menu-email-special image-left">3 new messages</a></li>
                <li><a href="#" class="round button dark menu-logoff image-left">Log out</a></li>
                
            </ul> <!-- end nav -->
 
        </div> <!-- end full-width -->  
    
    </div> <!-- end top-bar -->
    
    
    
    <!-- HEADER -->
    <div id="header-with-tabs">
        
        <div class="page-full-width cf">
    
            <ul id="tabs" class="fl">
                <li><a href="dashboard.html" class="active-tab dashboard-tab">Dashboard</a></li>
                <li><a href="page-full-width.html">Full width page</a></li>
                <li><a href="page-other.html">Other page elements</a></li>
            </ul> <!-- end tabs -->
            
            <!-- Change this image to your own company's logo -->
            <!-- The logo will automatically be resized to 30px height. -->
            
        </div> <!-- end full-width -->  
 
    </div> <!-- end header -->
    
    
    
    <!-- MAIN CONTENT -->
    <div id="content">
        
        <div class="page-full-width cf">
 
            <div class="side-menu fl">
                
                <h3>Side Menu</h3>
                <ul>
                    <li><a href="#">Side menu link</a></li>
                    <li><a href="#">Another link</a></li>
                    <li><a href="#">A third link</a></li>
                    <li><a href="#">Fourth link</a></li>
                </ul>
                
            </div> <!-- end side-menu -->
            
            <div class="side-content fr">
            
                <div class="content-module">
                
                    <div class="content-module-heading cf">
                    
                        <h3 class="fl">Table design</h3>
                        <span class="fr expand-collapse-text">Click to collapse</span>
                        <span class="fr expand-collapse-text initial-expand">Click to expand</span>
                    
                    </div> <!-- end content-module-heading -->
                    
                    
                    <div class="content-module-main">
                    
                        
                            
                        <div id="waiting-div"><img src="images/ajax-loader.gif"></div>
                        
                    
                    </div> <!-- end content-module-main -->
                
                </div> <!-- end content-module -->
                
                 <!-- end content -->
    
    
    
    <!-- FOOTER -->
    <div id="footer">
 
        <p>&copy; Copyright 2012 <a href="#">BlueHosting, LLC</a>. All rights reserved.</p>
        <p><strong>SimpleAdmin</strong> theme by <a href="http://www.adipurdila.com">Adi Purdila</a></p>
        <input type="text" id="table" disabled>sucursal</input>
    </div> <!-- end footer -->
 
</body>
</html>

el código javascript:

Código Javascript:

Ver original$(function(){
    function ShowLoader(){
        $("#waiting-div").fadeIn(function (){
            $("#waiting-div").css("display","block");
        });
    }
 
    function HideLoader(){
        $("#waiting-div").fadeOut(function(){
            $("#waiting-div").css("display","none");
        });
    }
 
    function ShowRecords(page,table){
        $.post('private/ShowRecord.php',{page:page,table:table},function(msg){
            $(".content-module-main").html(msg);
        });
        }
    $("pagination-list a").on("click",function(){
        var actual_pag=$(".active").attr("id");
        var page=$(this).attr("id");
        var table=$("#table").val();
        if (actual_pag!=page) {
            ShowLoader();
            ShowRecords(page,table);
            HideLoader();
        }
        });
    })

David · #2 (**permalink**) 16/08/2013, 23:02

La función no está definida en el ámbito global (que es donde intentas llamarla) ya que está dentro de esa función anónima que se ejecuta cuando el DOM está listo: $(function() { ... });