Clicking links interupt page load

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Clicking links interupt page load

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Clicking links interupt page load

Post 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-', '')); };
    }
}
Post Reply