CODEWITHSUNDEEP
javascriptjquery
quantum62
quantum62

Reputation: 153

Call function on page load and again on button click, but with different parameters

I have an Ajax function that brings data of a web method and displays it on the page. I want to show the first page with 4 item on page load. When the button is clicked, the next four items should show, and so forth for the next clicks. This executes on page load, but when I click the button nothing happens.

 $(document).ready(function () {
        var s;
        var countnumber = 0;
        function dos(s, countnumber) {

            participant = s.split("!");
            var i
            for (i = countnumber; i < countnumber + 4; i++) {
                part = participant[i].split("ٌ");

                rk = part[5];

                if (rk == 1) {
                    $("#ts" + i).attr('src', 'con1.png'); 
                } else if (rk == 2) {
                    $("#ts" + i).attr('src', 'con2.png');
                } else if (rk == 3) {
                    $("#ts" + i).attr('src', 'con3.png');
                } else if (rk > 3 && rk < 20) {
                    $("#ts" + i).attr('src', 'briliant.ico');
                } else if (arrlist[5] > 20 && arrlist[5] < 50) {
                    $("#ts").attr('src', 'cup.png');
                } else {
                    $("#ts" + i).attr('src', 'box.png');
                }
                    { $("#st" + i) }
                    $("#use" + i).html(part[1]);
                    $("#rnk" + i).html(part[5]);
                    $("#avg" + i).html(part[2]);
                    $("#pnt" + i).html(part[4]);
                    $("#wit" + i).html(part[3]);
                    $("#kl" + i).html(part[0]);
                    $("#use" + i).html(username);
                }

        }
        $('#kil').bind('click', function () {
            countnumber = countnumber + 4;
            dos(s , countnumber);
        })

        var arrlist;
        var participant, part;
        var username, klll, wt, pt, av, rk;


        $.ajax({
            type: "POST",
            url: "rank.aspx/bringdata",
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (ret) {
                s = ret.d;
                dos(s, 0);
            },
            error: function (x, e) {
                alert("error");
            }
        });
    });

Upvotes: 0

Views: 1125

Answers (1)

phant0m
phant0m

Reputation: 16905

From what I've understood, you are trying to execute the dos() function via an onclick="" event.

The reason it doesn't work is very simple: dos() does not exist from the perspective of the global scope.

What you have to do instead is one of the following two:

  1. Move the dos() function into a globally accessible scope.
  2. Attach the dos() function to the click event via jQuery.

Personally, I would prefer the second option, because it avoids polluting the global namespace.

From local variables

Example: local variables

function f() {
    var x = 1;
}

process_x(x); # this will trigger a "ReferenceError: x is not defined"

I am sure you are aware, that it is not possible to access a variable that is local to a function from the outside.

to local functions –

When you define a function inside a function, you are essentially creating a local variable that just happens to be a function.

Example: function declaration, this is the form that you have:

$(document).ready(function() { # enclosing_function
    function dos() {

    }
});

As previously explained, this will lead to dos() being local to the enclosing_function.

... which are essentially the same thing

You can think of it like this to better illustrate the similarity:

Example: function expression 

$(document).ready(function() { # enclosing_function
    var dos = function () {

    };
});

Hoist the colo– functions high

In the example, the two versions are equivalent. However, a function declaration – that is, the thing that does not have a an assignment (those are so called "function expressions") – are "hoisted" at the top of the code, in which they are defined.

This means, that the definition is moved (or "hoisted") to the very top (or beginning) of the scope in which it was defined. It is not possible to execute code (in that scope) before defining that function. Thus, you cannot receive a ReferenceError for function declarations. (Unless you are in the wrong scope, that is.)

Function expressions on the other hand are evaluated the same way all other statements are: as soon as they are encountered by the program flow.

Example: Hoisting

$(document).ready(function() { # enclosing_function
    # <- This is where "hoisted" is being defined <--
    non_hoisted(); # ReferenceError                 |
    hoisted();     # Works fine                     |
    var non_hoisted = function () { # This is where "non_hoisted" is defined
                                                    |
    };                                              ^
                                                hoisting
    non_hoisted(); # Works fine                     ^
                                                    |
    function hoisted() { ------>-------->------->----

    }
});

One more thing

var s;
function dos(s, countnumber) {
    ...
}

The formal parameter s will introduce s as a local variable inside the dos() function. It will shadow the s variable from its parent scope.

Why do you pass s as a parameter to the dos() function? You already assign it to the local variable var s inside the enclosing_function() when the Ajax request returns successfully.

Upvotes: 1

Related Questions