CODEWITHSUNDEEP
javascriptjquery
Johnson
Johnson

Reputation: 818

JS: Counter decrease, at hide()

If I have a normal

 <?php echo "Today (".mysql_num_rows($query)."); ?>

That turns out as Today (10) if there's 10 rows.

Now under this counter I have an while() that outputs all the rows inside a <tr>.

In a <td> inside the tr i have this delete button, which hides closest 'tr'.

How can I when you hide the 'tr' the Today(10) will decrease to Today(9) ?

--

I dont think its possible with the current counter (mysql_num_rows), but maybe if you count how many 'tr' there is, in the Today(), you could make something that decreases, but I do not know how to do this. Although this is just an thought..

Upvotes: 0

Views: 522

Answers (5)

David Clarke
David Clarke

Reputation: 13266

Output your counter to a JavaScript var and use it in your loop and Today() function call. I'm assuming you're trying to output a client side function call from the server?

 <?php echo "var count=".mysql_num_rows($query).";Today(count);" ?>

In your delete handler decrement count and call Today(count) again.

Upvotes: 0

nonopolarity
nonopolarity

Reputation: 151146

try it at: http://jsfiddle.net/xMZgv/7/

Today(<span id="counter">3</span>)

<table>
    <tr><td>hello</td><td>delete</td></tr>
    <tr><td>world</td><td>delete</td></tr>
    <tr><td>hi</td><td>delete</td></tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
<script>

    $(function() {
        $('table tr').find('td:last').click(function() {
            $(this).parent().remove();
            $('#counter').html($('#counter').html() - 1)
        })
    })

</script>

Upvotes: 0

Harmen
Harmen

Reputation: 22436

Wrap the number so you can select is easily:

<?php echo 'Today (<span id="number">'.mysql_num_rows($query).'</span>)'; ?>

Then when a delete button is clicked:

// Get the number element once
var num = $('#number');

// Set an onclick event on your button
$('.delete').click(function(){

    // Find the closest table row and remove it
    $(this).closest( 'tr' ).remove();

    // num.text() will get the text inside the number element
    // parseInt is used to convert it from string to int
    // subtract 1 to update the number
    var newNumber = parseInt( num.text(), 10 ) - 1;

    // And set the new number text
    num.text( newNumber );

    // Stop the default browser action - might cause the page to reload or to scroll
    return false;
});

Upvotes: 0

Matt
Matt

Reputation: 75327

Alter your PHP accordingly:

<?php echo 'Today (<span class="counter">' . mysql_num_rows($query) . '</span>)'; ?>

And have something like this for your delete button:

$('#theTable').delegate('button.delete', 'click', function (event) {
    $(this).closest('tr').slideUp();

    $('span.counter').text(function (index, val) {
        return (parseInt(val, 10) - 1);
    });

    event.preventDefault();
});

Note the use of delegate: It's much more efficient than it would be to bind an event handler to each delete button.

You'll have to alter the selector for your table and your delete button accordingly.

Upvotes: 2

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

you can do something like this : 

$('.deleteButton').click(function() {
   var curn = parseInt($('.counter').text(), 10);
   if(curn - 1 >= 0)
      $('.counter').text(curn - 1); 
});

and change your echo to 

 <?php echo "Today (<span class='counter'>".mysql_num_rows($query)."</span>)"; ?>

Upvotes: 1

Related Questions