onload javascript manipulation not working - using innerHTML

Hi,
I have a tool generated chunk of code that when rendered has a popup window size of 'width=400,height=450'. I can not change it in the tool without affecting ALL popups which is by changing the popup template that the app uses. SO, I am trying to change the innerHTML in an onLoad javascript function as below:
      <script type="text/javascript">
      function onLoadProcess(){
        var thePopUp = $x('P2_PARENT_SELECT_fieldset');
        var theTR = html_CascadeUpTill(thePopUp,'TR');
        var theTD = html_CascadeUpTill(thePopUp,'TD');

       // alert(theTD.innerHTML);
        var oldSize = 'width=400,height=450';
        var newSize = 'width=800,height=450';
        theTD.innerHTML = theTD.innerHTML.replace(oldSize,newSize);

        //alert(theTR.innerHTML); // It shows the 'width=800,height=450'
      }
      </script>
I see the change in the alert boxes but it doesn't affect the actual execution of the JavaScript.
WHY? Is there a way to get it working?
Thx Bill
<script type="text/javascript">
	function onLoadProcess(){
	  var thePopUp = $x('P2_PARENT_SELECT_fieldset');
	  var theTR = html_CascadeUpTill(thePopUp,'TR'); 
	  var theTD = html_CascadeUpTill(thePopUp,'TD'); 

	 // alert(theTD.innerHTML);
	  var oldSize = 'width=400,height=450';
	  var newSize = 'width=800,height=450';
	  theTD.innerHTML = theTD.innerHTML.replace(oldSize,newSize);

	  //alert(theTR.innerHTML); // It shows the 'width=800,height=450'
	}
	</script>

Open in new window

LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
 
LeeKowalkowskiCommented:
I'm not sure performing innerHTML changes to a <script> block will  do anything.  If you want to edit a function, you'll need to use script  to redefine it.

Redefining the open command would be your  easiest approach I think:


var realOpen = window.open;
window.open = function(uri, name, params){
  var oldWidth='width=400';
  var newWidth='width=800';
  var modifiedParams = params.replace(oldWidth, newWidth);
  realOpen(uri, name, modifiedParams);
}

--
Lee
0
 
mrichmonCommented:
Not enough code to tell for sure, but chances are that the code to evaluate the width/height of the popup are evaluated before the onLoadProcess event fires.
0
 
yogi4lifeCommented:
The way of changing your HTML via text replace is highly error prone and risky....

You should rather go for manipulating the DOM directly without text-manipulating the HTML.

Like this:

   $x('objectToChange').style.width = '800px';
   $x('objectToChange').style.height = '450px';

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
BILL CarlisleAPEX DeveloperAuthor Commented:
Is there a way to access it by the DOM to get to the popup window open statement?

I've attached the APEX generated code... it is generated from
APEX_ITEM.POPUPKEY_FROM_QUERY(
    p_idx              IN    NUMBER,
    p_value            IN    VARCHAR2 DEFAULT,
    p_lov_query        IN    VARCHAR2,
    p_width            IN    VARCHAR2 DEFAULT,
    p_max_length       IN    VARCHAR2 DEFAULT,
    p_form_index       IN    VARCHAR2 DEFAULT,
    p_escape_html      IN    VARCHAR2 DEFAULT,
    p_max_elements     IN    VARCHAR2 DEFAULT,
    p_attributes       IN    VARCHAR2 DEFAULT,
    p_ok_to_query      IN    VARCHAR2 DEFAULT,
    p_item_id          IN    VARCHAR2 DEFAULT NULL,
    p_item_label       IN    VARCHAR2 DEFAULT NULL)
    RETURN VARCHAR2;

<tr><td nowrap="nowrap" align="right"><label for="P2_PARENT_SELECT" tabindex="999">Parent Select:</label></td>
<td  colspan="12" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="4141507888422707" /><noscript>
JavaScript not supported
</noscript>
<script type="text/javascript">
<!-- 

 function filter_escape(in_value) {
                out_value = encodeURIComponent( in_value );
                return out_value;
            }
        function genList0_p_t03_5()
         {
           w = open("wwv_flow_utilities.gen_popup_list" +
                       "?p_filter="  +
                       "&p_name=" + escape('p_t03') +
                       "&p_element_index=" + escape('5') +
                       "&p_form_index=" + escape('0') +
                       "&p_max_elements=" + escape('') +
                       "&p_escape_html=" + escape('') +
                       "&p_ok_to_query=" + escape('YES') +
                       "&p_flow_id=" + escape('310') +
                       "&p_page_id=" + escape('2') +
                       "&p_session_id=" + escape('1445591012648489') +
                       "&p_eval_value=" + escape('') +
                       "&p_translation=" + escape('N') +
                       "&p_item_id=" + escape('4141507888422707') +
                       "&p_lov=" + filter_escape('4141507888422707') +
                       "&p_lov_checksum=F7B8A81A9E1D1D6DC1F104834234912E",
                       "winLovList",
                       "Scrollbars=1,resizable=1,width=400,height=450");
           if (w.opener == null)
             w.opener = self;
           w.focus();
         }
//-->
</script>
<fieldset class="lov" id="P2_PARENT_SELECT_fieldset">
<table summary="" border="0" cellpadding="0" cellspacing="0" class="lov" id="P2_PARENT_SELECT_holder">
<tr><td  class="lov"><input type="text" name="p_t03" size="4" maxlength="2000" value="" id="P2_PARENT_SELECT"  /></td>
<td><a  href="javascript:genList0_p_t03_5()"><img src="/i/list_gray.gif" width="13" height="13" alt="Popup Lov" /></a>
</td></tr></table></fieldset>

Open in new window

0
 
yogi4lifeCommented:
Do you mean to manipulate the window or objects in the new window?
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
the popup window when it opens - I want it to have a width of 800 not 400.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
    "Scrollbars=1,resizable=1,width=400,height=450");
is at the bottom of the open statement:

           w = open("wwv_flow_utilities.gen_popup_list" +
                       "?p_filter="  +
                       "&p_name=" + escape('p_t03') +
                       "&p_element_index=" + escape('5') +
                       "&p_form_index=" + escape('0') +
                       "&p_max_elements=" + escape('') +
                       "&p_escape_html=" + escape('') +
                       "&p_ok_to_query=" + escape('YES') +
                       "&p_flow_id=" + escape('310') +
                       "&p_page_id=" + escape('2') +
                       "&p_session_id=" + escape('1445591012648489') +
                       "&p_eval_value=" + escape('') +
                       "&p_translation=" + escape('N') +
                       "&p_item_id=" + escape('4141507888422707') +
                       "&p_lov=" + filter_escape('4141507888422707') +
                       "&p_lov_checksum=F7B8A81A9E1D1D6DC1F104834234912E",
                       "winLovList",
                       "Scrollbars=1,resizable=1,width=400,height=450");
 
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
No help?
When I change the innerHTML and then set it back to the window, why doesn't it size it to the new size?

Just know that both the alerts below "onload" shows the 'width=800,height=450'

theTD.innerHTML = theTD.innerHTML.replace(oldSize,newSize);
alert(theTD.innerHTML);
alert(theTR.innerHTML);

But when I click on the popup that I made the change it does not have the new size.


0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
What about jQuery? How do I change the zone?

Or could a parent have a !important flag?
that would set it in concrete?
0
 
gops1Commented:
Why you do not try with window.resizeTo(newWidth,newHeight) or window.resizeBy(width,height)
0
 
Samuel LiewCommented:
Hi bcarlis, have you tried setting with of popup in parent window? If you are not able to do it, please post the html code for the child page here so we can see if there is any conflict.
function genList0_p_t03_5()
{
	w = open("wwv_flow_utilities.gen_popup_list" +
		"?p_filter="  +
		"&p_name=" + escape('p_t03') +
		"&p_element_index=" + escape('5') +
		"&p_form_index=" + escape('0') +
		"&p_max_elements=" + escape('') +
		"&p_escape_html=" + escape('') +
		"&p_ok_to_query=" + escape('YES') +
		"&p_flow_id=" + escape('310') +
		"&p_page_id=" + escape('2') +
		"&p_session_id=" + escape('1445591012648489') +
		"&p_eval_value=" + escape('') +
		"&p_translation=" + escape('N') +
		"&p_item_id=" + escape('4141507888422707') +
		"&p_lov=" + filter_escape('4141507888422707') +
		"&p_lov_checksum=F7B8A81A9E1D1D6DC1F104834234912E",
		"winLovList",
		"Scrollbars=1,resizable=1,width=400,height=450");
	if(w) {
		w.resizeTo(800, 450);
	}
	if (w.opener == null)
		w.opener = self;
	w.focus();
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Why all these escapes of things that do not need to be escaped?

And yes you need to resize the window, it will not work to change the innerHTML
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
That code is generated from Oracle APEX 3.2 so I was trying to be able to manipulate the popup select list window's size this way.

I was told this should work but may be a timing issue...

All those escapes are generated by APEX tool.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Whoever monitors these...

I moved on and just excepted the limitation for now... this is more for someone that knows APEX 3.2.
I don't have time to continue...
please award points however you feel for the effort given..

Thank you, BC
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.