CODEWITHSUNDEEP
javascriptjquery
user2794041
user2794041

Reputation:

how to increment funcion value in javascript?

I make a function in javascript and I want when the user clicks on the next button it changes the div from previous values and contain new values here is my code:

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
        <a href="javascript:void(0)">
            </a>
    </div>
    <div id="next" style="float:left; width:20px;">
            <a href="javascript:void(0)" onClick="getBusinesses(2)">></a>
    </div>
</div>

and here is my javascript function:

function getBusinesses(page) {
    $.ajax({
        type: "POST",
        url: "getbusiness.php",
        data: "page=" + page,
        success: function (msg) {
            $("#new2").ajaxComplete(function (event, request, settings) {
                $("#new2").html(msg);
            });
        }
    });
}

I want when user click on id=next then increment the value and change

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(1)">
            <</a>
    </div>
    <div id="next" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(3)">></a>
    </div>
</div>

and so on

Upvotes: 2

Views: 256

Answers (4)

Olavxxx
Olavxxx

Reputation: 196

HTML

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div class="navContainer">
        <a class="nav" id="navP" data-go="minus">&lt;</a>
        <a class="nav" id="navN" data-go="plus">&gt;</a>
    </div>
</div>

CSS

.navContainer {
}
a.nav {
    cursor:pointer;
    border: 1px solid whitesmoke;
    padding: .2em;
    margin: .2em;
    float: left; 

}

JS

$( document ).ready(function() { // Handler for .ready() called.
var intPage = 0; // variable for initial page number

// trigger for next/prev

$( "a[class=nav]" ).click(function( e ) {

    switch($( this ).attr("data-go"))
    {
    case "minus": 
           if (intPage >=1) intPage--;
            getBusinesses(intPage);       
      break;
    default:
            intPage++;
            getBusinesses(intPage);
    }
    console.log(intPage);
});

function getBusinesses(page) {
    $.ajax({
        type: "POST",
        url: "getbusiness.php",
        data: "page=" + page,
        success: function (msg) {
            $("#new2").ajaxComplete(function (event, request, settings) {
                $("#new2").html(msg);
            });
        }
    });
}

});

Fiddle: http://jsfiddle.net/Olavxxx/n96M2/

Upvotes: 0

Floris
Floris

Reputation: 46365

You need to keep track of the page number you are on "somewhere". Hard coding it inside the call to the function is the worst place - plus it is almost impossible to change, unless you serve up new code on every call (not impossible but probably not what you had in mind).

I would create a "property" of the getBusinesses function (this is a trick to make a "static variable" in javascript). This property, let's call it currentBusiness, will start out at some default value. Now you call your function with either an up or down parameter (-1 or +1 probably would work best); you increment / decrement the property, and call the function. It can now return the correct result:

getBusinesses.page = 1;  // do this once, when the page first loads

Change your function to:

function  getBusinesses(updown){                  
   getBusinesses.page += updown;
   if (getBusinesses.page < 0) {
      // do what you need to do if values are out of range
   }
   $.ajax
   ({
      type: "POST",
      url: "getbusiness.php",
      data: "page="+getBusinesses.page,
      success: function(msg)
      {
         $("#new2").ajaxComplete(function(event, request, settings)
         {
            $("#new2").html(msg);
         });
       }
    });

And your buttons now call getBusinesses(-1); and getBusiness(1); respectively. This keeps your code clean, readable, and maintainable.

Upvotes: 0

pdjota
pdjota

Reputation: 3243

You should may use a global counter as suggested but only after the ajax is completed. Perhaps it is better to store the number in the link itself.

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
<div id="previous" style="float:left; width:20px;">
    <a href="javascript:void(0)" data-id="2">
        <</a>
</div>
<div id="next" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(2)" data-id="0">></a>
</div>


        function  getBusinesses() {            
            var currentLink = $(this);
            var currentBusiness = currentLink.attr('data-id');
            $.ajax
            ({
                type: "POST",
                url: "getbusiness.php",
                data: "page="+currentBusiness,
                success: function(msg)
                {
                    $("#new2").ajaxComplete(function(event, request, settings)
                    {
                        $("#new2").html(msg);
                        $("#next").attr('data-id', currentBusiness + 1);
                        $("#previous").attr('data-id', currentBusiness -1);
                    });
                }
            });
        }

Hope the idea is clear

Upvotes: 0

Luis Masuelli
Luis Masuelli

Reputation: 12333

use a global variable and pass it.

<script>var pageNumber = 0;</script>

and then for the next

... onclick="getBusinesses(++pageNumber);" //or: pageNumber++; getBusinesses(pageNumber);

and then for the prev

... onclick="getBusinesses(--pageNumber);" //or: pageNumber--; getBusinesses(pageNumber);

this is because you must generate, otherwise, the code for onclick again each time, which would be something like, actually, this i made (but a worse and less secure approach).

Upvotes: 1

Related Questions