I have a button which by default is disabled. After I select an item from jQuery UI Autocomplete, I want to enable the button.
I'm testing if this works by using an alert on the button:
jQuery('#btn').live('click', function() { alert('test'); });
First I tried this solution:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This enables the button, but then I was reminded that this will not work, because .live only works on click events. So I changed the code to this:
jQuery('.ui-menu-item a').live('click', function() {
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This almost works. The disable attribute is blanked out, but the alert will still not trigger when I click the button.
So what am I missing here?
What version of jQuery are you using? The following:
This enables the button, but then I
was reminded that this will not work,
because .live only works on click
events.
Is not true for >= 1.44 (and may be true for versions even before that. Edit: I'm almost positive this will work with >= 1.3, when live was added.).
You can do exactly what you were trying to do with the autocompleteselect event:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
If you're using jQuery >= 1.6, however, you'll want to use prop:
jQuery("#btn").removeClass("inactive").prop("disabled", false);
Here it is working with jQuery 1.6:
http://jsfiddle.net/wGH32/
Related
I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.
So far i have been able to get the selected node in tinymce by using the onnodechange event
setup: function(ed) {
ed.on('NodeChange', function(e){
console.log(e.element);
});
}
but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?
I have found a workaround by adding the following inside setup callback
//prevent user to edit content inside tinymce
ed.on('PostRender', function(e){
ed.getBody().setAttribute('contenteditable', false);
});
ed.on('KeyPress', function(e){
e.preventDefault();
e.stopPropagation();
});
It's not perfect, but at least, it does the trick ;)
I had a similar problem, but we needed to intercept the click event, not "NodeChange".
I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.
bodyEl.addEventListener('click', function(e) {
console.log('Hello ', e.target);
}, false)
If you need to detect selection change, you could use the 'select' event.
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I have been making a Phonegap / Cordova 2.0 app with backbone.js which has all been fine until I tried to build in a form. The form is displayed but the click events do not trigger the keyboard.
I played around with different events and found that adding ontouchstart="this.focus()" brought up the keyboard fine. I added a catchall in the view function to bring focus:
window.PageView = Backbone.View.extend({
initialize: function() {
this.template = _.template(tpl.get('page'));
},
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
$('input', $(this.el)).bind('touchstart',function(event) {
$(this).focus();
});
return this;
}
});
But even with this if I change bind('touchstart'... to 'click' it doesn't get triggered.
I have found a couple of other posts like: click event doesn't fire in an underscore template
which suggests it is to do with the underscore.js templating process but nothing is very clear.
I guess I could make a timer function on touchstart to simulate this but it's kindof mysterious so I want to know what's going on really.
Thanks.
Try this:
this.$(':input').bind(...)
It turns out it was iScroll causing the problem.
onBeforeScrollStart: function (e) { e.preventDefault(); },
Specifically. I just commented out the e.preventDefault(); and it worked a treat!
I have a dropdown menu which contains a input and several buttons. The dropdown should hide when I click one of the buttons or somewhere else, but don't hide when keypress on the input. I use the following code, it doesn't work. Though it works when I use
$('.dropdown input').click(function(e){
})
instead of live.
But I do need live, so is there any solution for this?
/* dropdown menu */
$('.dropdown input').live('click', function(e) {
e.stopPropagation();
});
$(document).click(function(e){
if(e.isPropagationStopped()) return; //important, check for it!
});
e.stopPropagation() will do no good for you in .live(), because the handler is bound to the document, so by the time the handler is invoked, the event has already bubbled.
You should stopPropagation from a more local ancestor of the element being clicked.
Since you were using .live(), I assume there are some dynamic elements being created. If so, the proper element to bind to will depend on the rest of your code.
Side note, but you never "need" .live(). There are other ways to handle dynamically created elements.
did you try:
$('.dropdown').on('click', 'input', function(e) {
e.stopPropagation();
});
OR
$('.dropdown').delegate('input', 'click', function(e) {
e.stopPropagation();
});
NOTE: e.stopPropagation(); is not effective for live event
According to you question I have a dropdown menu which contains a input and several buttons. The dropdown should hide... means that dropdown is already exists within you DOM. If it already exists then you don't need live event.
what version of jQuery are you using? > 1.7 then:
$(document).on({"click":function(e){
//do your work, only input clicks will fire this
}},".dropdown input",null);
notes:
properly paying attention to event.target should help out with overlapping 'click' definitions using .on();
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>