showing error that mouse_id is undefined while implementation in javascript

Question

Hi I am getting an error while implementing the following.

When I click on the "save" button in following code:

<td width="20%"><a href='#' class="close"> <input id="save"  onClick="updateMouseInfo();" type="button" value="Save" /></a></td>

I want to call the mouse_id parameter from getMouseInfo() function to updateMouseInfo() and I am getting the error that mouse_id is undefined, so please help me with the solution.

function getMouseInfo(mouse_id) 
{ 
  var dataString = {auth_token: sessionStorage.auth_token, id: mouse_id};
  var mh_url =  MH_HOST + '/mice/get_mouse_info.json';
  alert("Inside Mouse Get Info");
  $.ajax(
  {
    type: "POST",
    url: mh_url,
    data: dataString,
    dataType: "json",
    success: function (data) 
    {

            //for (var info_count = 0, info_len = data.length; info_count < info_len; info_count++ );
            //{
                alert("Inside for loop");
                 //var mouse_info = data.cage.mice[info_count];

                 var ear_tag = document.getElementById("ear_tag");
                 var age = document.getElementById("age");
                 var genotype = document.getElementById("genotype");
                 var owner = document.getElementById("owner");
                 //var born = document.getElementById("born");
                 //var euthanize = document.getElementById("euthanize");
                 //var note = document.getElementById("note");

                 ear_tag.innerHTML = data[0].ear_tag;
                 age.innerHTML = data[0].age;
                 genotype.innerHTML = data[0].genotype_id;
                 owner.innerHTML = data[0].owner_id;
                 //born.innerHTML = data[0].dob;
                 //euthanize.innerHTML = data[0].dob;
                 //note.innerHTML = data[0].dob; 
            //} 
    },
    error: function (data) 
    {
        alert("fail");
    }    
  });   
}

//update mouse info
function updateMouseInfo(mouseid) 
{ 
  var ear_tag = $('#input_ear_tag').val();
  var age = $('#input_age').val();  
  var genotype = $('#input_genotype').val();
  var owner = $('#input_owner').val();

  var dataString = {auth_token: sessionStorage.auth_token, id: mouseid, mouse: 
  {ear_tag: ear_tag, age: age,}};
  var mh_url =  MH_HOST + '/mice/update.json';

  alert("Inside Mouse update Info");
  console.log('Data String='+ dataString.auth_token + 'Mouse id=' + dataString.id);
  $.ajax(
  {
    type: "POST",
    url: mh_url,
    data: dataString,
    dataType: "json",
    success: function (data) 
    {  
        document.getElementById('ear_tag').innerHTML = "<div" + ear_tag + "'>" + ear_tag + "</div>";
        document.getElementById('age').innerHTML = "<div" + age + "'>" + age + "</div>";
        document.getElementById('genotype').innerHTML = "<div" + genotype + "'>" + genotype + "</div>";
        document.getElementById('owner').innerHTML = "<div" + owner + "'>" + owner + "</div>";
    },
    error: function (data) 
    {
        alert("fail");
    }    
  }); 

}

I am getting the following error in the browser console.

m_id=99 
Data String=pvHxzkr3cys1gEVJRpCDMouse id=undefined 

Whereas the id should be 99 in the above case it is showing undefined.

Answer 1

You are calling the updateMouseInfo function in the following manner:

onClick="updateMouseInfo();"

if you want to have same mouseid value which is taken by getMouseInfo() function when you call updateMouseInfo(),you will have to globalize getMouseInfo()

Hope it works.