188 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
+1 more
ThemePrince says

Tough question! I’m working on a full AJAX WP theme and I need some tips from the pros. How do you handle dinamically loaded Javascript functions in AJAX themes?

Let’s see two examples to understand my problem better.

Example #1: User installs a new WP plugin, e.g.: Google maps shortcode, which outputs the div of the map and some scripts after that to start the map. When I call this page (where the google map shortcode is placed) the scripts won’t (always) work.

Example #2: User installs a ToolTip plugin. But this plugin won’t print any scripts after the shortcode, instead it prints its own script in the head and executes it when the document is ready, e.g.: $(‘a.icon’).toolTip(); This script also won’t work because first I need the content elements from the AJAX call, I can apply the function after that only. Of course if I put it into success callback, it works. But should the user put every new JS function into this callback function? How should I handle this well?

Extra info which may help: I use jQuery.load() function and I only get the #content div from the loaded pages, not the whole page.

Idea as possible solution #1 (not tested yet): get script tags from AJAX loaded content and eval() them?

188 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
+1 more
ThemePrince says

Bump!

1 post
  • Has been part of the Envato Community for over 2 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
gravityworks says

up

1693 posts Building the Web.
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
  • Has sold $250,000+ on Envato Market
  • Had an item featured on Envato Market
+7 more
ZoomIt says

AJAX WP themes are very tricky.

Best thing to do is offer an option to disable the ajax behavior to a normal page load. So users that only want the theme functionality should use the ajax loading and users who have multiple plugins should use normal page load.

I always offer an option to always load scripts in my plugins ( so scripts will not load only when the shortcode is parsed, but always, in the head section ) . But this is not enough sometimes ( for your example of document ready ) . So I see no other solution for this.

188 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
+1 more
ThemePrince says

ZoomIt: this option is already there.. ;)

260 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
subsolar says

While searching for possible solutions. Had someone tested this ?

146 posts A hunch is creativity trying to tell you something.
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Won a competition
  • Had an item featured on Envato Market
+6 more
CrayThemes says

While searching for possible solutions. Had someone tested this ?
I think this solution sometimes adds duplicated JS instances/listeners which eventually will increase the cpu usage and lag of the site more and more on every click/eval(); or i’m wrong but nevertheless i’m also curious for the best solution

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by