php/js/ajax issue: displaying many photos at once

Question

Im trying to make a gallery application with some ajax. It has to work this way: when typing a title of an image you want to upload, what appears is a dynamic gallery with photos of title containing the string you're currently typing in the text input. Everything is fine except for displaying of the images. This is the code:

js file:

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
   var xmlHttp;

   if(window.ActiveXObject){ //IE
      try{
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
            xmlHttp =false;
            }
      }else{  //other browser
         try{
            xmlHttp= new XMLHttpRequest();
            }catch(e){
               xmlHttp =false;
               }
         }
      if(!xmlHttp)
            alert("cos nie tak!");
      else
            return xmlHttp;
   }

function process(){   
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
      typedText=encodeURIComponent(document.getElementById("title").value );
      xmlHttp.open("GET", "ajax.php?text="+typedText, true);
      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send(null);
      }else{
         setTimeout('process()', 1000);
         }
   }


function handleServerResponse(){
   if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
               xmlResponse=xmlHttp.responseXML;
               xmlDocumentElement=xmlResponse.documentElement;
               message=xmlDocumentElement.firstChild.data;
               document.getElementById('underInput').innerHTML=message;
               setTimeout('process()', 1000);
         }else{
            alert('wrong');
            }
      }
   }

I have managed to make variable message to have a list of URLs of the images needed. It looks like that: image1.jpg image2.jpg image3.jpg ...etc. What im struggling with is to use javascript to parse this string and to use javascript to display those images in div id="underInput" node in my index.php file.

Thanks for help!

Is the issue simply splitting the `message` string, followed by creating various `` tags and/or setting the `src` attribute of existing image tags? For the first (splitting the `message` string), try the javascript `split()` function (http://www.w3schools.com/jsref/jsref_split.asp). For the second (setting the `src` attribute), the following link might help: http://stackoverflow.com/a/1232804/368896 . If you are trying to *remove* old `` tags and *create* new ones (and are having difficulty with that), rather than simply *modifying* the `src` attribute of existing tags, let me know. — Dan Nissenbaum, Jan 04 '14 at 18:40

joseluisq · Accepted Answer · 2014-01-04T20:14:19.447

2

You can try to split your string image names by whitespace something like this: In your handleServerResponse function:

//"image1.jpg image2.jpg image3.jpg";
message = xmlDocumentElement.firstChild.data;
var image_list = message.split(' ');

for (var i in image_list) {
    var img = document.createElement("img");
    img.src = image_list[i];
   document.getElementById('underInput').appendChild(img);
}

But, I recommend you to use a JSON data from server instead simple string, it's very easy and don't need to split it, otherwise you can manage arrays and objects, this is most effective.

you can output a json in php so:

$myarray = array('image1.jpg', 'image2.jpg', 'image3.jpg');
echo json_encode($myarray);

edited Jan 04 '14 at 20:14

answered Jan 04 '14 at 18:37

joseluisq

508
1
7
19

hello, shouldn't it be `image_list[i]` instead of `message[i]`? Also, I have a problem with your code when my input is blank. It says that input is undefined. Could you help me out? – Simon Jan 04 '14 at 19:52
Yes, It should be image_list[i], fixed now. – joseluisq Jan 04 '14 at 20:22
You need to validate if your message variable is not empty `if(message != '')` – joseluisq Jan 04 '14 at 21:21

php/js/ajax issue: displaying many photos at once

1 Answers1