Jquery Ajax loading the whole page except a certain div

Question

I am writing an app that has an audio player at the footer. each Time i click on a link whole page itself loads thus the audio player is being restarted, my question How would you reload the whole page except a certain div?

score 3 · Accepted Answer · answered Dec 21 '12 at 04:41

3

I believe that is not possible. Maybe change your approach. Reload only specific areas you want to refresh. In fact, these areas may be included in a single (and possibly big) div tag. Then you can just update that div using jQuery ajax. For that, load is the way to go:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Edit:

Here is a more specific example using links (just wrote it off of my head):

<script type="text/javascript">
   $(function(){
      $("#myLink").click(function(event){
        $("#updateThisDiv").load($this.attr('href'), function(){
          alert('div updated!');
        });             
        return false; // or event.preventDefault();
      });
    });
</script>

And your link would look like this:

<a href='pathTo/Page' id='myLink'>Link text</a>

...

<div id="updateThisDiv"></div>

answered Dec 21 '12 at 04:41

Ulises

13,229
5
34
50

if I did that will the URL change? because thats the thing I want to happen. – user962206 Dec 21 '12 at 04:45
@user962206 The url will not change, although you could change the hash (see link below), just curious, why do you need to change the URL?: http://stackoverflow.com/questions/6478485/jquery-change-the-url-address-without-redirecting – Ulises Dec 21 '12 at 04:48
Let's say I am in the index page. www.myapp.com, then let's say I click on a link called "events", I want that page to be loaded ajaxified. so in my link something like this will appear. www.myapp.com/events also, I would like to also add URL parameters. www.myapp.com/events?eventId=1 or something like that. and also to allow bookmarking – user962206 Dec 21 '12 at 04:53
is there a way I can add a hash on the page? – user962206 Dec 21 '12 at 08:09
What for? Did you get a chance to review the question to which I put a link in my previous comment? – Ulises Dec 21 '12 at 14:59

vusan · Answer 2 · 2012-12-21T05:11:53.203

So you are using jQuery ajax. Even you reload whole div by ajax, the audio object remains same. So you can again generate your audio progress with the help of the object.

EDIT:
Just suggestion if you are reloading your page.
First save the currentTime of your audio object on your session or even database using ajax. And when user load that audio, start with that currentTime.
you can do this something like this:

 yourAudioObject.addEventListener(
                    'timeupdate',
                    function() {
                     $.ajax ({
            type:'get',
            url:'your/path/?currenttime='+yourAudioObject.currentTime, 
            ......

Jquery Ajax loading the whole page except a certain div

2 Answers2