How do I fix this 'funny' JavaScript/Ajax behavior?

Question

Hello all!
I have this kind of funny problem, or, well, a funny result...
The problem is almost solved tho, but it's just this strange behavior that I can't solve.
You can see what I mean here:
http://apex.oracle.com/pls/apex/f?p=9949:101:1370355978553401
Username: visitor
Password: visitor
Login first, then edit the URL to go to page 24 (or just click on "Web Platform", then in the submenu click on "Meals and templates", and then in the custom menu on the left click on "Show templates".
If you have done that, click on any of the two links in the report.
You'll see that suddenly, the whole page seems to be shown inside another region (the region named "Menu2", underneath the normal menu region).
It's like... A page within a page. Pageception (Inception... Pageception... Get it?).
Now, all this happens WITHOUT refreshing. Yes, I want this to be dynamic. My question is:
How do I change my code in such a way, that it does NOT display the whole page 24 inside that menu2 region? Because I want to display a popup, not a page within a page...
My code for doing so is in my Page Attributes. In the JavaScript tab, I have the following code for the popup, and in it you will find the code to get these values in the page items as well:
$( function(){
  $('#ModalForm').dialog(
     modal: true,
     autoOpen: false,
     width: 500,
     height: 350,
     buttons:{ Calculate: function(){calculateTotal();},
               Close: function(){closeForm();}        
function openForm(pFoodTemplateId, pMealTypeId)
var getone = new htmldb_Get('shiny',&APP_ID., null, 24); // initialize get
getone.add('P24_TEMPLATEID', pFoodTemplateId);
getone.add('P24_MEALID', pMealTypeId);
gReturn = getone.get();
getone = null;
$('#ModalForm').dialog('open');
function closeForm()
{ $('#ModalForm').dialog('close');}
$(document).ready(function()
    {$('a.temppop').click(function() {openForm();});
});"Shiny" is the name of the ID of my "menu2" region.
In case I'm not clear (which I probably am, since I'm in a rush):
I have 2 page items that get the value of the selected row's foodtemplateid and mealtypeid. The column link URL from my report is:
javascript: openForm(#FOODTEMPLATEID#, #MEALTYPEID#); So, in a nutshell, item :P24_TEMPLATEID gets the value of the foodtemplateid that corresponds to the row you selected, and item :P24_MEALID gets the value of the mealtypeid that corresponds to the row you selected.
Thank you for your time. I really appreciate it.
Apex version: 4.1.1.00.23

Answer 1

Hi,
Maybe JavaScript should be something like this
function openForm(pFoodTemplateId, pMealTypeId){
$("#P24_TEMPLATEID").text(pFoodTemplateId);
$("#P24_MEALID").text(pMealTypeId);
var getone = new htmldb_Get(null, &APP_ID., "APPLICATION_PROCESS=DUMMY", &APP_PAGE_ID.);
getone.add("P24_TEMPLATEID", pFoodTemplateId);
getone.add("P24_MEALID", pMealTypeId);
gReturn = getone.get();
getone = null;
$("#ModalForm").dialog("open");
}Or
function openForm(pFoodTemplateId, pMealTypeId){
$s("P24_TEMPLATEID", pFoodTemplateId);
$s("P24_MEALID", pMealTypeId);
var getone = new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.);
getone.add("P24_TEMPLATEID", pFoodTemplateId);
getone.add("P24_MEALID", pMealTypeId);
gReturn = getone.get();
getone = null;
$("#ModalForm").dialog("open");
}Regards,
Jari
My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
Twitter: http://www.twitter.com/jariolai
Edited by: jarola on Apr 19, 2012 3:56 PM