在Ajax Popup中显示PHP输出

Question

Hi All! So I'm a noob, and most of my code was done by a programmer for me. I can't get him to help me now.

I have a calculator that displays results (produced by calc.php) without relaoding the page. Demo is here: http://www.roofingcalculator.org/popup/popup.htm

Now I added Ajax popup (contact form) from here: http://dimsemenov.com/plugins/magnific-popup/ and it works.

What I want is to display the results of calc.php inside the Popop, but it does not work.

Details:

When user clicks "Calculate" button, the form sends info to CALC.JS using POST, which then sends info to CALC.PHP and diplays results back on the page with this tag:

<span id="CalcSum">Results:</span>

When I add the SPAN tag to popup, it does not display the result of PHP.

QUESTION How do I display results in AJAX Popup??

Please help - I really appreciate any help - Cheers!

Calc.js content:

var XmlHttp;
function GetXmlHttpObject() {
   var XmlHttp = null;
   try {
      XmlHttp = new XMLHttpRequest();
   } catch (e) {
      try {
         XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   return XmlHttp;
}
function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
   }
}
function ShowSum(url, params) {
   XmlHttp = GetXmlHttpObject();
   if (XmlHttp == null)
      return;
   XmlHttp.onreadystatechange = StateChanged; 
   XmlHttp.open('POST', url, true);
   XmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   XmlHttp.setRequestHeader("Content-length", params.length);
   XmlHttp.setRequestHeader("Connection", "close");
   XmlHttp.send(params);
}

function GetInfo() {var str = 
"size1=" + escape(encodeURI(document.getElementById("size1").value)) +
"&size2=" + escape(encodeURI(document.getElementById("size2").value));

ShowSum('http://www.website.com/calc.php', str);
}

calc.php

<?php
$size1_val    = empty($_POST['size1'])      ? '0'       : $_POST['size1'];
$size2_val    = empty($_POST['size2'])      ? '0'       : $_POST['size2'];
$total_size = $size1_val * $size2_val;
print "Result: ". round($total_size). "";
?>

HTML Form:

<table>
<script type="text/javascript" src="calc.js"></script>
<form id="formcalc" action="javascript:GetInfo();" accept-charset="UNKNOWN" 
enctype="application/x-www-form-urlencoded" method="post">
<tr>
<td height="24" ><strong>Sizes:</strong>
</td>
<td height="24" valign="top" width="50%">
<input id="size2"/> x <input id="size1" s/> ft.
</td>
</tr>
<tr>
<td COLSPAN="2">
<input name="calc" type="submit" value="Calculate" />

<span id="CalcSum">Results:</span>
</form>
</td>
</tr>
</table>

Answer 1

Add $('.popup-with-form').magnificPopup('open'); to your stateChanged function as below. Works for me on your example. Changed both results spans and opens the pop up.

function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
       $('.popup-with-form').magnificPopup('open');
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
      document.getElementById("CalcSumPopup").innerHTML = XmlHttp.responseText;
   }
}

Update: more documentation here http://dimsemenov.com/plugins/magnific-popup/documentation.html if you need it.