Why is my jquery data not displaying in my HTML page

Question

I am new to javascript and this has me so confused. I didn't write this code but I need it to work, of course! The problem is the information does not display in my <p> tag. Everything seems to work until I get to var hint_result . But I just don't know why the information is not displaying. Trying to love javascript but struggling :) It should display the password hint. This is an exmaple of what is sent back :

{"CONDITION":"true","MESSAGE":"top of the fruit","UUID":"1851-CCC6-A8A80A1B148637C6"}

Code :

<!--- Password Hint Window Start --->
<div class="password_hint">
  <p>Forgot your password?<br />No problem... we can fix that!</p>

<div class="hint_form">
  <p>Enter your email address</p>
    <form method="post">
      <input placeholder="Email_address" name="password_hint_email_address" type="text" tabindex="1" />
  <p class="button small passwordHint" style="width: 100%; margin: 1px 0 10px;" tabindex="2" >Submit</p>
</form>
</div>

                <!--- Error Messages --->
                <p class="hint_result"></p>
            </div>


(function() {               
$("p.button.small.passwordHint").click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: globalURL+"/myfolder/userlogin.cfc?" + url_params,
      data: { 
        method: "PasswordHint",
        email: $("input[name='password_hint_email_address']").val()
      },
      success: function(hint) {
        var hint = jQuery.parseJSON(hint);

            if (hint.CONDITION == true) {
      var hint_result = $("p.hint_result").html("Your password hint is \"" + hint.MESSAGE + "\"").addClass(" messageSuccess");
      $(hint_result).show("slow");
    } else if (hint.CONDITION == false) {
        var hint_result = $("p.hint_result").html(hint.MESSAGE).addClass(" messageError");
        $(hint_result).show("slow");
    } 
      },
      error: function(e) {
        // handle error
        //alert("Sorry there has been an error");
      }
    });
});
}());           

Thanks in advance.

Answer 1

您的代码<script>您应该尝试在代码中放入此标记。

Answer 2

It looks like the issue is with this line:

$(hint_result).show("slow");

The line before it sets hint_result to a jQuery object ( addClass returns a jQuery object):

var hint_result = $("p.hint_result").html("Your password hint is \"" + hint.MESSAGE + "\"").addClass(" messageSuccess");

So, you can simply remove the selector syntax around hint_result. Your fixed line would look like this:

hint_result.show("slow");

The selector syntax $("...") actually creates a jQuery object from a DOM element(s), but hint_result is already a jQuery object.