CODEWITHSUNDEEP
jqueryhtml
Ahsan
Ahsan

Reputation: 11

jQuery update a a number within a div

i have the following code:

function tryToDownload(url) {
    oIFrm = document.getElementById('download');
    oIFrm.src = url;
    //alert(url);
}

function downloadIt(file) {
    var text = $("#downloaded").text();
    setTimeout(function(){ $("#downloadBar").slideDown("fast") }, 700);
    setTimeout('tryToDownload("index.php?fileName='+file+'")', 400);
    setTimeout(function(){ $("#downloadBar").slideUp("fast") }, 5000);
}

And there is a DIV with id "downloaded". So the code is

<div id="downloded">230</div>

230 shows that the item is downloaded 230 times. What I want to do is that when some body clicks the download it updates 230 to 231. How can it be possible with jquery kindly help.

Upvotes: 1

Views: 3057

Answers (7)

Pat
Pat

Reputation: 36702

This is an opportunity to use new jQuery 1.4 hotness :-)

$("#downloaded").text( function (i,current) { return parseInt(current)+1;} ) ; //Works with jQuery1.4 and above

If you give a function to .text() the second parameter is the current value, so you can use it in the function as you wish.

Edit: You can aslo use return +current+1; instead of return parseInt(current)+1; so that you get 0+1=1 instead of NaN+1=NaN in case you start with an empty div.

Upvotes: 1

kun
kun

Reputation: 345

How about this script:

<html>
  <head>
    <title>My Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
          var total_download = 0;
          $("#download-it").click(function(){
            total_download = total_download + 1;
            $("#downloaded").text("Downloaded: " + total_download);
return false;
          });
        });
    </script>
  </head>
  <body>
    <form>
      <div id="downloaded">Downloaded: 0</div><br />
    <a id="download-it" href="#">click me!</a>
  </form>
  </body>
</html>

Upvotes: 0

Gerard Banasig
Gerard Banasig

Reputation: 1713

put this inside the downloadIt() function right after all the setTimeOuts are called

var curr_val = $('#downloaded').text();
var new_val = parseInt(curr_val)+1;
$('#downloaded').text(new_val);

Upvotes: 1

Anthony
Anthony

Reputation: 37045

var downloadCount = Number($("#downloaded").text);
$("downloaded").text(downloadCount + 1);

The first part gets the text in that element and re-casts it as a number, thus avoiding any issues where you might get "2301" instead of "231". The second part sets the text to the value + 1.

Wrap this into a function and call that function whenever download is clicked.

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104168

Something like this will do:

i = parseInt($("#downloaded").text());
$("#downloaded").text((i+1));

Upvotes: 0

Kobi
Kobi

Reputation: 138007

var div = $('#downloded');
div.text(parseInt(div.text(), 10) + 1);

Example (click anywhere): http://jsbin.com/edure

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

How about this:

var num = $("div#downloaded").html();
var num_new  = parseInt(num, 10) + 1; // number add here as you want
$("div#downloaded").html(num_new);

Upvotes: 0

Related Questions