Geek Answers Handbook

Wordpress plugin jquery script not working in content loaded via ajax

I use the Jokery Hover Footnotes plugin, which allows you to add footnotes and dynamically display them when you hover over the mouse.

An example of its use is here: http://restoredisrael.org/blog/961/footnote-plugin-test-page/

Also, in my single.php file, I show metadata from custom fields using tabbed content. In other words, when you click on a tab, a custom field is loaded via ajax into a div, and this content contains footnotes.

Controls for the jquery function:

function tab(var) { $(document).ready(function(){ var Tabs = { '1' : 'page1.php?p='+var, '2' : 'page2.php?p='+var, '3' : 'page3.php?p='+var, '4' : 'page4.php?p='+var, '5' : 'page5.php?p='+var } $.each(Tabs,function(i,j){ var tmp = $('<li><a href="" class="tab">'+i+'</a></li>'); tmp.find('a').data('page',j); $('ul.tabContainer').append(tmp); }) var the_tabs = $('.tab'); the_tabs.click(function(e){ var element = $(this); var bg = element.attr('class').replace('tab',''); if(!element.data('cache')) { $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); element.data('cache',msg); }); } e.preventDefault(); }) the_tabs.eq(0).click(); }); return false; }

where Ajax calls pagex.php, which returns a custom field using:

 get_post_meta($post->ID, 'key', true);

html code in single.php:

 <ul class="tabContainer" style="display: none;"> </ul> <div class="clear"></div> <div id="tabContent" style="display:none;"> <div id="contentHolder"> </div> </div>

with:

 <body onLoad="tab(<?php echo $thePostID?>);>

The problem is that the footnotes appear correctly, but the guidance does not work. Cursor control is controlled by a js script inside the plugin folder, which loads correctly in the final source code, but the freezing effect does not work for footnotes in the div loaded by ajax.

I hope I get it.

Your help is greatly appreciated.

+1
source share
1 answer

So, as you said, the problem is related to starting the action of the JS plugin after updating the DOM. I found in the js source of the plugin that the action is triggered with: Footnotes.Setup (), so I added it to the ajax download function.

Now the code:

 function tab(var) { $(document).ready(function(){ var Tabs = { '1' : 'page1.php?p='+var, '2' : 'page2.php?p='+var, '3' : 'page3.php?p='+var, '4' : 'page4.php?p='+var, '5' : 'page5.php?p='+var } $.each(Tabs,function(i,j){ var tmp = $('<li><a href="" class="tab">'+i+'</a></li>'); tmp.find('a').data('page',j); $('ul.tabContainer').append(tmp); }) var the_tabs = $('.tab'); the_tabs.click(function(e){ var element = $(this); var bg = element.attr('class').replace('tab',''); if(!element.data('cache')) { $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); **Footnotes.setup();** element.data('cache',msg); }); } e.preventDefault(); }) the_tabs.eq(0).click(); }); return false; }
+1
source

More articles:


All Articles