Problem in popup page with document.getElementById

JavaScript
1

Hi!

Good day!

I have php file called: fab_spv_reports.php with a textbox : section_name and in that section name I have javascript function that display a table of process name/compound type with designated output and reject textboxes and it came from get_fab_spv_process_reject_list.php. On that textboxes when I click it has a pop up will displayed.

When running the table page by itself (get_fab_spv_process_reject_list.php), the popup works fine, but when the table is loaded into into the main page (fab_spv_reports.php) as an object, the popup doesn’t work.

here is my code:
fab_spv_reports.php


<?php
 error_reporting(0);
 session_start();
 date_default_timezone_set("Asia/Singapore");
  
  include('connection.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Supervisor's Shift Report </title>
<link rel="stylesheet" type="text/css" href="op_report.css" />
<link rel="stylesheet" type="text/css" href="calendar.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
//----auto complete section name---//

$().ready(function() {
    $("#section_name").autocomplete("get_section_list.php", {
       width: 205,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });
    
    $("#section_name").result(function(event, data, formatted) {
        $("#section_id").val(data[1]);
    });  
     
});
//------AJAX-----//
function AJAX(){
        var xmlHttp;
        try{
            xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
            return xmlHttp;
            }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
                return xmlHttp;
                }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    return xmlHttp;
                    }
                catch (e){
                    alert("Your browser does not support AJAX!");
                    return false;
                    }
                }
            }
        }

//-----get reject---//
function getmat()
        {
           //  if (window.event.keyCode==13 || window.event.keyCode==10) {
            divid = "op_output_fieldset";
            var url = "get_fab_spv_process_reject_list.php";
            var str = "id=" + document.getElementById("section_name").value;
            var xmlHttp = AJAX();
            xmlHttp.onreadystatechange =  function(){
            if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
               // document.getElementById(divid).innerHTML=loadingmessage;
                }
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var jsonart = xmlHttp.responseText;
                    document.getElementById(divid).innerHTML = jsonart;
                    
                    }
                }
            }
            xmlHttp.open("POST", url, true);
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.setRequestHeader("Content-length", str.length);
            xmlHttp.setRequestHeader("Connection", "close");
            xmlHttp.send(str);
          
       // }
        }
        
</script>
</head>
<body onload=document.getElementById("section_name").focus();>
<form name="operator_report" action="<?php echo $PHP_SELF; ?>" method="post" autocomplete="off">
<div id="operators_report">
<fieldset>
<legend><h1>Supervisor's Shift Report</h1></legend>
<table>
<tr>
<td>Section:</td>
<td><input type="text" name="section_name" id="section_name" value="<?php echo $section_name; ?>" size="30" onkeydown="jumpnext('supervisor');getmat();"></td>
<td>Supervisor:</td>
<td><input type="text" name="supervisor" id="supervisor" value="<?php echo $supervisor; ?>" size="30" onkeydown="jumpnext('process_date');"></td>
</tr>
</table>

</fieldset>
</div>
<input type="hidden" name="section_id" id="section_id" value="" />
<div id="op_output_fieldset">
</div>
</form>
</body>
</html>

get_fab_spv_process_reject_list.php


<?php
ob_start();	 
session_start();
include "connection.php";

//$section_name = 'Compounding';
$section_name = $_POST["id"];
//if($_POST["id"])
if(isset($section_name))
{  
    
   //Build display data BEFORE output
    $display = "";
    
//-----end of displaying reject name---// 

 //  $display .= "<form action=\\"\\" method=\\"post\\">"; 
   $display .= "<div id='spv_fieldset'>"; 
   $display .=  "<fieldset>";
   $display .= "<legend style='font-size:36px;'> Supervisor's Output and Reject</legend>";
   $display .= "<table>";
   
   $display .= "<tr>";
   $display .= "<th>Process</th>";

    //query to select reject acronym  
    $sql = "select p.process_name, p.process_id FROM process_list AS p JOIN section_list AS s ON (p.section_id = s.section_id)
    where s.section_name LIKE '%" .$section_name. "%'";
    $rsd = mysql_query($sql);
    while($rs = mysql_fetch_assoc($rsd)) {
        $process_name[] = $rs['process_name'];
        $process_id[] = $rs['process_id'];
    }
    
    if(!isset($process_name) || isset($process_name) && empty($process_name)){
        $display .= "";
    }else{   
        //display reject acronym as header               
        foreach ($process_name as $k => $process_name_v){
		$process_id_vv = $process_id[$k];   
            $display .= "<th style='border:none;' colspan='2'>
			<input type='hidden' name='process_id[]' value='$process_id_vv' style='border:none;background-color: transparent;text-align:center; font-weight: bold;' size='15' />
			<input type='text' name='process_name[]' value='$process_name_v' style='border:none;background-color: transparent;text-align:center;color: #fff; font-weight: bold;' size='15' />
			</th>";
        }
        
                //display reject acronym as header               
        foreach ($process_id as $process_id_vv){   
           // $display .= "<input type='hidden' name='process_id[]' value='$process_id_vv' style='border:none;background-color: transparent;text-align:center; font-weight: bold;' size='15' />";
        }
        
        
        $display .= "</tr>";  
    } 


   $display .= "<tr>";
   $display .= "<th>Compound</th>";
   foreach($process_id AS $process_ii) {
   $display .= "<th>Output</th>";
   $display .= "<th>Reject</th>";
   }
    //query select compound_type
    $sql_comp = "SELECT compound_id, compound_type FROM compound_list ORDER BY compound_type ASC";
    $res = mysql_query($sql_comp);

    if(mysql_num_rows($res)){
        
        while($comp = mysql_fetch_assoc($res)){    
        
        $compound_type = $comp['compound_type'];
        $compound_id   = $comp['compound_id'];   
            
        $display .= "<tr>";

            //---display compound_type
            $display .= "<td style='border:none;'>
            <input type='text' name='compound_type[]' value='$compound_type' style='border:none;' size='10' />
            <input type='hidden' name='compound_id[]' value='$compound_id' />
            </td>";
            //---input box for output
            
            //----i used foreach to loop textbox in every reject acronym.
            foreach($process_id AS $process_i) {
              //----in this textboxes display the popup window using onkeyup to input the total then after click the submit button from popup the total will be displayed on the textbox.  
              $output_value = (isset($_SESSION['output']) && array_key_exists($process_i,$_SESSION['output']) && array_key_exists($compound_id,$_SESSION['output'][$process_i]) ? "{$_SESSION['output'][$process_i][$compound_id]}" :'');
			  $display .= "<td style='border:none;'>
			  <input type='hidden' name='output.$process_i.$compound_id' value='output.$process_i.$compound_id' id=\\"output.$process_i.$compound_id\\" />
			  <input type='text' name='output[$compound_id][$process_i][]' value='$output_value' size='7' id=\\"o.$process_i.$compound_id\\"  onclick=\\"var val = document.getElementById('output.$process_i.$compound_id').value; child_open(val);return false\\" />
             
			  </td>"; 
              $reject_value = (isset($_SESSION['reject']) && array_key_exists($process_i,$_SESSION['reject']) && array_key_exists($compound_id,$_SESSION['reject'][$process_i]) ? "{$_SESSION['reject'][$process_i][$compound_id]}" :'');
              $display .= "<td style='border:none;'>
			  <input type='hidden' name='reject.$process_i.$compound_id' value='reject.$process_i.$compound_id' id=\\"reject.$process_i.$compound_id\\" />
			  <input type='text' name='reject[$compound_id][$process_i][]' value='$reject_value' size='7' id=\\"r.$process_i.$compound_id\\"  onclick=\\"var val = document.getElementById('reject.$process_i.$compound_id').value; child_open(val);return false\\" />
			  </td>";
          
            }
            
            $display .= "</tr>";
        }
    }
}
 $display .= "</table>
</fieldset>
</div>"; 
 //$display .= "<input type='submit' name=\\"save_values\\" value=\\"Save\\" />
 //</form>"; 
?>

<head>
<title> Supervisor's Output and Reject</title>
<script type="text/javascript">

    var popupWindow=null;

    function child_open(val){
        popupWindow =window.open('popup.php' + "?val=" + val,"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
    }

    function parent_disable() {
        if(popupWindow && !popupWindow.closed)
            popupWindow.focus();
    }
</script>
</head>
<body>
<?php
    if(isset($display)){
        echo "$display";
    }	
?>
</body>

popup.php



<?php
if(isset($_GET['val'])){
	$parts = explode(".",$_GET['val']); 
	$type = $parts[0]; 
	$process_id = $parts[1]; 
	$compound_id = $parts[2];	
}
?>


<html>
<title>Supervisor's Report</title>
<head>
<script type="text/javascript">
function compute() {
    var n1 = document.getElementById("n1").value;
    var n2 = document.getElementById("n2").value;
    var total = document.getElementById("total").value = n1 + n2 ;
}
  
  
function compute_(oText){
    if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, total = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value

if (!isNaN(val)) //number?
{
total += val; //accumulate
}
}                                                                                 
oForm.total.value = total.toFixed(2); //out
}  

function jumpnext(nextcontrol)
    {
   if(window.event.keyCode==13 || window.event.keyCode==10)
        document.getElementById(nextcontrol).focus();
    }  
</script>
</head>
<body onLoad="document.getElementById('n1').focus();"> 


<form action="popup_processing.php" method="post">
<input type="hidden" name="type" value="<?php echo $type;?>" />
<input type="hidden" name="process_id" value="<?php echo $process_id;?>" />
<input type="hidden" name="compound_id" value="<?php echo $compound_id;?>" />
<div>
<table>
<tr>
<td><input type="text" name="n1" id="n1" value="" onkeyup="compute_(this, n2);jumpnext('n2');" ></td>
<td><input type="text" name="n2" id="n2" value="" onkeyup="compute_(this, n1);;"></td>
</tr>
<tr>
<tr>
<td colspan="2"><input type="text" name="total" id="total" value="" size="45"></td>
</tr>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit" >
</div>
</form>
</body>
</html>

On testing.run the fab_spv_reports.php try to type Com on section then there is a auto suggest displayed, choose Compounding useing arrow down key then press enter key.

Try to click in any textboxes on supervisors output and reject you will get an object expected error.

But when you run directly using get_fav_spv_process_reject_list the popup will display after click on any textboxes.

I attached the sample screenshot and database
I hope somebody can help me on this.

Thank you so much.

2

I probably has to do with calling getElementById() within an ob_start() block or within another page that was called by getElementById() or something like that. I’m not to versed in Ajax/Javascript. Hope someone can shed some light on calling the popup with getElementById() on a page that was called by getElementById().

3

I already resolve my problem in getting an error : Object expected by removing the html tags in get_fab_spv_process_reject_list.php and moving the javascript code for popup to mainpage which is fab_spv_reports.php. Now my problem is: when i click the submit button the popup page was closed and also the main page was refreshed fab_spv_reports.php.

As per testing:

I tried to comment this on popup_processing.php

<script type=“text/javascript”>
// window.onunload = refreshParent;
// function refreshParent() {
// window.opener.location.reload();
// }
</script>

when I run again the main page was not refresh and the popup page was close which is right, but the total data was not displayed on the mainpage.

On my second testing on popup_processing.php

I echo $_SESSION[$type][$process_id][$compound_id] = $total;

and the total output was displayed on the popup page.

I need to display the total on the main page.

Thank you

4

So you were just echoing the variable $total so that in itself doesn’t say much. But in testing the session array is being saved.
When using the refresh parent script, in normal single page setup, this would work.
<script type=“text/javascript”>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
The problem is when reloading parent page the get_fab_spv_process_reject_list.php , which was loaded by ajax is lost. You need some way to just refresh this part of the page. Maybe the <div> holding it. Any experts know a way?

5

I tried it:


<script type="text/javascript">
    //window.onunload = refreshParent;
    //function refreshParent() {
      // window.opener.location.reload();
    //}
    window.opener.reloadDiv();
</script>

still did not display the total in textbox :frowning:

thank you

6

As a noob in php and AJAX I’m thinking in an other direction.
If it’s possible to replace the popup-window (a new html-page) by a javascript-driven css popup in the same (main) page, everything stays in the main page at a refresh/reload. Then a document.getElementById can be applied to everything on the page. Maybe the problem is simpler in this way.

7

How does it possible Sir?

Thank you for your help…

8

Hi newphpcoder,
I’ve tried to make a simplified example of the problem, just in html without a database.

  • Test 1: [U]ajax_testing-A.htm[/U]
    This should be analogical to your first post: “When running the table page by itself (get_fab_spv_process_reject_list.php), the popup works fine, but when the table is loaded into into the main page (fab_spv_reports.php) as an object, the popup doesn’t work.”

  • Test 2: [U]ajax_testing-B.htm[/U]
    This should be analogical to your post #3: “Moving the javascript code for popup to mainpage which is fab_spv_reports.php. Now my problem is: when i click the submit button the popup page was closed and also the main page was refreshed fab_spv_reports.php.”

  • Test 3: [U]ajax_testing-C.htm[/U]
    This is what I meant by a “css popup”: the popup is not a new window, but is a part of the main page (as overlay). Now everything is playing in the main page, and I think a page refresh with disappearing values is not needed: closing the popup doesn’t do anything with the main page, and changes in the main page are already made before the closing of the pop.
    If an invalid change is made, the popup can point to that (when repeated) as well.

This is just the idea: in real life the popup can be a part of the submit-button: only when the popup conditions are fulfilled, the submitting will take place.
Maybe I have over-simplified the case, and another ajax-request is needed in order to get the inside scripting/variables of the popup from the database; I cannot oversee that.

  • Or maybe another way could be to put the variables temporary in one or more cookies (with javascript), that can be called at a refresh (in php), if a refresh is inevitable.

But if it doesn’t go this way, I’m afraid I have to admit it is to complicated for me. :rolleyes:

9

Re: Test1
I found having duplicate DB connection and <html> and having popup JS on the list page was keeping popup from working.

Even IF getting all parts working, popup, popup_processing saving info to session, still doesn’t solve loading values on the list table.

I made a sample that removes Ajax from the equation so get_fab_spv_process_reject_list.php is instead INCLUDED when the section name is set via POST and saved to session. This allows the popup_processing page to fresh the list table on each close and at least on my test sample looks like it would do the job.

SO my answer doesn’t solve the object issue, it just works by not using an object in the first place.

10