How to cycle odd and even when using ajax append?


Tags: javascript,css,ruby-on-rails,ajax,append

Problem :

I have a page where newly created Choices are appended to the list with some ajax code, so the user don't have to refresh the entire page. The list contains of 2 columns, where the column on the right have to have a css class called "ending", which makes sure it's floated to the right and the padding is zero on the right side as well.

The problem is that when a new Choice is appended the partial which is rendered is exspecting multiple Choices if the cycle function should work.

Please see my code below and let me know if you have any suggestions to how the code should be altered so the partial inserts the correct css class.

PARTIAL:

<% @tickets.each do |choice| %>
    <div id="<%= choice.id %>" class="<%= cycle("ticket shadow", "ticket shadow ending") %>" data-time="<%= choice.created_at.to_i %>">
<% end %>

AJAX in VIEW

<script type="text/javascript">
    var pusher = new Pusher('<%= Pusher.key %>'); // Replace with your app key
    var channel = pusher.subscribe('choices');

    channel.bind('created', function(data) {
        var after = $('.ticket:last').attr('data-time');

        var settings = { after: after}
        $.ajax({
            url: '/Home/Index',
            type: 'POST',
            dataType: 'json',
            data: settings,
            success: function (data) {
                $("#tickets").append(data.html);
                }
          });
        }

    );
</script>

EDIT:

I tried out the below and that seems to work, but also seems a bit hacky.. anyone with a smoother solution?

if (css_end == "ticket shadow") {
  $(".ticket:last").addClass("ending");
}


Solution :

Depending on your targeted browser set, I'd suggest using CSS3 queries to target every other element.

.ticket:nth-child(2n+1) {
  float: right;
  padding-right: 0;
}

This won't work in IE8, but it'll work in just about every other major browser, and you don't have to write specific classes to the elements to get the right behavior. The nth-child selector will simply apply to every odd-numbered element.


    CSS Howto..

    How to center a div with dynamic & static content?

    How to get ratio of scale image, when it's autoscaled by background-cover?

    CSS - How to change backgound colour for item avatar in ionicframework?

    xHTML/CSS: How to make inner div get 100% width - margins

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    how to make a list float left or not according to the size of the browser?

    How to improve this code to combine/compress CSS using PHP [closed]

    How to increase spacing between lines in CSS?

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    how to align div's horizontally in CSS

    How to modify programmatically with javascript the css ::before and ::after [duplicate]

    How do you create slidedown effects like this?

    How to mark up a tiled layout with CSS?

    CSS-3 - How can I place a white space holder above two columns?

    How to capture a CSS multiline comment block with JavaScript regex

    How can we wrap the line based on border size of windows browser?

    How to get CSS around links like login button

    How to make dot-dash underline

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    How to remove IconTabFilter icons using css?

    How to check if an element matches the :empty pseudo-class in pure JS?

    How to implement CSS file style on selected div

    How can I use jQuery to add a fade in hover effect to my nav items?

    Way of Determining How Many Style Rules I have

    how to collapse width of parent element to total width of child elements

    How to prevent right-to-left text appearence while using arabic language?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

    How to exclude a CSS formatting? [duplicate]