jQuery .load working randomly, desperate

Question

I've spent an extremely long time trying to figure out why .load in jQuery works really weirdly for me. I have no idea what causes it not to work correctly sometimes.

I am building an UI where the user doesn't have to reload, but instead, whenever they click an <a> link, it calls a JS function that loads the url's contents into a "contentLoad" div.

I'm learning coding myself and jQuery & JS is pretty confusing to me, so I try to keep it as simple as possible.

Situation: I am using a simple JS function that takes an URL (from local FTP server), checks whether the URL has any parameters (example.php?abc=...), inserts "?included=1" behind the URL (to prevent it to be opened unless called by this function) and puts the file's contents into an empty DIV using .load (and also uses .load to display a loading page).

Problem is, it works perfectly, but every two minutes or so, it gets stuck on my loading screen and I have to either run the function again or reload the whole thing. I have no idea what's wrong.

Function:

var loadPage = function(url)    {
$("#contentLoad").load("loading.php");

if(url.indexOf("?")>=0){
    $("#contentLoad").load(url + "&included=1");
}
else {
    $("#contentLoad").load(url + "?included=1");
}
window.history.replaceState('Object', 'Title', url);
}

Then, when I want to have an <a> that opens the page "explore.php", for example, I use

<li><a href="#" onclick="loadPage('explore.php')">Explore</a></li>.

What can I be doing wrong?

Answer 1

Alright so, I don't really know how this worked but I suppose the two .loads sort of "blocked each other out", because now that I removed the .load of the loading page, it works... Wow, haha.

So my solution was just replacing the

$("#contentLoad").load("loading.php");

with

document.getElementById("contentLoad").innerHTML = 'loading...';

Thanks to you guys for the help, though! :)