CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 517

function doesnt recognize .data() value jquery

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?

Upvotes: 1

Views: 63

Answers (2)

KL_
KL_

Reputation: 1513

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>

Upvotes: 2

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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!

Upvotes: 0

Related Questions