Getting Reference error with Ajax call inside a function

I have the following code (remove lot of code for brevity purpose) in my index.html.

When I remove the Ajax call from the getConcepts function, I don’t get any error and all the console logs statements shows up in the console.

Howver, when I try to call the getConcepts function with Ajax call, I keep getting

ReferenceError: getConcepts is not defined index.html:1:1 Why?

<script type="text/javascript">
   function getConcepts() {
       
               
   
               console.log("Title of Research Project inside index.html");
               var project_title = $("#projectTitleId").val();
               console.log(project_title);
   
               console.log("Description of Research Project inside index.html");
               var project_description = $("#descriptionId").val();
               console.log(project_description);
   
               var intendedUse = sessionStorage.getItem("selectedIntendedUse");
               console.log("Intended Use inside index.html");
               console.log(intendedUse);
   
               $.ajax({
                       type: "Post",
                       url: "http://localhost:8080/Datagetter/datagetter",
                       data:{
                          p_in_user_id: 'JACK',
                          p_in_user_application:'MyAPP',
                          personnel_id='12345'
                       },
                       async: true,
                       cache: false,
                       success: function(data) {
                           
                           console.log("Inside success of datagetter endpoint");
                           console.log(data);
   
   
                       };
                   }​);​
   
   
   
   
   
              
           }
           else {
               
           }
       }
    }
   
   
</script>
</head>
<body>
   <div id="wrapper">
      <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
   </div>
   <!-- /#wrapper -->
   </script>
</body>
</html>

Edit - Adding actual code

   <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" >
     <link rel="stylesheet" href="js/style.css"/>
     <link href="js/jquery.growl.css" rel="stylesheet" type="text/css" />
     <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    
     <script type="text/javascript">
       
        function getConcepts() {
            alert ("yo");
                       /*$.ajax({
                           type: "Post",
                           url: "http://localhost:8080/Datagetter/datagetter",
                           data:{
                              p_in_user_id: 'JACK',
                              p_in_user_application:'MyAPP',
                              personnel_id='12345'
                           },
                           async: true,
                           cache: false,
                           success: function(data) {
    
                               console.log("Inside success of datagetter endpoint");
                               console.log(data);
    
    
                           };
                       }​);​*/
         }  
          
    </script>
    </head>
    <body>
    <div id="wrapper">
        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                  <a class="navbar-brand" >
                   <img src="images/test.png" width = "210px" height = "50px"   >
                  </a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" ></a>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">               
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        <div id="page-wrapper">
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="row" id="main" >
                    <div class="col-sm-12 col-md-12 well " style="padding:0px;"   id="content">
                        <h3>Data Getterr!</h3>
                    </div>
                    <!-- BEGIN Bootstrap form testing-->
                   <form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-4">
                                <!--<div class="form-group">
                                    <label class="control-label">Select your desk sets:</label>
                                    <select id = "deskSetlist" name="deskSets" class="form-control" >
                                        <option value=" " >Please select desk set</option>
                                        <option value=" " >test1</option>
                                         <option value=" " >test2</option>
                                        
                                    </select>
                                </div>-->
                                <div class="form-group">
                                    <label class="control-label">Description of research project:</label>
                                    <textarea class="form-control"  id = "descriptionId"name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
                                  </div>
                            </div>
                            <div class="col-md-offset-1 col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Title of your research project:</label>
                                    <input id = "projectTitleId" name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
                                  </div>
                                  <div class="form-group">
                                    <label class="control-label">Intended use:</label>
                                    <select id="intendedUseList" name="intendedUse" class="form-control" >
                                        <option value=" " >Please select one</option>
                                        <option>First</option>
                                        <option>Second</option>
                                        <option>Third</option>
                                        
                                    </select>
                                </div>
                             <!--<div class="form-group">
                                    <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
                                  </div>-->
                            </div>
                        </div>
                        <div class="row" id="smartSearchDisp" style= "margin-top: 25px;">
                            <p>A div for smart search!</p>
                        </div>
                        <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
                        <!--<button class="btn btn-success" id="conceptsButton" >Request Data</button>-->
                        </form>
                    <!-- END form testing-->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->
    </div><!-- /#wrapper -->
    <!-- <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script type="text/javascript" src="js/bundle.js"></script>
    <script type="text/javascript" src="js/downloader.js"></script>
    <script type="text/javascript" src="js/jquery.growl.js"></script>
    <script type="text/javascript">
                //Initialize function when document 'is ready'
             $(document).ready(function() {
            //BEGIN FORM Validations
                $('#validateForm').bootstrapValidator({
              feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
    
                deskSets: {
                    validators: {
                        notEmpty: {
                            message: 'Please select a desk set'
                        }
                    }
                },
                titleOfResearchProject: {
                    validators: {
                        stringLength: {
                            min: 5,
                            message: 'Please Enter the title with minimum 5 letters length'
                        },
                        notEmpty: {
                            message: 'Please Enter title of your project'
                        }
                    }
                },
    
                descriptionOfResearchProject: {
                    validators: {
                        stringLength: {
                            min: 15,
                            max: 100,
                            message: 'Please enter at least 15 characters and no more than 100'
                        },
                        notEmpty: {
                            message: 'Please Enter Description'
                        }
                    }
                },
                intendedUse: {
                    validators: {
                        notEmpty: {
                            message: 'Please select one option'
                        }
                    }
                },
            }
        });
    
                //END FORM Validations
        });
                //END FORM Validations
            </script>
    </body>
    </html>

It shows the alert button when I click on Request button and as soon as I include the Ajax call related code, I keep getting ReferenceError: getConcepts is not defined index.html:1:1

Hi @Jack_Tauson_Sr, there are several syntax errors in your code which prevent it from getting executed at all; you should actually see those in the console, or you can use a linter:

1 Like

Hi @m3g4p0p,

Thanks .Could you take a look at my actual code please(I edited the post)? I removed everything from the function for testing except an alert and ajax call and tested and it still throws same error. The function isn’t erroneous anymore.

There’s also a syntax error in that very $.ajax() call where you’re using the assignment operator inside the data object definition… check the ESLint link above, it will give you the exact line.