Chouette
I'd like to mouseoverize the div but not the img
$('div').mouseover(go_truc);
How can I do that ?
Handle the mouseenter event, but do nothing if ($(e.target).is('img')).
Then, handle the <img> element's mouseenter event, and undo the effect.
With
function do_trucs() {
...
}
function do_machins() {
...
return (false);
}
$('div').mouseover(do_trucs);
$('div img').mouseover(do_machins);
It's working, but is it the simplest/best solution ?
(Anyway I need to handle the img.mouseover for other purpose)
Related
I want to disable the rowediting plugin depends on a combo selection, I have the grid reference. How can I disable it? (I try to destroy it, but then when I close the window, i get a "Uncaught TypeError: Cannot call method 'getView' of undefined ".
Return false from the RowEditing beforeedit event.
listeners: {
beforeedit: function(editor, context){
if(comboBox.getValue() === /* whatever conditions you have */){
return false;
}
}
}
You can also set context.cancel = true to achieve the same effect, but I don't really see the point in it since returning false from a beforexyz event is a standard idiom in the Ext JS 4 library.
In my GWT project I would like to:
Set a filter for the FileUpload widget so that it only accepts JPG files.
Enable myButton if the FileUpload widget, called chooser, has any file choosen. And disable myButton otherwise.
This is my code for point 2, but it does not work. Any ideas? Thanks in advance!
chooser.addAttachHandler(new Handler() {
public void onAttachOrDetach(AttachEvent event) {
if(chooser.isAttached()==false && myButton.isEnabled()==true)
myButton.setEnabled(false);
else if(chooser.isAttached()==true && myButton.isEnabled()==false)
myButton.setEnabled(true);
} });
I included a line like the one below:
fileUpload.getElement().setAttribute("accept", "image/png, image/gif,image/jpeg");
It did work for me using gwt FileUpload
#Point 1: i think, is not possible to filter, which files can be choosed. The only one way for me is compare in the form handler, for example:
form.addFormHandler(new FormHandler(){
public void onSubmit(FormSubmitEvent event){
if(!extension.equals("pdf")) {
// Error
} else {
// Submit
}
}
}
Another solution is to use ExtGWT with FileValidator:
fileUpload = new FileUploadField();
fileUpload.setWidth("240");
fileUpload.setValidator(new FileValidator());
fileUpload.setName("file");
fileUpload.setAccept("pdf");
#Point 2: the chooser.isAttached() is wrong condition imho....you need to check, if the input field is empty.
I use jquery click event for a div and the div area has an input element. Because the input element is in the div, when I click input, the click function works, but I don't want this action.
I looked at the selector page in Jquery's website, but I couldn't find this selector. How can I do this?
Use the nodeName property of the originating element to see where the event originated:
$('#myDiv').click(function(event) {
if (event.target.nodeName.toLowerCase() === 'input') {
return; // ignore the event if it originated on an input element
}
// do the rest of your code
});
If you want a more complex query (e.g. using jQuery pseudoselectors), you can use is:
$('#myDiv').click(function(event) {
if ($(event.target).is('input[name="foo"]')) {
return; // ignore the event if it originated on an input element with the name foo
}
// do the rest of your code
});
I have some troubles with jQuery.
I have a set of Divs with .square classes. Only one of them is supposed to have an .active class. This .active class may be activated/de-activated onClick.
Here is my code :
jQuery().ready(function() {
$(".square").not(".active").click(function() {
//initialize
$('.square').removeClass('active');
//activation
$(this).addClass('active');
// some action here...
});
$('.square.active').click(function() {
$(this).removeClass('active');
});
});
My problem is that the first function si called, even if I click on an active .square, as if the selector was not working. In fact, this seems to be due to the addClass('active') line...
Would you have an idea how to fix this ?
Thanks
Just to give something different from the other answers. Lonesomeday is correct in saying the function is bound to whatever they are at the start. This doesn't change.
The following code uses the live method of jQuery to keep on top of things. Live will always handle whatever the selector is referencing so it continually updates if you change your class. You can also dynamically add new divs with the square class and they will automatically have the handler too.
$(".square:not(.active)").live('click', function() {
$('.square').removeClass('active');
$(this).addClass('active');
});
$('.square.active').live('click', function() {
$(this).removeClass('active');
});
Example working: http://jsfiddle.net/jonathon/mxY3Y/
Note: I'm not saying this is how I would do it (depends exactly on your requirement) but it is just another way to look at things.
This is because the function is bound to elements that don't have the active class when you create them. You should bind to all .square elements and take differing actions depending on whether the element has the class active:
$(document).ready(function(){
$('.square').click(function(){
var clicked = $(this);
if (clicked.hasClass('active')) {
clicked.removeClass('active');
} else {
$('.square').removeClass('active');
clicked.addClass('active');
}
});
});
I have a page pregenerated for me using html, it looks like a scrollable list of divs, something like:
<html>
<div id="a">
<div>Item A</div>
</div>
<div id="b">
<div>Item B</div>
</div>
</html>
I'd like to grab them in my entry point method, and add a click handler to each. I can't figure out how to do that. I have something like:
public void onModuleLoaded() {
RootPanel rp1 = RootPanel.get("a");
rp1.addClickHandler(...); // can't do this.
}
how can I listen for a click on one of those items in GWT? Is there a way I can just install a global click handler and just watch for the ID of clicked items and filter on that? I don't necessarily need to add a click handler for each element (and I think the docs recommend against this if you have many elements which require click handlers),
Thanks
Thanks
I haven't tested this, but the general idea is right, and easy enough to extend for more than one target element. You might like to store the elements returned by DOM.getElementById() beforehand to keep things fast. Bear in mind that onPreviewNativeEvent() will be called for every user event, so keep it light.
Event.addNativePreviewHandler(new NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (Event.as(event).getTypeInt() == Event.ONCLICK &&
DOM.isOrHasChild(DOM.getElementById("A"), Element.as(event.getEventTarget()))) {
// Element 'A' was clicked.
}
}
}
The problem using wrap() is that if the parent element is already a widget, the wrapping is not allowed. You can still do it and will work, but if you run the application in development mode the assertion will fail, stopping the application.
The right (but tedious and in my opinion incomplete) way is something like
Element elem = DOM.getElementById(“billing-component”);
DOM.sinkEvents(elem, Event.ONCLICK | Event.ONMOUSEOUT | Event.ONMOUSEOVER);
DOM.setEventListener(elem, new EventListener() {
#Override
public void onBrowserEvent(Event event) {
if (Event.ONCLICK == event.getTypeInt()) {
…
}
}
});
I know doesn't look nice, and actually it isn't because you can only attach a single listener to the element and have to check for the event type.