How to show a delete icon near to fullcalender event .. I tried to add html img tag but it is shown as text in event...it is not showing the image icon....
I have resolve the issue.....
eventRender: function(event, element) { element.find('span.fc-event-title').html(element.find('span.fc-event-title').text()); },
Related
I have a Fullcalendar calendar and I add on it some background events. Those background events represent slots that cannot be clicked or dragged into. Is there a way to detect this (that the user clicked on a background event)?
Background event is rendered as a DIV with the class name fc-bgevent.
My code for detecting the click background event is:
element.fullCalendar({
...
dayClick: function(date, jsEvent, view) {
if (jsEvent.target.classList.contains('fc-bgevent')) {
alert('Click Background Event Area');
}
},
...
});
I'm having trouble displaying hidden inline content within a jQuery UI tooltip widget. Here's what I have so far:
$("a.tooltip").tooltip({
content: function() {
$('table').show();
return $('table');
}
});
The table in question is set to not display by default. The above code shows the table in the tooltip, however, if I hover off the link that activates the tooltip, and return to it, an empty tooltip displays, without my inline content. I suspect I want to invoke the destroy() method when mousing off the tooltip, but not sure where to put that exactly.
you need to rebind the content
$("a.tooltip").on('mouseenter', '.sourceItem', function(){
$(this).find('.table').show();
}).on('mouseleave', '.sourceItem', function(){
$('.tooltip').hide();
});
use jQuery which uses on functionality.place this in the ready event.
I have a bootstrap page that lists items in a table. Each item has its own delete link that launches the modal.
<a href="#modalDel" data-idtodelete="<?php echo $value->id; ?>" class="deletelink">
Delete this item
</a>
...
jQuery("a.deletelink").click(function(event){
var id2del = $(this).data('idtodelete');
jQuery("#myModalLabel").html("Delete item: "+id2del); //works great
jQuery('#modalDel').modal('show');
});
I can pass data to the modal easily, but now I have to make the main button in modal to reflect the dynamic url and call to it (only) when this button is clicked
Any ideas? Thanks
PS: cannot use the hidden event for this, because modal can also be hidden with the cancel button. Also, modal should be closed after/before calling the dyn. delete url of main button
I'll hazard a guess at this. Haven't tested because I'm not really sure about the setup.
var $ = jQuery; // using as a shortcut
$('#modalDel').on('show',
function() {
// Composes delete URL with arguments
var dynUrl = composeUrl(args);
// assuming the modal button is an anchor element
$('#modalButton').attr('href', dynUrl);
// Also closes the modal box after being clicked
$('#modalButton').on('click',
function(e) {
$('#modalDel').modal('hide');
});
});
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.
I have added a button to a tab panel in the center region by calling
var add = tabSelection.addButton({
id : 'add',
text : 'Add',
hidden : true,
tooltip : 'Please highlight the correct value and click Add to create new contact',
handler : addContact
});
There are two radio buttons in the west region in an accordion layout, labeled 'internal' and 'external'. I want the tool tip to be changed dynamically by capturing the radio button click.
I am able to capture the radio button click and when I set the tooltip of the button accordingly,
add.setToolTip('Please highlight the correct value and click Add to create new internalcontact'); if internal client is clicked.
add.setToolTip('Please highlight the correct value and click Add to create new external contact'); when external is clicked.
You need to initialise tooltips for it to work:
Ext.QuickTips.init();
And use qtip instead of tooltip.
Also worked for me (on ExtJS 4.1):
Ext.getCmp('buttonId').setTooltip('Tooltip you want to insert');
Another solution without using id, for e.g. with a button tooltip:
var prev_button = new Ext.button.Button({
cls: 'prevButton',
listeners: {
mouseover: function(btn) {
btn.setTooltip('1 ' + granularity.getValue()
+ ' ' + _('before'));
}
}
});