I've a Fullcalendar site where I use the customButtons option to add two buttons. I also use the jquery .apppend function to add a dropdown and a textfield in the header. When I click the custom button the dropdown and textfield I added disappear. I can't find the reason. Can someone help me with this problem?
This is my code for the custom button. It sets the filter option and changes the icon on the button.
customButtons: {
filterButton: {
text: '',
click: function() {
var newFilterResourcesWithEvents = ! calendar.getOption('filterResourcesWithEvents');
calendar.setOption('filterResourcesWithEvents', newFilterResourcesWithEvents);
tekst();
}
}
},
But it also removes these elements. The code for the append for the dropdown and textinput is.
$("#calendar .fc-resource-area .fc-widget-header .fc-cell-text").eq(0).append('<div class="form-inline"><div id="resourceddldiv"><select class="selectpicker" id="resourceddl" data-container="body"></select></div><input type="text" id="filter" placeholder="filter" size="15" style="margin-left:40px";></div>');
before click
after click
It looks like you are getting a postback, and it is not refreshing your JS on the page. I can't tell where you have your elements placed in your JS files. The button defaults to submit, so you need to prevent that default if you are wanting to not do a postback.
event.preventDefault();
Put this with your buttons event to stop the postback, and it won't refresh your page causing you to lose those elements.
I've solved it by appending the elements again after the function from the custom button. If I used the event.preventDefault(); the function wasn't executed at all. And because the whole table is rendered again after the function the only solution was appending it again.
Related
I am using Materialize.css for current project, and I have dropdown with some input forms inside it.
Dropdown has option to close by:
clicking outside of .dropdown-content
clicking inside of .dropdown-content
clicking on .dropdown-button
What I need is to not close when clicking inside of it, because i need to be able to fill in input forms and other actions.
Here is simple example
Quick solution would be to stopPropagation on click on content wrapper.
$('.dropdown-button + .dropdown-content').on('click', function(event) {
event.stopPropagation();
});
I would avoid using 'dropdown' for this particular use-case.
But if you want to stick to it just apply the snippet above.
You can use for example:
$('#first_name').click(function (event) {
event.stopPropagation();
//Do whatever you want
});
to avoid the event generated by the input first_name from propagating. The dropdown will not detect it so it will not be closed.
use this "closeOnClick : false" on dropdown initializing
$(".dropdown-trigger").dropdown({
closeOnClick : false
});
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
How do I open the file selection dialog of a filefield using a different button or component? I tried searching over the internet but I cant find a solution. What Im trying to do is open the file selection dialog upon click of a panel.
You'll have to trigger the click event for the filefield's "Browse..." button at the DOM level.
Simply put, the idea is to get the reference to the <input> and launch its click event.
Here's an example (also on JSFiddle - http://jsfiddle.net/fa4bwp7q/3/):
var fileField = Ext.create('Ext.form.field.File', { renderTo: 'myDiv', hidden: true });
var textField = Ext.create('Ext.form.field.Text', {
renderTo: 'myDiv',
listeners: {
change: function(btn, newValue) {
fileField.fileInputEl.dom.click();
}
}
});
This should open up the file browser when typing into the textfield, while the filefield remains hidden at all times.
This works even on ExtJS 5.
Short answer is you can't. The user needs to interact with the button directly to cause it to open.
What Ext does under the hood is it puts a file input element inside a button, that invisibly matches the dimensions of said button. So when you click on the button, it triggers the file upload. That mechanism is used to provide styling.
If you need to trigger one button's click by clicking another button...then this is what you can do:
// .....
buttons:
[
{
text: 'Open File',
id: 'open_button',
handler: function()
{
// open the dialog box and
// do what you need
}
},
{
text: 'Another button',
handler: function()
{
// here you can click the Open File button
Ext.get('open_button').el.dom.click();
}
}
]
// ....
Works like a charm. You can even check this DEMO. Inside the Upload button handler I am alerting some text. If you click on test button, it will actually click the Upload button.
Only after some time, that demo is not visible in the Sencha's try website, so you can just copy my code there in the appropriate place.
Good Luck
Look at this screenshot: http://ic.pics.livejournal.com/werdender/15522933/44207/44207_original.jpg
Blue color shows the invisible <input type="file">.
The file field is above the "Browse..." button. When you click the "Browse..." button, you're actually click the invisible file field.
Programmatically click on the file field is not possible.
But you can create a dirty hack: http://jsfiddle.net/W2ffW/
Main input thus will only contain a text value, but you can override its method extractFileInput() etc - this is another question.
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
I'm trying to slightly repurpose the functionality of the Jeditable plugin to be controlled with buttons instead of clicking on the text. I've got a stripped-down version of the section I'm working on here.
Right now I'm triggering the text click event with my Edit button, hiding my Edit button once it's clicked, then making it reappear after the submit button is clicked. Here's my jQuery for the button click:
$('.jeditable-activate').click(function() {
$(this).prev().click();
$(this).addClass('hidden');
});
And here are the parameters I'm passing to the Jeditible function:
onedit : function() {
$(this).siblings('.jeditable-activate').addClass('hidden');
},
onsubmit : function() {
$(".jeditable-activate.hidden").removeClass('hidden');
}
I'd like to disable the default functionality of clicking on the text to edit, but I can't figure out a way to do this without breaking the functionality of my Edit button.
You probably have found a way to do it since February but it might help someone else. I did the same using a custom jQuery event like that:
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue',
[...]
event : 'whateverEvent'
});
$('.jeditable-activate').click(function() {
$(this).prev().trigger('whateverEvent');
});