Oracle APEX Refresh Interactive Grid after Close Dialog - javascript

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)

Related

Pushing dynamic content using GTM element visibility trigger and data layer

Google Tag Manager's Element Visibility Trigger appears to be a rather excellent way of tracking whether an element has appeared within the viewport, using a class or ID.
The standard reporting appears to pull back data something like this
However what I would like to do is to be able to use the trigger to detect and report items in a dynamically created list. For instance the element would be triggered based on its class which is shared by all the other elements in the list, each element may be populated with specific data to be pulled from a database eg: name, product ID, price etc.
Currently this has been done using the Custom Event Trigger, but this reports all elements on the page whether they are loaded or not.
What I would like to know is whether the element visibility trigger is the right thing for this and if so, how can I manipulate it to do what I need?
Probably yes.
You'd use the CSS Selector and select via the class name for your dynamically created items.
In the "When to fire this trigger" option you would select "Every time an element appears".
Finally you would set the "listen to DOM changes" option. This checks every time the DOM is manipulated (e.g. by inserting your list element) if the other criteria in the trigger are now matched.
Note that GTM warn that there may be a performance penalty for using that option (since this runs on every DOM manipulation). So you probably don't want to do this a lot.

How to bind two html elements together that when first one is removed second one also removed from DOM

The problem statement is the following:
I have single page app with complex html layout.
There is an anchor tag (div with user email) inside this layout.
When ones click on that anchor, app displays popover.
Popover is rendered into 'body'. I can not render it inside or near anchor due to anchor container will cut popover, since popover size is more than the container.
So the question is what is the best way to remove/hide popover when anchor element is removed from DOM (It is not removed directly but via removal of one of its parent).
I see two options - one is setInterval for the shown popover to check if anchor is still exists.
Another will be to register/unregister some callback when popover is shown/hidden, and call them to ensure existence of anchor tag, when the dom is changing inside single page app logic implementation.
I just thought may be there is another way to achieve this binding between anchor and popover located in different DOM tree branches?
I'd suggest linking the popover to the anchor by giving the popover a unique name (perhaps using a javascript index var that you increase every time you create a popover) and storing it in the rel attribute of the anchor. Make sure the anchor has a specific class (e.g. 'has-popover')
When the parent element of the anchor is to be removed, check for children that have the 'has-popover' class. Use the rel attribute of the anchor to get the element ID of the popover so that you then remove that too.

Inserting removing elements from the DOM

I have a code that inserts a div with content whenever the user clicks a button. What is the angularjs way to insert or remove elements from the DOM?
If the elements you want to add is somehow related to or near the button, use a directive. Normally all DOM manipulation is performed by a directive.
However, there seems to be an exception to this rule: if you want to insert something like a modal dialog box -- i.e., something that doesn't have to be placed somewhere specific -- you might want to use a service. Listen to a few minutes of Misko regarding this.
If you do want a dialog, see http://angular-ui.github.io/bootstrap/#/dialog and here is an SO answer that uses it in a plunker.
You should always use a directive to manipulate DOM, especially if the data is from control

jquery: How can I prevent click event in the inner div

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.

How to make $.get() data available to js?

I am using $.get() to load new content into a div. The content includes a list, each row having a title and a hidden description.
I have a separate jquery call that is meant to toggle the hidden div for each row when clicking on the title, which works fine when the data already exists (default content loaded with the page), but when it's dynamically replaced with a $.get() call, the divs then seem to become invisible to the command..
Any ideas? Do I need to somehow get javascript to refresh it's version of the DOM?
TY
Try this instead. This will bind elements that are inserted after the page loads:
$(".show_link").live('click', function (e) {});
The way you are binding the command it only happens when the page loads, so it will only bind those elements that match the selector at the time the page loads. Since you are inserting the markup after the page loads, jquery does not know those elements exist and therefore not wired to your function. Like I said above, try using .live() instead.
The DOM should update automatically. Are you sure the content you're loading has the appropriate Ids?
Try manually browsing to the URL used in the AJAX call and compare what you get with what's originally in the page. It's also possible you're retrieving spurious tags (html, body, etc) which may interfere with your JQuery selector

Categories

Resources