Loading Gallery/Flash using AJAX

[raistie]

Hi everyone,

i am only just jumping on the AJAX train after all these years...
and finding it such a headache - been spending days wondering why i keep
getting it wrong.

I am trying to load a jquery plugin in div using jquery AJAX.

current i am using

$('#content').load('minishowcase/index.php');

and think it could be because of the js calls in the file that prevent it
from working? i have read that i need to somehow load all javascripts
through getScript but it seems like too many scripts to do that.

is there anyway i can use AJAX to load jquery-based galleries?

Would appreciate help so much!

Thank you any kind soul!

[Airshow]

If it's not working then it will be one or more of the following reasons:

• jQuery in not installed on the page - <script src="..."></script>
• The element '#content' does not exist at the time $('#content').load(...); is called.
• minishowcase/index.php does not exist or is in a different domain/path.
• minishowcase/index.php generates something other than an HTTP 200 reply, or returns something that generates a javascript/jQuery error and/or is not a valid HTML fragment.

It's probably the last of these.

To give you more control, try using $.ajax() instead of $(...).load() and set an "error" handler in the options to make errors observable, eg.:

$.ajax({
    url: 'minishowcase/index.php',
    success: function(data){
        $('#content').html(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        $('#content').html(errorThrown || textStatus);
    }
});

Personally, I always use $.ajax() in preference to the shortcuts like .load(), .get() or .post().

Airshow

[raistie]

thank you for the speedy speedy reply!
and for the new function that has just answered alot of my other questions.

it is loading into the div, however it is not doing it properly,
so probably the last option.
do i have to do something special to parse and load javascripts
from an external file when calling them from jquery?

this is what i get from the ajax:

[DEBUG] Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
click to dismiss...
galleries
tools:
Thank you for installing minishowcase.

and below are the images that have failed to load.

thanks for the help

[Airshow]

It looks like you are loading a whole page based on one of the minishowcase site's pages.

You need to serve and load just an HTML fragment. I don't know the format of that fragment because I have not used minishowcase. No doubt the documentation will tell you. I just took a quick look and have to say the documentation is not particularly good, or maybe just not very well organised.

The fragment that is served by ajax must (I expect) be devoid of javascript. With galleries of this type, all the javascript is typically on your main page - ie the page that makes the ajax request and loads the ajax response into <div id="content"></div> .

Once loaded, you probably need to invoke minishowcase on it or more likely on the container into which the fragment was loaded, something like this:

$.ajax({
    url: 'myMiniShowcaseFragment.php',
    success: function(data){
        $('#content').html(data).minishowcase({...});
    },
    error: function(jqXHR, textStatus, errorThrown){
        $('#content').html(errorThrown || textStatus);
    }
});

I have guessed the bit in red. The minishowcase documentation (once you have penetrated it) should tell you what to write there.

Sorry to be so vague but I don't have time to research minishowcase more deeply.

Airshow

[raistie]

hey, thanks, i will check that out and see what i can do.
alot of my pages have javascript, does ajax really not
load javascript at all?

[Airshow]

Javascript can be loaded dynamically using ajax.

The key thing is to to specify datatype:JSONP . The loaded javascript is also executed. This is used to overcome "same source" (ie same domain) limitations of other datatypes. JSONP works by dynamically creating a <script> node in your document and setting its src.

To load a javascript representation of PHP variables/objects (and other server-side languages), use datatype:JSON .

Of course, the server must in each case deliver appropriately formatted/coded/packaged data.

In general it's not a good idea to mix datatypes in a single ajax response. I'm sure this is possible but I have no experience and would be reluctant to try. Server-side and client-side handling would need to be bespoke.

Airshow