Ajax with PHP, displaying smoothgallery

[sassenach]

Hi there,

I am using AJAX XMLHttpRequest with PHP in order to view full project photos according to project id.

This is my ajax request:

function getMessageResponse(str){
   var xmlHttp;
   try{
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
   }
   catch (e){
       // Internet Explorer
        try{
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
      catch (e){
          try{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
         catch (e){
           alert("Your browser does not support AJAX!");
           return false;
         }
       }
   }
   
   xmlHttp.onreadystatechange=function(){
      if(xmlHttp.readyState==4){
        document.getElementById('response').innerHTML=xmlHttp.responseText;
        //document.myform.message.value = '';
      }
   }

   //url=url+"&message="+str;
   var url="projects.php?mid=3";   
   url=url+"&pid="+str;
   url=url+"&sid="+Math.random();
   xmlHttp.open("GET",url,true);
   xmlHttp.overrideMimeType("text/html; charset=windows-1255"); /*TO DISPLAY HEBREW CHARACTERS*/
   xmlHttp.send(null);
}

This is my <li> in index.php:

<li class="text2 corner" id="response" name="response">&nbsp;</li>

This is my projects.php page:

<?php //projects
require_once ('includes/config.inc.php');                    
require_once ('includes/functions.inc.php');
require_once ('includes/mysql_connect.php');
if(isset($_GET['pid'])) {
   $pid = (int) $_GET['pid'];
   //echo "project id: $pid---";   
   $projectsQ1 = mysql_query("
   SELECT projects.proj_id AS pid, projects.location AS plocation, projects.title AS ptitle, images_to_proj.img_id AS img_id, images_to_proj.caption AS caption, images_to_proj.file_name AS file_name 
   FROM projects INNER JOIN images_to_proj ON projects.proj_id=images_to_proj.proj_id 
   WHERE projects.proj_id=".$pid."") or trigger_error("Query: $projectsQ1\n<br />MySQL Error: " .mysql_error());
    if(mysql_num_rows($projectsQ1) > 0){
      //$projectsR1 = @mysql_fetch_array ($projectsQ1);
      echo '<link rel="stylesheet" href="/includes/smoothgallery/css/layout.css" type="text/css" media="screen" charset="utf-8" />
         <link rel="stylesheet" href="/includes/smoothgallery/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
         <link rel="stylesheet" href="/includes/smoothgallery/css/ReMooz.css" type="text/css" media="screen" charset="utf-8" />
         <script language="javascript" type="text/javascript" src="/includes/smoothgallery/scripts/mootools-1.2.1-core-yc.js"></script>            
         <script language="javascript" type="text/javascript" src="/includes/smoothgallery/scripts/mootools-1.2-more.js"></script>
         <script language="javascript" type="text/javascript" src="/includes/smoothgallery/scripts/ReMooz.js"></script>
         <script language="javascript" type="text/javascript" src="/includes/smoothgallery/scripts/jd.gallery.js"></script>
         
      <div id="myGallery">';
      while ($projectsR1 = mysql_fetch_array($projectsQ1, MYSQL_ASSOC)) {
         $getImg1 = getUploadImgPath(27, "/site_uploads/portfolio/", $projectsR1['file_name'], $projectsR1['img_id'], 1, "portfolio");
         $ImgThumb_small = str_replace($image_ext, '_site_thumb.jpg', strtolower($getImg1));
         list($width1, $height1, $type, $w) = getimagesize(strtolower($getImg1));
         if($width1 >= 632){   //if image was large, get resized
            $thumbimg_large = str_replace($image_ext, '_large_thumb.jpg', strtolower($getImg1));
         } else {$thumbimg_large = $getImg1;}
         //echo '--->'.$projectsR1['plocation'].' - '.$projectsR1['ptitle'].' - '.$projectsR1['img_id'].' - '.$thumbimg_large.'<br/>';
         echo '<div class="imageElement">
               <h3>'.$projectsR1['ptitle'].'&nbsp;'.$projectsR1['plocation'].'</h3>
               <p>'.$projectsR1['caption'].'</p>
               <a href="'.$thumbimg_large.'" title="open image" class="open"></a><img src="'.$thumbimg_large.'" class="full" /><img src="'.$ImgThumb_small.'" class="thumbnail" />
         </div>';
      }
      echo '</div>
      <script language="javascript" type="text/javascript"> 
            function startGallery() {
            var myGallery = new gallery($(\'myGallery\'), {
               timed: false,
               useReMooz: true,
               embedLinks: false
            });
            }
            window.addEvent(\'domready\',startGallery);
         </script>';
      mysql_free_result ($projectsQ1);
   }
}
?>

When I display the smoothgallery in index.php page, it works perfectly. It really displays the gallery show. Since I put the gallery in "projects.php" page, it only displays the photos and not inside a gallery show.

You can test this by using this link [http://www.maestro2007.co.il/index.php?mid=3], click on a thumbnail on the right, that should open the gallery on the left.

Is this an issue with ajax request that its not showing the gallery? Any suggestions/ideas are welcomed.

Thanks,
M

[digital-ether]

A change it the URL path won't affect "AJAX". Only a domain change, such as a subdomain.

So it must be something else in your code.

[sassenach]

hi again...

i didnt really understand, please explain.
thanks

[digital-ether]

Do you get any JS errors?

Firefox has a great extension called Firebug. It has good JS debugging. Safari and Chrome also have similar debuggers/consoles.

Changing the url you have the AJAX stuff on does not make any difference. Only a change in domain would.

So you have some other problem. You can't know unless you do some JavaScript debugging.

[sassenach]

nope, no JS error in FF. I also use FF for most of my development because they have a great debugger.

You can check it yourself at:
http://www.maestro2007.co.il/index.php?mid=3

[digital-ether]

Its actually displaying, but breaks the layout. The images come outside of the main box. So I think you may just have a CSS problem.

btw: You sent me the link to index.php which you mention:

When I display the smoothgallery in index.php page, it works perfectly

Is it not working in index.php or in projects.php?

[sassenach]

what i mean is, if i display the gallery in index.php, without calling project.php/ajax request, it works perfectly within the <li> tag.
Therefore, its not a css problem.
Some people told me that ajax request can't execute JS, therefore i'd have to go with JQuery. I have no clue how to use that though.
What do you think?

[digital-ether]

You can execute JS by using eval(). If the JavaScript is specifically JSON, then you can use JSON library.
http://www.json.org/js.html

[sassenach]

i dont understand how to execute the project.php file using eval.
can you give me a starting point?
thanks

[digital-ether]

i dont understand how to execute the project.php file using eval.
can you give me a starting point?
thanks

There is a good example on the page I linked.

All you need to do is take the response from the HTTP Request (AJAX Call) and use eval to turn that string into an actual JavaScript Object.

var myObject = eval('(' + response + ')');

Anyway, I don't think this is the problem.

It looks like you don't have an XMLHttpRequest set up to execute when the page loads.

You need to attach an event handler for the window onload event, that will make the XMLHttpRequest to load the first image.

since you have JQuery, you can use something like:

$(document).ready(function() {
MyAjaxRequest('response', '/projects.php?mid=1&pid=1');
});

Or similar...

[sassenach]

hi,
so i decided to use iframes and it works perfectly and pretty quickly as well.
I still want to learn how to use jquery/ajax/json, etc, but that i will have to halt when i have some time.
thanks again

[digital-ether]

hi,
so i decided to use iframes and it works perfectly and pretty quickly as well.
I still want to learn how to use jquery/ajax/json, etc, but that i will have to halt when i have some time.
thanks again

Glad you got it solved - too bad it wasn't exactly how you wanted.