Javascript runtime error when execute the code

Question

I want to get two values from a form and pass it to the controller while I press a button.

The code I have so far is:

  <div id="date">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <p>@Resources.Resources.Date: <input type="text" id="datepicker"></p>
  <script name="select_date" id="select_date">

  $(function getInfo() {
      intDate = Date;
      var userName = $('#search_employee').val();
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strUserName: userName,
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
<button onclick="getInfo()" id="userButton">@Resources.Resources.ButtonFind</button>
<br>

`

When I execute the code I get this error:

0x800a1391 - JavaScript runtime error: 'getInfo' is undefined

Whats wrond in the code?

Thanks!

EDIT

 $(function () {
      intDate = Date;
      var userName = $('#search_employee').val();
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strUserName: userName,
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
    <button class="action"    type="button">@Resources.Resources.ButtonFind</button>
<br>

when I press the button nothing happens.. thanks

Just function getInfo() { (but having a .click() handler inside the function does not make sense - and you don't appear to have a button with class="action" anyway). What is it that you want to actulayy do when you click on the button with id="userButton"`? — user3559349
– user3559349, Commented Jul 14, 2016 at 7:25
I want to send the date and the user name selected to the controller, to execute a store procedurein sql server — SomeAnonymousPerson
– SomeAnonymousPerson, Commented Jul 14, 2016 at 7:25
Then I think what you mean is change $(function getInfo() { to $(function() { and change $("button.action").click(function () { to $('#userButton').click(function() { and remove onclick="getInfo()" from the button's html — user3559349
– user3559349, Commented Jul 14, 2016 at 7:28

Reynolds · Accepted Answer · 2016-07-14 07:40:04Z

1

It's a matter of scope. You have two options:

1.Move the function in the global scope outside the $(document).ready()

<script>
    function getInfo() {
       ...
    };
</script>
<button onclick="getInfo()" id="userButton">@Resources.Resources.ButtonFind</button>

2.Manage the click listener inside the $(document).ready()

$(function() {

    function getInfo() {
        ...
    };


    $('button#userButton').click(function(e){
        getInfo();
    })

  });
<button id="userButton">@Resources.Resources.ButtonFind</button>

answered Jul 14, 2016 at 7:40

Reynolds

1811 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahmoud Zakal · Accepted Answer · 2016-07-14 07:25:58Z

try to add the function without $();

like this

function getInfo() {
  intDate = Date;
  var userName = $('#search_employee').val();
  $("#datepicker").datepicker({
      //defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      minDate: "01/01/2008"
  });
  $("button.action").click(function () {
      //console.log(select_date);
      var date = $('#datepicker').val().toString();
      $.ajax('EmployeeDate', {
          data: {
              strUserName: userName,
              strDate: date
          },
          success: function (data, textStatus, jqXHR) {
              //this will happen on success of request
              $('#DataUser').html(data);
          },
          error: function () {
              console.log("error handler when ajax request fails... ");
          },

      });
  });
}

Collectives™ on Stack Overflow

Javascript runtime error when execute the code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related