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');
});
Related
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.
I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?
The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.
trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})
Problem is that cant disable native "on click" event that triggers x-editable to transform into textarea. I want that only Button could tranfsorm text to textarea, So that on text is non-clickable.
I found questions how to trigger x-editable on other element click.
But how to disable native text click and leave only other element's event ?
Fiddle with problem is here:
This part works great:
$('.edit-post-button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$textarea = $(this).closest('.media-body').find('.editable');
$textarea.editable('toggle');
});
But when trying to disable native text click, it wont work, or I'm doing something wrong here ?
$('.editable-post-textarea').on('click', function(e) {
console.log('native-click-triggered!');
e.stopPropagation();
});
Here is sample with my problem: http://jsfiddle.net/jjdJX/64/
So how to disable native "click" event on textarea, and leave trigger only on "EDIT TEXT" button?
Disable elements' click event using:
$('.editable-post-textarea').off('click');
Fiddle: http://jsfiddle.net/jjdJX/65/
In version 1.5.1 you can set a 'toggle' option with a 'manual' value
$('.editable').editable({
toggle: 'manual'
});
Doing this has the nice side effect of removing the dashed-underline decoration in the editable field.
source official x-editable docs
I'm using Twitter Boostraps component collapse to reveal some fields which is done by clicking in another field. However, if I click the same field again the other fields get hidden again (i.e toggling).
What I want is to disable the toggling so that the fields won't hide when clicking the field a second time. Could this be done easily with some built-in methods or do I need to dive deep into the js file to change it myself?
You should be able to do something as simple as..
$('#myDiv').on('hide.bs.collapse', function (e) {
preventDefault(e);
})
This handles the Bootstrap 3 hide.bs.collapse event, and prevents the DIV from being hidden again.
Demo: http://bootply.com/75650
The solution is actually pretty simple and the one marked as correct comes pretty close, here is how you can disable the toggle mechanism:
$('#myDiv').on('hide.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
}).on('show.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
});
Cheers
Chris
I have this issue that when user clicks a button (in this case, a submit button) multiple times, jQuery will keep playing the animation effects until it has completed the count of clicks the user has imputed.
This can get quite overwhelming.
How can jQuery tell if it's currently executing an animation to a particular element, so I can prevent user from submitting while the elements effect is still in play?
Notes: the submit button is in a file. Form handling is relayed via AJAX this jQuery is inside the ajax called file.
Here is the main files code:
$('#login_form').submit(function(e) {
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});
Here is the code (in ajax'ed' file):
$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);
You could unbind the event-handler just before starting the animation, and in the callback function of the animation, just bind the handler again.
$('#button').unbind('click');
$('#animated_element').animate({ animation, stuff}, 1000, function(){
$('#button').bind('click', handlerFunc);
});
Note:
This is a way to prevent submitting when you are using a customized button (div, or a link), which has an event handler binded to it. It does not work on pure html <input type="submit" /> - buttons, because after unbinding, the standard-submit is going to take effect.
I prefer to use customized buttons, mainly because of styling (especially for IE7 and such).
If you want to use a pure html-submit button, you'll have to disable the button (and disabling submit over "enter") or set a flag, that prevents submitting, as other users have already stated in their answers!
Disable the submit button until the animation finishes.
$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });
var isAnimationRunning;
jQuery('#myForm').bind('submit',function(e){
if(isAnimationRunning)
{
e.preventDefault();
}
});
Create a variable isAnimationRunning let it know, animation running or not. If running then ignore submit.
http://jsfiddle.net/praveen_prasad/cfvRf/
On demo click start animation and then try to submit!!
Edit 1
Some ppl have suggested unbinding click of submit button, that wont work. If a submit button is inside a form, clicking it will submit the form, you dont bind click event to submit form, its just pure html, so unbinding wont help in stopping submit event. check this demo
Edit 2
Some ppl have suggested disable the submit button during the animation. That wont always work either, consider a situation where user types something in text box and press enter key, form will be submitted(some browsers will) regardless of submit button being disabled.
Just add disabling button when it clicked :) or hide... or both of this... hide and disable
Try this:
$('#login_form').submit(function(e) {
$('input[type=submit]', this).attr('disabled', 'disabled').attr('style','opacity: 0.5; filter: alpha(opacity = 50); ');
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});