Asked  7 Months ago    Answers:  5   Viewed   41 times

How can I fire an event if a CSS class is added or changed using jQuery? Does changing of a CSS class fire the jQuery change() event?

 Answers

45

Whenever you change a class in your script, you could use a trigger to raise your own event.

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

but otherwise, no, there's no baked-in way to fire an event when a class changes. change() only fires after focus leaves an input whose input has been altered.

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});
.box { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

More info on jQuery Triggers

Tuesday, June 1, 2021
 
millenomi
answered 7 Months ago
82

The property names you're giving to your events are incorrect.

Study the event object documentation more closely. You have given your events start_event and end_event properties, but fullCalendar expects the date fields to be start and end. You can't just invent the property names and expect fullCalendar to guess what you called them; they must match the names given in the documentation so that it knows where to look.

The error message is because fullCalendar/momentJS cannot find a defined start property to check whether it has a time component or not.

I expect that changing your PHP to

$data[] = array(
  'title' => $row['title'],
  'start' => $row['start_event']->format("Y-m-d H:i:s"),
  'end' => $row['end_event']->format("Y-m-d H:i:s")
);

should fix your issue.


P.S. As a separate point, you mentioned that when you call to the /Home/load URL to get the events, the URL ends up as http://localhost/calendar_sql/index.php/Home/load?start=2019-06-30&end=2019-08-11&_=1564490059946 with start=2019-06-30&end=2019-08-11 added to it. This is expected. As per the events as a JSON feed documentation fullCalendar will automatically append these parameters to the URL whenever it contacts your server to fetch event data. The idea is that your server should read these GET values and use them to filter the list of events returned to only those which occur within those dates. This will make the AJAX call more efficient, so that you don't return lots of events for other dates which the user is not viewing.


P.P.S.

echo json.parse($data);

I assume this is a typo in your code above? Unless you wrote or imported some custom code, then there is no such function as json.parse in PHP (and parsing would make no sense here, you would be encoding (i.e. creating) JSON, not parsing (i.e. reading) it. I would expect this line should read

echo json_encode($data);

Is that your real code?

Saturday, May 29, 2021
 
NewPHP
answered 7 Months ago
91

As I tried out and read through the link given by @konrad, I found that its a bug in Jquery UI - even in the latest version of it. The problem got solved as soon as I started using Jquery UI 1.9.2 version

here is the updated fiddle: http://jsfiddle.net/deveshz/YvmFf/2/

with same code:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});

It uses Jquery version 1.9.2 from http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

Wednesday, August 25, 2021
 
StampyCode
answered 3 Months ago
42

You need to make the arguments into one string literal. The value parameter of the css(property name, value) function is one argument.

 $(this).css('box-shadow', '10px 10px 5px #888');
Monday, November 1, 2021
 
donito
answered 1 Month ago
77

The issue is that you're specifying overflow properties on your sortable #items, which seems to be preventing ui from doing it's on thing.

#items {
 /* remove these
  overflow-x: hidden;
  overflow-y: auto; */
  position: relative;
  padding: 20px;
}

Updated Fiddle

Friday, November 26, 2021
 
jezrael
answered 5 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share