There is a div with onclick event. I don’t know where does that event attached. I put an image inside this div with jquery and when i click on image nothing depends, but if i click in this div but not on images than event happens. How can I make image to inherit that onclick event?
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
We are using pop up editor in the Kendo Grid control to edit the record.
My kendo grid has the below extra Controls as below.
Kendo dropdownlist
Div control
Add button
Remove button
A dropdown which has list of values that user will select and press the ADD button which is next to it.
then those values will be added to div control dynamically at runtime.
click on update in the editor, My controller updation action is getting fired.
Now i want to remove the items from the div tag using the Remove button. this time my controller update method is not firing.
I suspect that the changes in div is not firing the change event as the div control items dynamically added and removed.
How can i trigger the change event in the Remove button click function in jquery once i removed the div elements.
Please help me on this, trying this since 2 weaks.
I'd like to implement a Facebook like control for auto loading of a paged content into a DIV with custom styled scrollbars. For custom scrollbars I use jScrollPane plugin, but can't figure out how to listen to an event when this scrollbar reaches its bottom to append additional html to this DIV. Any hint?
Listen for the jsp-scroll-y event and check the passed isAtBottom flag in your event handler. Details and demo here.
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.
I am trying to find a list of all the possible values I can pass to the attribute event of the f:ajax tag.
I know that I can also pass function names from my .js files, but what I need just the ones that come with JSF.
I only know about click mouseover and keyup, but I am sure there are more. Just don't know where to find them.
The event attribute of <f:ajax> can hold at least all supported DOM events of the HTML element which is been generated by the Faces component in question. An easy way to find them all out is to check all on* attribues of the Faces input component of interest in the Faces tag library documentation and then remove the "on" prefix. For example, the <h:inputText> component which renders <input type="text"> lists the following on* attributes (of which I've already removed the "on" prefix so that it ultimately becomes the DOM event type name):
blur
change
click
dblclick
focus
keydown
keypress
keyup
mousedown
mousemove
mouseout
mouseover
mouseup
select
Additionally, Faces has two more special event names for EditableValueHolder and ActionSource components, the real HTML DOM event being rendered depends on the component type:
valueChange (will render as change on text/select inputs and as click on radio/checkbox inputs)
action (will render as click on command links/buttons)
The above two are the default events for the components in question.
Some Faces component libraries have additional customized event names which are generally more specialized kinds of valueChange or action events, such as PrimeFaces <p:ajax> which supports among others tabChange, itemSelect, itemUnselect, dateSelect, page, sort, filter, close, etc depending on the parent <p:xxx> component. You can find them all in the "Ajax Behavior Events" subsection of each component's chapter in PrimeFaces User's Guide.
I just input some value that I knew was invalid and here is the output:
'whatToInput' is not a supported event for HtmlPanelGrid.
Please specify one of these supported event names: click, dblclick,
keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover,
mouseup.
So values you can pass to event are
click
dblclick
keydown
mousedown
mousemove
mouseover
mouseup