0

I am using AJAX to load content of which works perfectly when it loads with the DOM but during AJAX load it fails to initialise.

I am not exactly sure how to proceed to fix this.

Example (the basic loaded DOM)

When you click an image it opens into a modal like preview. But when i load the same content via AJAX, when the pictures are clicked it just treats as a hyperlink and goes to the reference instead of opening into the preview player as expected.

I am 99% sure this is due to the element being loaded into the DOM after initialisation.

An example of a snippet of code that should be loading when clicked a preview

<div class="img-thumb">
    <a vdh-685872771="" data-pp="prettyPhoto[blog-gallery]" href="//xxxxxxxxxxxx.eu/home/scripts/<? echo $licensePath; ?>" title="Fashion and Style for the Future">
    <div class="img-thumb-hover">
        <i class="im-expand2"></i></div>
    </a>
    <img alt="blog-image" class="img-responsive" src="//xxxxxxxxxxxx.eu/home/scripts/<? echo $licensePath; ?>">
</div>
Derple
  • 865
  • 11
  • 28
  • 1
    you are right! Have a look at event-delegation and mainly at the .on() function. You need it to run jQuery on elements that are not in the DOM when the page load – Lelio Faieta Apr 28 '15 at 16:46
  • See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Jasen Apr 28 '15 at 16:49

1 Answers1

0

So i found a solution to my problem. The issue is DOM related as @Lelio Faieta stated. However after much reading i returned to the original documentation for prettyPhoto the specific script that seems to be the issue here.

There i found this very nice solution with prettyPhoto and Ajax.

To return content via AJAX and have it initialise you can do the following with the rel attribute of your a

rel="prettyPhoto[ajax]"

By stating ajax in the brackets of prettyPhoto, this allows to add the content into the DOM with very little effort.

Example of the full a to be loaded via AJAX.

<a rel="prettyPhoto[ajax]" href="//xxxxxxx.eu/home/scripts/<? echo $licensePath; ?>">Ajax content</a>

This works without any need to add any new functions or edit any existing functions.

PrettyPhoto Documentation

Derple
  • 865
  • 11
  • 28