Partially refreshing site not working

StackOverflow https://stackoverflow.com/questions/12636342

Question

I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:

$(function() {
   $("#refresh").click(function(evt) {
      $(".bgleft").load("left.php")
      evt.preventDefault();
   })
})

The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out) and click on "refresh" at the left frame.

Edit:

The HTML snippet: <body class="bgleft">

Was it helpful?

Solution

In left.php there are two lines of code which are showing theese characters.

for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));

Try to remove them, it should help.

Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.

OTHER TIPS

It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.

Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.

PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...

You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.

How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?

$(function() {
    $("#refresh").click(function(evt) {
        evt.preventDefault();         
        $(window.top.window).find('frame[name=left]').reload();
    })
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top