Hi I have this current JS for fullCalendar (v 1.6.4):
eventRender: function(event, element, view) {
element.find('.fc-event-inner').attr("id", "event-" + event.id_event);
},
eventClick: function(calEvent, jsEvent, view) {
alert("Event clicked: "+calEvent);
}
This works ok if I click on an event.
I than have this button:
$('#ext-click').click(function(){
$('#event-120.fc-event-inner').trigger('click');
})
(Note: #event-120 is a correct id for the event)
Now, when clicking on #ext-event button nothing happens, BUT, if I click on the event-120 I get the alert, I close the alert and I press #ext-event this time the alert appears.
So #ext-event works only if I first click on event-120, otherwise nothing happens.
Expectancy:
When clicking on #ext-event I should get the event-120 alert every time.
Try this fiddle: https://jsfiddle.net/hs0q6r3v/1/
You will see by clicking the "Click-me" button as first thing, nothing happens. Click then on the event, you'll get an alert, close it and click on the "Click-me" button again, this time it works.
I'd recommend to rethink this user experience approach by triggering a click by button. What's the reason for that? If you want to do a select then use the fullcalendar select method, etc.
Why it's probably not working:
A fullcalendar event is different from a with the id of a fullcalendar id. That might be the reason why the order of clicking is important cause there is a listener generated for this div showing this event. But you can't rely on that the internal Id of an event will always be reflected in the DOM.
e.g. In the latest fullcalendar release the fullcalendar event_id is not used for the id of the related
Approaches for dealing with page change:
I use both approaches in my applications
New Page
calendarview has optional parameter
pass "selected_id" to the new page
when leaving "new_page" pass back "selected_id"
when calendarview receives a "selected_id" deal with it in the "eventRender" method (e.g. special styling for highlighting, ...)
Modal Dialog
if convenient you can also use a modal dialog, so the calendarview will stay the same.
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
I'm trying to disable Fullcalendar's default functionality when you click on a day (in agendaWeek view). If I leave dayClick: out entirely, it still pops up a dialog asking for an event name, and whether you enter one or hit Cancel, it still adds an event. I'd rather it did nothing at all. Thanks!
I had a similar question. You have to change the test to the view you want. Something like this.
if($('#calendar').fullCalendar('getView').type != 'agendaWeek') {
}
The jQueryUI datepicker can be setup with a Today and Done button. See http://jqueryui.com/datepicker/#buttonbar.
How can I trigger some event (i.e. alert('close');) whenever the Done button is clicked, and then continue with the buttons default functionality (i.e. closing the calender).
Note that I do not wish to use the onClose() method as this is triggered when the calender is closed through any means (i.e. clicking off the calender), and not necessarily when the Done button is clicked.
PS. I don't think it is relevant, but I am using the datepicker in connection with http://trentrichardson.com/examples/timepicker/
You can create a separate handler by using event delegation.
$(document).on('click', 'button.ui-datepicker-close', function(){
alert('close')
});
I bound the event handler to the Done button as it's not entirely clear what behavior you want although I think this is what you are asking
DEMO
Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.