CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
Jngai1297
Jngai1297

Reputation: 2495

Jquery ajax post return data , Uncaught ReferenceError: data is not defined

I have a script that grabs the input text field from a div container called the protectivepanel. I am doing an ajax post call for this text field to be checked in the backend. If a person enters the correct password then we unhide another div container panel. 

<script type="text/javascript">

$("#protectivepanel").submit(function(event) {

  $.ajax({
        type: "POST",
        url: "/users/trial_signup_validation",
        data: $("#protectivepanel").serialize(),
        success: function(data){
          console.log('data request succeeded'); 
          return data
        } 
    }); 
  event.preventDefault()
});


$(document).ready(function(){
    $("#the_submit_button").click(function(event){ 
      event.preventDefault();
      console.log('event.preventDefault');
        if (data.success){
          console.log('data'); 
          $("#protectivepanel").hide() 
          $("#salespanel > div").removeClass("hide")
        }
        else {
          $("#protectivepanel").show()
        }   
    });
  });
</script>

here is the method that is checking with

  def trial_signup_validation
    @password = params['password']
    if @password == 'sales'
      render :json => { "success" => "true" }
    else 
      render :json => { "success" => "false" }
    end
  end

Now I want the it to returned the json data and if its a success then we unhide the panel in the script.

my chrome console has this when I enter 'sales' in my text box and hit submit

Uncaught ReferenceError: data is not defined

Here is my form if its needed

<div class="container" id="protectivepanel">
  <form role="form">
    <div class="form-group">
      <label for="representativepassword">Representative's Password</label>
      <input type="text" class="form-control" id="representativepassword" placeholder=" Enter Password">
      <button type="submit" class="btn btn-default" id="the_submit_button">Submit</button>
    </div>
  </form>
</div>

I don't understand if I am doing the callback correctly. My server log isn't showing the ajax post call. How do I know that I am getting the correct returned data ?

Upvotes: 0

Views: 4542

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

The e.preventDefault in #the_submit_button's click event prevents the submission of the form which actually makes the ajax call. Since the submit event is bound outside of document.ready, it is possible that nothing is bound either.

Finally, you cannot return from the ajax callback. Anything that relies on the result of the callback has to be done within the scope of the callback. Fix these three things:

  1. Do not preventDefault for the submit button click event
  2. Make sure that #protectivepanel exists when you bind to it.
  3. Move the hide/removeClass functionality into your success callback function. You may also want to provide an error callback.

Upvotes: 1

Related Questions