1

I have this code, where if click on .comments depending on if having prior comments...it loads the comments + a comment form, or just a form (no comments) in .LastComments

HTML

<div class="comment" data-number_comments="7" data-user="Joe">
  [Click to comment]
</div>

<div class="LastComments"></div>

JQUERY

$('.comment').on('click', function() {

  var user = $(this).data("user");
  var number_comments = $(this).data("number_comments");

  if (number_comments) {
    $(".LastComments").load(url, {
      vars
    }, /*Load_newform here*/ )

  } else {

  /*Load_newform here*/
  }

});

FUNCTION

function Load_newform() {
  form = "<form>Hi " + user + " post a comment </form>";
  $(".LastComments").append(form);
}

PROBLEM

The function gets values from the .data returned so It doesnt show the user value and others I'm working with. How do I retrieve the values to make it work correctly?

Improve this question
5
  • 1
    your function has no params? how does it know what user is? Commented Mar 16, 2018 at 13:51
  • Initially the function is within the click event...in this case It uses .data(user) value. Now I want to put this function outside of the click event and thisproblem shows up Commented Mar 16, 2018 at 13:53
  • Pass user as an argument to the Load_newform() function Commented Mar 16, 2018 at 13:53
  • function doesnt recognize .data() value jquery -> this title is wrong. The problem is with scoping. Commented Mar 16, 2018 at 13:56
  • what would it be a correct way to make it work? Commented Mar 16, 2018 at 13:57

2 Answers 2

Reset to default
2

If a variable is required in two different scopes, you can't retrieve it just by calling the variable.
In your case, as Load_newform is another function (scope), user acessibility isn't set to it.
With that in mind, you have some ways to make it possible:

Pass the variable as parameter to the second method

$('.comment').on('click', function(){ 
    var user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform(user));
    }else{
        Load_newform(user);
    }
});

function Load_newform(user) {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

Create the variables in global scope

Please, remember that global variables can overwrite window variables!

var user;

$('.comment').on('click', function(){ 
    user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

(You can automatically create one global variable without calling the var before the variable name)

$('.comment').on('click', function(){ 
    user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

(Or even using window.variable name)

$('.comment').on('click', function(){ 
    window.user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

Create the function inside the event

It's not the best approach, because if you will always create the function when you click.

$('.comment').on('click', function(){ 
    function Load_newform() {
        console.log(user);
        form = "<form>Hi "+user+" post a comment</form>";
        $(".LastComments").append(form);
    }
    var user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

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

Comments

0

Try with below code:

1) Get User Variable value by adding one line [i.e. var user = $(this).data("user");]

function Load_newform() {
  var user = $(this).data("user"); //Initialize user variable here.
  var form = "<form>Hi " + user + " post a comment </form>";
  $(".LastComments").append(form);
}

Thanks!

Improve this answer

1 Comment

$(this). ok I understood

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.