I have MS Excel WebApp document embeded in my web page using JavaScript option (not an iframe).
I want to prevent users to click on the cells and selecting them this way (at least for some columns).
But when I make a jquery function which catches a click in the outer Excel div,
nothing happens because some inner div of some cell of the Excel table catches it. Problem is, that I can't change (remove click functions) the content of the embeded Excel document, because it is generated automaticaly.
So the question is: How can I prioritize the outer div click funcion and prevent to fire a click event on the inner div without changing the content of the inner div?
Thanks
Have you tried using event.stopImmediatePropagation()? I've setup a quick fiddle here.
jQuery Docs:
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
Related
I'm working with Apex Version 20.1 and my problem is the following:
I have an interactive grid with a link column which referes to a modal dialog.
After closing this dialog with a "Close Dialog" process, the grid should be refreshed. I've changed to Event Scope dynamic and static container is the static id from my interactive grid. This works fine, but just once ! When the grid is refreshed and i open and close the dialog again, nothing happens !! What's missing here? 😕
Thank you
Anja
According to the documentation there are two types of event scope: Static and Dynamic, the dynamic scope is described as following:
Dynamic - Binds the event handler to the triggering elements for the
lifetime of the current page, including any elements that are updated
by Partial Page Refresh (PPR). Specifying Dynamic causes an additional
field Static Container (jQuery Selector) to be displayed. Specifying a
Static Container can help improve the performance of the way events
are handled with a Dynamic Event Scope. This should be an element on
the page that itself does not get re-created, but contains the
triggering elements that are re-created using Partial Page Refresh
(PPR). This element reference must be defined as a jQuery selector.
For example if you have a dynamic action that does something to the
rows of an interactive report region (which is re-created by PPR),
this would need an Event Scope of Dynamic, in order for the dynamic
action to still work after the report has been refreshed. And here,
the Static Container value could be set to a jQuery selector selecting
the region's Static ID value, for example: '#my_region'.
the static ID must be an element on the page that itself does not get recreated, but contains the triggering elements that are recreated using Partial Page Refresh (PPR). Which means you cant use the static ID of the IG, but you can still use a JQuery selector of an Elements which is parent of the IG (for example body selector)
I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();
I am using the autocomplete js from here:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
It all works fine but when I click one of the suggestions
A click event fires on the body element which then shuts down the whole drop down menu.
(this is by design as in every other case where there body is genuinely clicked I want the drop down menu to disappear)
When I check the event that is firing on the body the path is showing that it is starting at the body element. I have put event stop propogation functions on all of the divs created in the drop down menue including the ones created by the autocomplete. It doesn't seem to be coming from them - it is if it the click is firing the click event of the suggestions divs but additionally of body underneath as an entirely separate click event.
How can I stop this from happening?
Many thanks.
SOLUTION:
The autocomplete javascript code from pixabay was capturing the mousedown event - and then setting the display of the suggestions to none. This meant that when the click event fired the suggestion div was no longer there causing it to fire a click on whatever was underneath the click. So I changed the mousedown event in the autocomplete code to click and this has fixed the problem.
This seems like a bug in their code? I can't see a reason why you'd ever want the click event to be fired on what happens to be underneath a suggestion?
I'm wanting to create an overlay when a popup is created, but I don't know what event is triggering the popup. Is 'listening' for a specific div to be created possible?
Just in case that wasn't clear, here's another way of asking my question:
When #popup is created, I want to insert a div with after(), but again, I don't know what triggers the #popup
In my specific situation, the html for the popup is being created (i.e. the popup isn't just being displayed with CSS)
MutationObserver
I attempted using MutationObserver but that didn't work. In my situation, when the input for the date is clicked (see fiddle), the popup is created. With MutationObserver, I tried to fire an alert that went off when that popup was created. But it fires as soon as the page loads.
Fiddle
you can use Mutation observer to detect the event when div is created
The app I'm developing has a number of main pages which I'm implementing using jQueryUI tabs with heightStyle:"fill" so they all extend to the full height of the container on the web page. One of these pages contains two more tabs elements, again created with heightStyle:"fill". I want them to appear side-by-side so I've wrapped each one in a <div> with height:100% width:50% position:absolute top:0, then one has left:0 and the other has right:0 to make them stick to the right edges of the container. JSfiddle is here.
The problem I'm seeing is that if tab "1" is selected when the page loads, and I then click on tab "2", the two inner tabs element display with the wrong height.
I only get the problem if "1" is the default tab. If I make it "2" by changing the active option in the tabs() call to 1 then the elements are visible when the page loads and their height is set correctly.
The problem goes away if you run the "refresh" method on the inner tabs because this causes them to recalculate their height, so one way of solving this is to run "refresh" from a "tabsactivate" event handler on the outer-tabs element. The problem is that this event handler is triggered for ALL tabs, not just the one we're interested in. So how do I use callbacks to handle this efficiently.
Another way of fixing it is to change the CSS, as I suspect the problem is being caused by wrapping the inner tabs in a div with "position:absolute".
Suggestions gratefully received!!
Cracked it! First bind a custom my-activate event handler to the panel that contains the inner 'tabs' elements, and from there send them a refresh event. Second, add an activate event handler to the outer 'tabs' element and from there pass the my-activate event to the activated child panel. http://jsfiddle.net/kmbro/a92rg8cy/. The neat thing with this approach is that you can bind a different handler to each child panel.
Another possibility is that you can send a custom my-deactivate event to the panel that's being deselected (using ui.oldPanel) so it can switch off any background update processing that it had put in place when it was activated.
Take care because the activate event isn't sent to the 'tabs' element when it first appears on the screen - you only get it when the selected panel changes. If you need to do something first time, handle the create event instead - http://api.jqueryui.com/tabs/#event-create. Enjoy!