Combining php $_GET[''] with Javascript function

Question

I am currently coding a gallery which until now has been combining AJAX and Javascript with an xml-file to load all images. Now I have come to the fun part where I click an image to enter the inner gallery. (On the first page they load one image of each session and when one image is pressed it will continue to the rest of the images of that session.)

The problem that I have with AJAX (I'm sure there is a neat hack for this as well!) is that when the page is reloaded it automatic goes back to the session index since there is no URL-change.

What I have done now, so far is to put one javascript-function in one document where it loads only the gallery index. This works flawless.

In the other file I got just about the same code, but instead it loads the function that loads the rest of the session-images, but I don't get it to work.

Here is the script that should load the specific session-images.

<script type="text/javascript">
    window.onload = displayGallery(<?php echo $_GET['session']; ?>);
</script>

<div id="gallery">

</div>

When I just only javascript and an "onload" in the link it worked just fine, but then I had the problem to reload the page. Now I just php to include this file and $_GET the variable for "displayGallery()"

function displayGallery(sessionAtt)

So in an attempt to make this clear, I'm rubbish explaining stuff, I need help with making the displayGallery(sessionAtt) actually run after grabbing the essential variable from the url.

I am VERY fresh on Javascript. Done most scripts in php up until now.

EDIT:

To explain the site a bit: It's a gallery I'm making for a friend of mine. There is no login for anyone else but her and all sub-pages (Start, Gallery, About, etc.) is loaded through php "include".

The XML:

<gallery>
    <session>
        <sessionName>Beauty</sessionName>
        <path>gallery/beauty/</path>
        <item>
            <file>_DSC2331.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_DSC2339.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_DSC2350.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
    <session>
        <sessionName>Red</sessionName>
        <path>gallery/red/</path>
        <item>
            <file>_MG_6227-web.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_MG_6235-web.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_MG_6240-cropped-web.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
</gallery>

The js:

function displayGallery(sessionAtt)
{
    var xmlDoc = loadDoc("gallery/gallery.xml");
    var sessions = xmlDoc.getElementsByTagName("session");
    var txt = getGallery(sessions, sessionAtt);
    document.getElementById("gallery").innerHTML = txt;
}

function getGallery(sessions, sessionAtt) {
    var items = null,
    i = 0,
    j = 0,
    sessionName = "",
    link = "",
    img = "",
    path = "",
    file = "",
    txt = "";
    for (i = 0; i < sessions.length; i++) { 
        sessionName = sessions[i].getElementsByTagName("sessionName")[0].childNodes[0].nodeValue;
        if(sessionName == sessionAtt)
        {
            items = sessions[i].getElementsByTagName("item");
            path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
            for (j = 0; j < items.length; j++) {
                file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
                link = '<a href="' + path + file + '" rel="lightbox[' + sessionName + ']" title="' + sessionName + '">';
                img = '<img src="' + path + file + '" class="thumb" onclick="displayImage();" /></a>';
                txt += link + img;
            }
        }
    }
    return txt;
}

I have tried to run the script with sessionAtt set in the function and it works.

window.onload = displayGallery;

But when changing it to

window.onload = displayGallery('Red');

both manually and with php... Nothing.

Answer 1

Instead of window.onload = displayGallery(<?php echo $_GET['session']; ?>);

Use

window.onload = function() {
    displayGallery(<?php echo "'" . $_GET['session'] . "'"; ?>);
};

As you said, assigning the function like window.onload = displayGallery; works. When assigning it like window.onload = displayGallery('Red');, what is happening is that the function is not being attached to window.onload, but what it returns is. And the function returns nothing, so window.onload = undefined;.

This also explains why nothing happens, because the function is not being called on onload, but as soon as the browser executes the script.

The way I've fixed this is by assigning a function without executing it (window.onload = function() { ... }), and placed the function which you are executing within it.

Answer 2

To me it seems you should use XSLT instead of what you do...mark it as WIKI as it does not answer your specific question

Answer 3

Your code is working fine for me. The only thing I did differently is I used <body onload="displayGallery('Red')"> rather than window.onload = displayGallery('Red');

As Martin pointed out, using window.onload tries to find <div id='gallery'> before the page is loaded, giving an error: document.getElementById("gallery") is null

Using <body onload="displayGallery('Red')"> waits for the page to finish loading before calling displayGallery.

Answer 4

After reading your description several times...

1) GET variables only work if you provide variables in the URL for eg. index.php?session=model1

2) You're saying that the back button doesn't work because the page doesn't change, which is wrong if you are using get variables correctly

Your index page should be linking to each session page like so: <a href="gallery.php?session=modela"> only then can you use the javascript to pull the variable on the gallery.php

Answer 5

I am not sure that I understood what you are trying to do. But try these things.

**. make a javascript variable that will hold the value of GET['session']. and later use that variable. its also easier for debugging.

**. insdead of window.onload make a function call it 'init' and in the body tag write:

<head>
 <script>
   function init(){
     //displaying gallery or other stuff
  }
 </script>
</head>
<body onload="init();">

this ensures that your script runs after the page was loaded.

** If I got you right, there is a session for each user. and in this case (as a rule of thumb) at the very top of your php file, even before the

session_start();