ansaurus

Question

ajax problem (jquery)

Answer 1

A:

do you use firebug ? that could help out debugging your php/ajax code live. Just don't forget to enable javascript debugging and watch in the ajax responses tab when issuing XMLHttpRequests to debug.

incidah 2010-07-20 21:51:30

Hi, all my javascripts are running correctly. I'm just unsure how to use scripts on new elements that have just been added the DOM.

shane 2010-07-20 21:54:27

Answer 2

A:

It looks like your ajax call is loading the entire portfolio.php page. Allowing the user to click the link and go to the portfolio page if they don't have Javascript enabled is a great thing, but loading that entire page via an ajax call is sure to cause some issues.

The portfolio.php page that you are loading via ajax includes the $(document).ready to enable the lightbox, but this code will never execute since the main page has already loaded. Your code for your fancy box plugin should be in the main web page. Then you can run that code to bind the fancy box after you have loaded the portfolio page/content into your div.

Edit: added more detail:

You currently have

$('#content').load(toLoad)

in your js.js file. according to the jQuery api docs (http://api.jquery.com/load/) you can pass a callback into it to run when it has finished:

$('#content').load(toLoad, function() {
  alert('Load was performed.');
});

You could simply load your fancy box code into this callback function in the js.js file like this:

$('#content').load(toLoad, function() {
    $("a#example6").fancybox({
        'titlePosition' : 'over'
    });

    $("a[rel=example_group]").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'titlePosition' : 'over',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
      }
    });
});

The problem with this is that it will get called even if you're not calling the portfolio page. It won't complain, but it is easily solved by wrapping it in an "if" statement.

Stephen Perelson 2010-07-20 22:06:38

Thank you. This solution sounds perfect. I've tried adding the relevant javascript to thee main site like you suggest, but I just can't figure out how to implement the .bind() function. Would I need to bind the new content to the existing javascript? that sounds logical, but how do I go about it? Thanks for your time :)

shane 2010-07-21 05:38:09

@shane your code is a little bit messy - understandable since you're trying many things out to get it to work. I hope you will be able to use what I've written here. Calling the .fancybox() method will bind to any new content on the page if it is called after the content has loaded. You won't need to use .live

Stephen Perelson 2010-07-21 12:43:56

Hi there. Thanks for the help. I understand the logic here but...Using the callback feature I am able to manipulate any part of the DOM except for newly added content. Serious head-scratching going on here.

shane 2010-07-21 18:08:04

Hi Stephen. Thanks for all your help, you set me on the correct path, and although I never managed to utilise your code, the idea set me onto .livequery() which has worked an absolute treat!Thanks for your time.

shane 2010-07-22 21:18:18

I'm glad you came right.

Stephen Perelson 2010-07-23 11:50:52

ansaurus

tags:

views:

answers:

ajax problem (jquery)

related questions