jQuery Load Issue and Oracle ApEx v4.1

1
votes

I wish to use a jQuery .load(oracle apex url) query. I have a main page that I have setup to hold a fixed banner with a navigation menu to show/hide a menu.

Within this main page template, I also have some jQuery code to fire when a menu item is selected, which basically loads into the “main-content” div described below any page within this Oracle ApEx application, i.e.:

$("#main-content").load(actualPageURL);

Within this main page, I also have a “Content” region that I have created, with the following HTML setup:

<div id="page-wrap">
  <div id="main-content">
  </div>
</div>

So with the above, what I am basically trying to achieve is a means of no longer using an iframe like I previously did, but make use of jQuery’s .load() function.

Now everything works fine if I’m clicking away from the main page’s menu but when one of the menu items goes to a page that has a form and the user presses the “Create” button which currently uses a default “Redirect to page 20” Action when button clicked, I am no longer within the bounds of my main master page and so lose all functionality that I would like to maintain.

So from this, I have now lost my fixed banner at the top as well as the means to access my menu.

I basically need to ensure that any redirects or any other branching between pages in my Oracle ApEx app are all filtered/processed via my <div id="main-content"> and always using the jQuery $("#main-content").load(actualPageURL) function.

Again, I somehow need to make sure that every page within my Oracle ApEx app is passed through the main-content div.

1
javascriptjqueryoracle-apexjquery-load

1 Answers

1
votes

I think you'll need to catch 2 things: the standard redirects are put out in html as 'javascript:redirect()'. This redirect function is defined in apex_4_1.js, simply override it:

function redirect(where){
   alert("im overriding the original redirect! It would've brought me to "+where);
};

The branches are more annoying. The best i can think of right now would be to use the apex event "apexbeforepagesubmit" which is fired when a page is submitted through apex buttons. You can define a dynamic action on this, it can be found under framework events, or bind an event yourself:

$(document).bind("apexbeforepagesubmit", function(event, pRequest){
   alert("before submit:"+pRequest);
});

Obviously you'll need to do some parsing here since the redirect url won't be available (and i don't think you'll be able to get it since it is a server side redirect). Some standard buttons i can think of would be the record navigation ones (previous, next). But also Apply Changes, which does an after processing branch to the same page, with the success message. Maybe you can try to change the Target Type from Page in this Application to URL? You could for example call a javascript function then. Or maybe you want a redirect to page 1?

Why this whole setup though? If you want a fixed bar and a menu, why not have a custom page template and some css magix? It seems unnecessary.

Expanding on the comments:

I've set up a very small sample -> http://apex.oracle.com/pls/apex/f?p=26186:1 The application is based on Theme 24. The new themes are a lot better in my opinion thanks to the reduced use of tables for layouting. All i did was:

  • Shared Components > Templates: I took a copy of the standard one-level-tabs page with no sidebars. I then put some divs with an ID around region positions 3 and 4, which are in the html header and in the body. Also included some javascript in the footer (you can of course put your javascript in a seperate file and include it)
  • Shared Components > CSS file: i uploaded a css file to provide some styling for my divs
  • Page 0: here i created 2 regions in positions 3 and 4, and set their condition to not display on the login page. Regions on page 0 are displayed in each page for that application by default.
  • Page 1: for the page template i of course selected my custom template. No further editing is necessary, my template takes care of all the work. So the flashy styly floating menu on the left and the top bar all come standard. It's crude and all, but all it took was some simle editing, css, and a pinch of javascript: you should be comfortable with that.

Now each page i will create will take that same look. A branch from page 1 to another page will of course do a redirect, but because the regions in page 0 show on each page they will all look the same anyway => templated. This seems to be a lot more in line with what you want, and a lot less work than the whole ajax route.

What i did to create this is simple: first i edited my template (after copying an existing one for ease) and put two region positions in a div, and gave the divs an id. I then created a page, and assigned it my new template. I created two regions for each position. Then i started mucking around, creating some more divs and elements i'd need. I added style tags in the page header and put the js there aswell. As i went along, i edited my template to include what was necessary (some divs, a class,...). Finally i moved the css to a file, and included it in the template. Same for the js. I copied the regions over to page zero and deleted them from page 1. Template done. Feel free to take a look at it, create a new page, etc. It's just a small demo, of course. Don't shoot me for style ;-)

  • Apex.oracle.com -> login
  • workspace: tompetrusbe
  • credentials: apex_demo/demo
  • application: 26186. Fixed menu and top bar