JQuery reapply zebra-striping after GET request

0
votes

I have a table with a "zebra-stripe" CSS3 class:

.zebra-stripe tr:nth-child(odd) {
    background-color: #c6e1ff;
}

.zebra-stripe tr:nth-child(even) {
    background-color: #eeeeee;
}

Above the table is an entry field, whereupon a user submit will prepend a row with JQuery and POST.

This happens with:

function submit(id) {
  $.post(
    "URL",  // uses template toolkit 'c.uri_for' to actually add message in database 
    { 
      msgtype: 'some-type',
      msg: $('#some-id').val()
    }, 
    function (data) { 
      $('#table-id').prepend(data);
    }
  );
  $('#some-id').val('');
  return false;
}

This code prepends a row at the top of my table, and all the CSS is fine and dandy. However, upon removing any given row (each row has a "remove" button), using the following JQUERY with a GET:

function remove(id1,rowid) {

  // uses template toolkit 'c.uri_for' to actually remove message in database
  $.get('URL', function (data) { 
    $('#' + rowid).hide();
  });

  //attempt to reapply styles
  $('#field-note-table').removeClass("zebra-stripe");
  $('#field-note-table').addClass("zebra-stripe");

  return false;
}

does not reapply the CSS (breaks the zebra-striping). How do I get it to re-apply the CSS after having removed the row?

3
jquerycss
Where you use remove metohod? - Shaddow
@j08691 sorry, didn't clarify. I'm using template toolkit, so my "URL" is replaced with a c.uri_for call to actually add or remove the message in the database. So it's being hidden, but it is also being removed in the background. - skippr
@Shaddow Not sure I understand. Each row has a remove button, which calls the remove function when clicked. - skippr
@j08691 Ah... hide() != remove() - skippr

3 Answers

4
votes

just calling hide makes your row so it's not displayed. Assuming your zebra striping CSS applies different colors to each row based on odd/even, even hidden rows will be included in this striping.

If you don't need the row after you hide it, use remove instead; then the row won't be included in the striping any longer:

$.get('URL', function (data) { 
    $('#' + rowid).remove();
});

Otherwise, you may have to use JS to selectively stripe.

1
votes

Put this code: 

//attempt to reapply styles
$('#field-note-table').removeClass("zebra-stripe");
$('#field-note-table').addClass("zebra-stripe");

inside success method:

$.get('URL', function (data) { 
    $('#' + rowid).remove();
    //<--------- Here
  });
0
votes
function remove(id1,rowid) {

    // uses template toolkit 'c.uri_for' to actually add message in database
    $.get('URL', function (data) { 
        $('#' + rowid).hide(0, reStripZebra);
    });

    return false;
}

function reStripZebra() {
    $('#table-id td').each(function(index) {
        if(index % 2 == 0) $(this).removeClass("zebra-stripe");
        else $(this).addClass("zebra-stripe");
    });
}