Page 1 of 1

Clicking links interupt page load

Posted: Sat Sep 06, 2008 9:23 am
by Chalks
I've been building a website for a group of my friends so that we can play a certain game together online. Since the game itself is relatively simple, I decided to just make one play.php page. Including javascript, css, and php code, it's probably around 500 lines long... maybe a little less. Which is fine. I've set it up so that you can do everything you need to do without reloading the page, so once it's loaded you're set.

Here's the problem. The first thing to display on the page is a list of links. If the user clicks on one of them before the page has loaded all the way, all of my php loops are stopped. It's as if clicking on one of these links automatically inserts a "break;" into each loop on the page. Why, and how can I prevent it?


here's what a link looks like:

Code: Select all

<a href="javascript&#058;display('spanID')">Display the span with id spanID</a>
the display function looks basically like this:

Code: Select all

function display(id)
{
  i = document.getElementsByTagName('span');
  // loop through all spans and set display to 'none' and visibility to 'hidden'
  // set element 'id' display to inline and its visibility to "visible"
}
Am I doing something dumb? I'm doing stuff with the DOM that's more intricate than anything I've ever done before, so I'm still finding a few errors in places. I could set it so the links don't display until the page is fully loaded, but that's avoiding the issue, not actually solving it.

Re: Clicking links interupt page load

Posted: Sat Sep 06, 2008 12:21 pm
by kaszu
First solution:

Code: Select all

var display = function () {};
 
//when page has finished loading redefine display function
display = function (id) {
    i = document.getElementsByTagName('span');
    //...
}
Second solution is to add event handlers after the page has finished loading, not inline them like now.

Code: Select all

<a href="#" class="data-display" id="display-spanID">Display the span with id spanID</a>
 
//when page has finished loading
var a = document.getElementsByTagName('a');
for(var i=0,j=a.length;i<j;i++)
{
    if (a.className == 'data-display') {
        a.id = a.;
 
        a.onclick = function () { display((new String(this.id)).replace('display-', '')); };
    }
}