Is there away to load a page only once with AJAX?

Question

I have an AJAX call to load a function once the page is loaded, the function opens a lightbox a like frame with some data. The issue is that if I click on close (lightbox frame), the page loads again and again loading the frame so the use never reaches the page under the layer of frame since the frame load on infinite loop. The Ajax is repeating calling the function I guess but I would like to load the frame once and when the user clicks X (close) he may return to the original page.

$(document).ready(function(){
var city = $('#citycode').html();

$.ajax({
//when page is loaded, fire the following function
success: function(){
//the function to be fired located in the page in seperate file
openX(city + //some other parameters);
}});


});

Any tips?

Answer 1

You can set a global variable on top of the page and set it to true once the page was loaded then later in your code you check if the variable is false load the page not other wise. Here is the prototype:

<script type="text/javascript">

var loaded = false;

$(document).ready(function(){
var city = $('#citycode').html();

$.ajax({
//when page is loaded, fire the following function
success: function(){
if (loaded === false)
{
  //the function to be fired located in the page in seperate file
  openX(city + //some other parameters);
  loaded = true;
}
}});


});
</script>

Answer 2

A random "cache" parameter may be being added by jQuery to inhibit caching. Try adding setting the cache property to true in the ajax call to allow caching; your code may look like this:

$.ajax({
  cache: false;
  success: function(...){...},
  ...
});

Answer 3

I've interpreted your question in a different way to the other answers, so here goes... :)

I'm guessing the Close button is a hyperlink, and the default action (changing the URL of the page), is not being prevented?

If this sounds right, you'll need to prevent the default action by capturing the click event on the link, and calling the preventDefault() method.

Without seeing your code, here's the best example I can give:

$('div.lightbox').live('click', function (event) {
  event.preventDefault();
});

Note the use of live() here.