I'm tying to hide a button when a checkbox is deselected and show the button when selected. But I don't know why isn't it working because I have two date item and they are working fine.
When checkbox not selected
When checkbox selected
http://apex.oracle.com/pls/apex/f?p=17236:555 Workspace:
MACWADU_ORACLE Username: USER Password: 123qweASD
If someone wants to help me, can go to the application page 555 or explain here what I have to do.
Tanks
Your dynamic action tries to hide the button using the DOM Selector "APPLY_CHANGES", but this isn't actually the button's ID (it didn't have an ID at all).
Two changes required (I have made them):
1) Change the Button template to allow button attributes to be added:
<button value="#LABEL#" onclick="#LINK#" class="button-gray" type="button"
#BUTTON_ATTRIBUTES#>
<span>#LABEL#</span>
</button>
2) Change the button itself and set the Button Attributes property to:
id="APPLY_CHANGES"
Related
Below is my interactive grid. It shows data from v$sql_monitor view based on sql_id from list .
What I would like to do is to create double-click dynamic action on a record. This action would open new modal dialog and pass two parameters : 1. sql_id from list above 2.sql_exec_id from clicked record. Would you give me a few hints how to do it ? I guess a piece of Javascript code will be necessary :(
There are multiple options to do this - here is one way, by using javascript custom events. I created a sample with an IG on the EMP/DEPT sample dataset with page 88 as IG and page 90 as modal. The column ENAME is a link to page 90 that sets a column value and a page item in the link.
Page 88 has an IG and 2 page items:
P88_PAGE_ITEM (a value entered on the page like the list in your screenshot)
P88_ENAME (to hold the selected report column value
Page 90 has 2 page items: P90_PAGE_ITEM and P90_REPORT_COLUMN
Create IG on page 90 on table EMP
On column ENAME, add the following under "JavaScript Initialization Code"
function(config) {
config.defaultGridColumnOptions = {
cellTemplate: '<button type="button" class="t-Button t-Button--link my-ename-js" data-ename="&ENAME.">&ENAME.</button>'
};
return config;
}
This is a button of type "display as link", created with the universal theme button builder that has 2 extra attributes: a class my-ename-js and a data attribute "ename" data-ename="&ENAME."
Create a dynamic action to capture the click and set the page item:
Make sure to set the scope to "Dynamic". This is needed because the event listener needs to be added again after a dom change (a search or filter of the IG).
add a true action of type "Set Value" to set the value of P88_ENAME to the value of the selected row
add a second true action to trigger a custom javascript event:
Create a dynamic action of type "Event: Custom" to capture the custom event triggered in the previous DA.
add a true action of type "Submit Page". Note that "Show Processing" needs to be unchecked.
Almost there. One last thing is to create a branch to the modal page:
Create a branch (process point "After Processing") with server-side condition of "Request = Value" with value OPENMODAL and link attributes below:
And this should be the result:
Well, I modified a bit your scenario.
I added new SelectList P88_FILTER
and added dynamic action ON_CHANGE :
with action
I modified source if IG:
These changes allowes me to filter IG . In our case filter returns always only one record like below.
and now my problem begins. In your scenario clicking the link "ename" updates field P88_ENAME and opens modal dialog with proper values. After my modification neither P88_ENAME updates nor modal dialog opens :(
I want to set modal dialog title dynamically based on an interactive element.
ex) In page 50, I've made an Interactive Grid and set the link on "Title" column, when user click on title column, a modal dialog appears.
I want to set the title of that modal dialog to title column's content.
But modal dialog's title doesn't change dynamically.
In this case, how can I apply the titles dynamically?
I've seen many solution related to this question, but I can't solve my problem.
Let's say, your model page number is 51. Here are step by step approach [TESTED] to dynamically change title of model page:
Create a hidden item in your model page, let's say the hidden item name is P51_Title.
In Interactive report -> title column link -> click on link builder box -> set values -> add Hidden item as P51_TITLE under Name and value as '#Title#' Column (#ColumnName#).
In model page 51 static region header (title property), add hidden item value as &P51_TITLE. (dot is mandatory to add at last. This is substitution string with & and dot(.) before and after of item name respectively)
save both the pages and run. when you will click on title column link, the link will be redirecting to the model page and title data will be passed through URL to hidden item in the session, so model page header will automatically change based on title data from report.
I made such dialogcreate js function.
It moves popup page Title to modal dialog title.
So, dynamic calculated title &P51_TITLE. would be applied automatically.
$(document).on("dialogcreate", ".ui-dialog--apex", function(e) {
var lDialog = $(this);
lDialog.find('iframe').on('load',function () {
lDialog.children(".ui-dialog-content")
.dialog("option", "title", $(this.contentDocument).find('title').html());
});
});
I am very disappointed that something like this (or any other solution) do not work in apex modal pages by default!
I am trying to solve an issue with modals. What I want to do is allow the user to click the browser's back button to dismiss a modal and return to the original state of the page, this is: without modal. For such purpose I thought about using HTML 5 history API.
I started trying to append a querystring parameter to the URL, such as http://...page.html?show_modal=[yes|no] but I ended leaving this approach because I couldn't handle all the stuff involving popstate event, pageshow event, etc. I couldn't make it work and it overwhelmed me.
Then I tried with a more simple approach involving a hash appended to the URL, such as http://...page.html#modal, and the hashchange event. This approach is working better for me and I almost have it.
When the user clicks the button to show the modal, he or she can click the browser's back button and it will dismiss the modal. Furthermore, after that, the user can click the browser's forward button and it will show the modal again. Very nice! The user can also navigate directly to the URL with the hash to access directly this state of the page, as well as he or she can bookmark such state of the page. It's working pretty neat and I'm rather happy with the results.
The problem is that it is not working totally perfect. When the user dismiss the modal by clicking the background, the ESC key or the X in the upper right corner, the history starts to mess up. Try it: open the modal by clicking on the button, then click the background to dismiss it (look a the URL in the address bar, first problem here is that the hash isn't removed), then click your browser back button and you will see it isn't working correctly. You will end with a duplicate in your history and you have to click the back button twice in order to go to the previous page. This is not desirable from an UX viewpoint. Does anyone know a solution to this?
I provide my code in this CodePen and at the end of this question. I suggest trying it in your own machine and NOT IN Codepen, so you can view the hash in the URL, etc. Also, it doesn't work in Codepen Full mode, I don't know why.
Thanks!!
I am using Foundation 5.2.1
HTML
<div class="row">
<div class="small-12 columns">
<h1>Reveal Modal</h1>
<h2>Manipulation of the browser history for a better UX</h2>
<a class="button radius" href="#" data-reveal-id="sampleModal" id="button">Show Modal...</a>
</div>
</div>
<!-- ############# -->
<!-- MODAL -->
<!-- ############# -->
<div id="sampleModal" class="reveal-modal medium" data-reveal>
<h2>Hi!</h2>
<p>You may think you are on a new page now, but you aren't. Try to click your browser <kbd>Back</kbd> button to dismiss this modal and return to the the page you were viewing.</p>
<a class="close-reveal-modal">×</a>
</div>
JavaScript
function setModalHash(url, present) {
var a = $('<a>', { href:url } )[0]; // http://tutorialzine.com/2013/07/quick-tip-parse-urls/
var newHash = "";
if (present === true) {
newHash = "#modal";
}
// Build the resulting URL
result = a.protocol + "//" + a.hostname + ":" + a.port + a.pathname + a.search + newHash;
return result;
}
$("#button").on('click', function() {
history.pushState(null, null, setModalHash(document.URL, true));
});
$(window).on("hashchange load",function(e) {
// Handling also the load event allows navigation directly to http://host/path/to/file#modal and bookmarking it
if (document.location.hash == "#modal") {
$("#sampleModal").foundation("reveal","open");
}
else {
$("#sampleModal").foundation("reveal","close");
}
});
I've been messing with the history api/History.js in combination with session storage to maintain modal state, and open/close based upon user navigation. I've finally achieved about 90% of my goal, but history is implemented very poorly in Safari and iOS Safari so remove the features for these browsers.
Some of the problems you may be running into with the hash approach is that when you use the # with pushstate it actually doesn't push a new object into the history state. It sometimes seems to push history onto the stack and you could use history.back() to fire a popstate, but if you were to say refresh the page with your hashurl and do some sort of check for hash on page initiation, there doesn't seem to be a new history pushed onto the stack, and therefore on backwards navigation the user will leave the site rather than closing the modal.
Here is my implementation working for all browsers except for where it falls back to normal behavior is Safari:
http://dtothefp.github.io/hosted_modal_history_sample/
https://github.com/dtothefp/html5history_express_modal_toggle
Like I said I use History.js in combination with sessionstorage because annoyingly enough, in the popstate for closing the modal the history object is removed, which is exactly when I would need it. In all a very poorly implemented API.
I don't change the URL because this project does not have a backend, so if I change the URL with no hash, on page refresh the page would not be found. An alternate implementation would be a query string, which will properly update history when used in the pushstate, but ends up being bad UX because if the user closes the modal not using the backwards navigation (i.e. hitting the cancel button or clicking off), removing the query string would result in a page refresh.
I have two radio buttons and on the selection of one radio button i want to show the textbox. if the user selects the radio button with the value of "other" then display the textbox, if its anything else dont display the textbox.
apply_type= (
('Online',_('Online')),
('Others',_('Others')),
)
how_to_apply = models.CharField(verbose_name=_('How to Apply'),max_length=255,null=True, choices=apply_type,default='Online')
How can this be done in django?
One way is to just use javascript client-side to show an input when a certain radio button is checked.
If you want to do it in django, you could use a form wizard and have the selections that are made on the first form affect the rest of the forms that are displayed.
I have a page with one field only. How can user submit the page by pressing 'Enter' without having to click the 'Submit' button? User should therefore be able to either press 'Enter' or click 'Submit'. Thank you.
APEX text items have a property "Submit when Enter pressed". Set this to Yes and you are almost done. The APEX request is set to the name of the item so that you can, if you need to, have submit processing that depends on this e.g. PL/SQL Condition:
:request in ('SUBMIT','P1_MY_TEXT_ITEM')
What is your APEX version ?
If you are using APEX 4, you can try this JQuery code :
$('#YOUR_TEXTFIELD_ID').keyup(function(e) {
if (e.keyCode == '13')
$('#YOUR_BUTTON').trigger('click');
});
It works only if any onclick event has been defined for the button, else simply call apex.submit(...) instead.