jquery ajax load next page

[marcdefiant]

Hey guys, I am able to load the first page just fine; the page reloads after the first ajax load.

a = $('a')
a.click(function(){
  // do everything
  a = $('a')
})

I have it in there after everything loads and a may be in another function, but even at the root of the click event

what can I do?

[Shikkediel]

Could you provide a bit more info? It’s not very clear so far.

[marcdefiant]

here is my current javascript:

(function($){
  function start(){
    a = $('a')
    cover = 'the-cover'
    coverId = '#' +cover
    placeholder = 'the-placeholder'
    placeholderId = '#' +placeholder

    $('#main > .inner').attr('id', 'the-inner')
    $('body')
      .append('
')
      .append('
')

    theCover = $(coverId)
    theInner = $('#the-inner')
    thePlaceholder = $(placeholderId)
    theMain = $('#main')

    theCover
      .css({
        width: '69.5%',
        backgroundColor: '#dedede',
        // display: 'block',
        position: 'absolute',
        top: 40,
        right: 0
      })
      .append('')

    theLoading = $('#the-loading')
    theLoading.css({
      marginLeft: '45%',
      marginTop: 100
    })

    setTimeout(function(){
      theCover.css({height: theMain.height()})
    }, 4000)

    a.click(function(e){
      clickd($(this))
      e.preventDefault()
    })

    clickd = function(t){
      var
        url = t.attr('href'),
        fullUrl = url +' #main'

      theCover.fadeIn('slow')
      $('html, body').animate({scrollTop: 0}, 'slow', function(){
        thePlaceholder.load(fullUrl, function(){
          console.log(fullUrl)

          theInner.html(thePlaceholder.find('.inner').html()).attr('rel', thePlaceholder.find('.inner').attr('rel'))

          theCover.fadeOut()
          pge = $('#the-inner').attr('rel')
          $('body').attr('class', pge)
          console.log(pge)
          window.history.pushState('', '', url);
          $('#images').justifiedGallery({
            margins: 3,
            rowHeight: 160
          })

          setTimeout(function(){
            thePlaceholder.remove()
            theCover.remove()
            
            new start()
          }, 150)
        })
      })
    }
  }

  new start()

})(jQuery)

I got this to work, but it now calls for each page twice as much.

http://photography.dyllon.me

[marcdefiant]

This is an example of what I mean about calling each page twice as much:

http://i.imgur.com/NKrGumL.png

the next call will call 8 times

[marcdefiant]

The issue started out as every anchor element, on click, would load the main content area with information from the header referral’s content, which worked just fine.

Now the new content that has loaded won’t load the next, it will send you to the referral page.

This is ultimately my problem

I initially tried writing it as a class, but got frustrated at this part, scrapped it and started over.

[Shikkediel]

It’ll be interesting to solve and I’d like to help out but for some reason I can’t connect to the page you linked to. Strange, checking online tells me it’s up. I’ll see if I can find something by just reading the code and your comments though.

[Shikkediel]

One thing I’m wondering about… why use new start() instead of only start()? Seems like you’d want to just execute the function, not create a prototype constructor.

[marcdefiant]

I was checking at that time to see if there would be a difference in behavior. I’m still learning.

[Shikkediel]

Aren’t we all? :-)

It’s unfortunate that I can’t view the page itself, not seeing anything obvious in the plain code. The behaviour’s similar to nested events that aren’t unbinded is all I can conclude.

[marcdefiant]

adding:

$('a').unbind('click')

did the trick for the multiplying requests. Now how about the 2 requests to begin with? from the get go, it has requested the next page twice.

[Shikkediel]

Nice… you might consider using the newer method though :

$('a').off('click').click(function() { ... });

Not sure about it calling twice but if it’s also originating from the click event, you could try this :

$('a').off('click').one('click', function() { ... });

Or you could do a console.log() on the clicks and see if it’s indeed double firing somehow.

[marcdefiant]

I had this in there:

$('html, body').animate({scrollTop: 0}, 'slow', function(){

to fire before anything else. it seems having both html and body selectors there made it fire twice!

[Shikkediel]

That was in the back of my mind, good you figured it out!

I was also thinking you wouldn’t have to do the unbinding if you are not caching the links as a variable. So just using $('a') directly should solve the other issue as well.

Edit – strike that last bit, after more thought experiment that might not work after all.

[marcdefiant]

thank you so much for your help. I appreciate it!

[Author]

Posts