Question

I have the following code in a page (index.php), it’s composed by just two DIVs, one on the left side (#leftDIV), which contains a form and another DIV (#messages) which will receive error messages, and another DIV (#mapAJAX) on the right side, which contains a PHP script that should send error messages to that #messages DIV.

<div id="leftDIV">
  <form method="post" onsubmit="return false;">
    ...
    Some code here
    ...
    <input type=button value="Cercar" onclick="search();"/>
    <input type=reset value="Esborrar" />
  </form>
  <div id="messages">&nbsp;</div>
</div>
<div id="mapAJAX"></div>

Once the form is submitted a Javascript function is called, it’ll create a XMLHttpRequest object to load a PHP script in the right side, the idea is to reload only the content on the right side every time the form is submitted. Inside this new script (map.php) I do a search in a database and load the results in a map inside this same right DIV.

If any problems occur, I want to show the error inside the #messages DIV I mentioned earlier, but I have no idea how to send those messages to that DIV from the map.php script. Just searching for any DOM element with the #messages id won’t work, because that script doesn’t have ready access to the left DIV.

I have read this post:

PHP/Javascript passing message to another page

But I don’t know how to trigger the showing of the messages, once a new one is generated. So what can I do?

Also feel free to suggest a new title, I’m not sure mine fully describes the problem I’m exposing.

Thank you in advance.

EDIT: As requested, here is the AJAX code found inside the index.php file. This function is called after search() has done a couple checks on the form values. It uses a file called AJAX.js to ease the creation of the XMLHttpRequest.

function loadMap(ciutat, tipusCuina){
  var div = document.getElementById("mapAJAX");
  var oXMLHttpRequest = createXMLHttpRequestObject();
  var url = "mapa.php?ciutat=" + ciutat + "&tipusCuina=" + tipusCuina;

  oXMLHttpRequest.open('GET', url);
  oXMLHttpRequest.onreadystatechange = function(){
    if(oXMLHttpRequest.readyState == 4){
      if(oXMLHttpRequest.status == 200){
        div.innerHTML = oXMLHttpRequest.responseText;
      }
      else{
        alert("Hi ha hagut un problema amb la recepcio del mapa.");
      }
    }
  }

  oXMLHttpRequest.send(null);
}

Answer 1

PHP cannot really operate on your DOM in this way. You are using Javascript to get the results of a PHP script. So the next step is to put that result into a div in your DOM. You will do this also with Javascript, not PHP. Are you working with a Javascript library like JQuery or Mootools? If so, this is a very simple task.