1

Flag allows flag toggle link to use ajax, but that does not update the row class in real time. Only the field class is changed. Question is how to make the row to have a class when the flag link is clicked. In my case, its a simple common case scenario of task list and the flag toggle is used to make a task 'completed', which should make the whole row another color in real time, not after page refresh.

I got as far as this script, which doesnt yet seem to work. It adds the class .highlight_row to the row in which a flag link is clicked. The flag link has a class .unflagged before clicking.

$(document).ready(function(){ 
    $('.flag').click(function() {
       if ($(this).is("unflagged")) { //If unflagged
        $(this).closest('tr').addClass("highlight_row"); 
    } else {
        $(this).closest('tr').removeClass("highlight_row");
    }
    });                  
});

EDIT The following code worked eventually:

(function($) {
   $(document).ready(function(){    
        $(".rules-link-set_completed").children("a").click(function() {     
            $(this).closest('tr').addClass("completed"); 
        });                  
   });
})(jQuery);
Improve this question
2
  • Ajax is more about returning live content, if all you want to do is style the row, use JQuery.
    – Darvanen
    Feb 16, 2015 at 3:38
  • Yes you are right, and using jquery would be fine. Not sure how to go about that, though
    – Yuri
    Feb 16, 2015 at 3:51

2 Answers 2

Reset to default
3

Add a javascript file to your theme, or if you're using a theme that has a template, use that. Omega 4 has a brilliant template file with explanations on how it works and a short example. There is also a very good tutorial on using javascript and JQuery with Drupal on Drupal.org.

Basically I would set a click event on the flag checkbox and then use the .closest() method to find the row which the checkbox is inside and add or subtract classes accordingly.

Improve this answer
7
  • Thanks, I have found some code that works for checkboxes, but I have no idea how to apply this for flag links. $(document).ready(function () { $('.record_table tr').click(function (event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).trigger('click'); } }); $("input[type='checkbox']").change(function (e) { if ($(this).is(":checked")) { $(this).closest('tr').addClass("highlight_row"); } else { $(this).closest('tr').removeClass("highlight_row"); } }); });
    – Yuri
    Feb 16, 2015 at 4:54
  • 1
    Read up on how JQuery works. The $(SOMETHING) that you see so often is called a selector, so $(':checkbox') selects checkboxes. I don't know what you're trying to attach the click function to, so I don't know which selector you need. You might find this tutorial helpful.
    – Darvanen
    Feb 16, 2015 at 4:57
  • I'm o.k. with using checkboxes as flag toggle, but did not find a working snippet that converts flag links into checkboxes for the latest D7 version
    – Yuri
    Feb 16, 2015 at 4:57
  • Checkboxes was just an example, use the proper selector to locate whatever you want to attach the click function to.
    – Darvanen
    Feb 16, 2015 at 4:57
  • 1
    Yes, and you will need to figure out how to tell whether it is 'on' or 'off' as checked probably won't work.
    – Darvanen
    Feb 16, 2015 at 5:01
1 
(function($) {
   $(document).ready(function(){    
        $(".rules-link-set_completed").children("a").click(function() {     
            $(this).closest('tr').addClass("completed"); 
        });                  
   });
})(jQuery);
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.