[Resolved] Toolset Forms plugin disrupts jQuery code

[Author]

Posts

[thoraldM]

I wanna start using the Toolset Forms plugin so that I can have readers submit content on the front end, but when I activate the plugin, it negatively impacts jQuery code that controls tooltip displays on a custom post type. Any suggestions would be most welcome. I really have no desire to go out looking for another WP forms plugin to do what I would like to do.

https://toolset.com/forums/topic/upgraded-to-paid-version-of-toolset-jquery-stopped-working/

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I looked at the previous thread and it seems there is a conflict between your custom code, Toolset Forms, the jQuery Lightbox plugin, and the Exec-PHP plugin.

The Exec-PHP plugin simply lets you add custom PHP (I guess), so the issue is not with the plugin, but with the custom PHP you have added.

So:

- is this still the case?
- what is PHP code added that could affect this (presumably enqueuing JS files)?

To investigate I'll need a copy of your site if you could please share: hidden link

[thoraldM]

Hello Nigel,

Yes, I still use Exec-PHP as it allows me to run PHP code within widgets. The jQuery Lightbox plugin is essential in image on-click behavior throughout the site. Whenever I activate Toolset Forms, the jQuery code that I use for the tooltip effect fails to run, resulting in a messy rendering of the pages on which the tooltip is called.

I know I said I have no desire to look for another plugin, but in my desperation yesterday I found:

hidden link

When I activate this plugin, the jQuery code that runs the tooltip does not get disrupted.

I don't know if this helps you help me.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Not really, I'll need the copy of your site to use for testing.

And I need to know which, if any, code you added in Exec PHP is required for the tooltips to work. You will doubtless have other code for other purposes added with that plugin, I just need to know which code is needed for your tooltips.

[thoraldM]

Hello Nigel,

The Exec-PHP plugin has no relationship to the tooltip code. I use that plugin for other purposes. Turned on or not, that plugin has no impact on the jQuery tooltip code. Same with the Lightbox plugin. I forgot why those plugins were brought up in relation to this issue.

The specific jQuery code that gets disrupted whenever I turn on Toolset Forms is below. It is added via the theme (BlackMag) options, and is run on $(document).ready().

$(function() {
    $( document ).tooltip({
      position: {
        my: "left center",
        at: "right+10 center",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
  });

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

$(function () {
    $('.bentspuncell').attr('title', function(){
        return $(this).next('.statusRollup').remove().html()
    })
    $(document).tooltip();
});

$(function worker(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false,
        complete: function() {
          // Schedule the next request when the current one's complete
          setTimeout(worker, 180000);
        }
    });
    var ajax_load = "<img src='<em><u>hidden link</u></em>' alt='loading...' /><br>";
    
    // load() functions
    var loadUrl = "<em><u>hidden link</u></em>";
    
    $("#result").html(ajax_load).load(loadUrl);

// end  
});

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Sorry, that code in isolation is too abstract for me to try and reproduce the problem.

I don't know which tooltip solution you are using (jQueryUI? Bootstrap? Something else?), and as I can't see the page in question I've no idea what the markup looks like.

So let me come at this from another angle, and show you how to add Tooltips, without the need for so much custom code.

If you are using Toolset you are likely using Bootstrap (unless you have chosen not to), and tooltips are described here: hidden link

I created a View which lists posts and includes a taxonomy filter, where the results are updated by ajax.

The loop section of my View looks like this:

          <p>Hover to see <a class="has-tooltip" href="[wpv-post-url]" title="[wpv-post-title]">the title</a> of the post being linked to</p>

In the custom JS editor of the output section I added the following:

( function( $ ) {
	$( document ).ready( function(){
		$('.has-tooltip').tooltip()

	});
})( jQuery );

Very simple. I included a class "has-tooltip" in my markup where I wanted tooltips to be added, and included a title attribute which provides the text for the tooltip, and instantiated the tooltips with the above JS.

Now, if I use a Query Filter the results are updated and the tooltips will be lost, they need re-instantiating on the updated results.

I went back to the Search and Pagination editor of my View, where the taxonomy filter control is inserted. You will note there is a Frontend events button in the JS editor. Views triggers a series of custom JS events during pagination and custom searches, and you can use this button to insert wrapper JS with the appropriate event listener.

In my case I need to update the results once the custom search has completed, and so I ended up with the following to re-instantiate the tooltips:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {

  		$('.has-tooltip').tooltip()

});

You can see the results in the screen recording.

That is all that is required to add tooltips to a list of posts which also work after an ajax update. If you are not using Bootstrap this may need modifying, but probably not by much.

The code you shared above looks overly complex.

[thoraldM]

Hello Nigel,

Not sure if your suggestion could help me. I use the tooltip specifically for my "charts" section. When a reader hovers over a chart position, it shows the data for that particular song. You can see it in action here:

hidden link

It seems to me that in order to get your suggestion to work for me, I would need to convert the data in my charts into sortable fields, which was a topic on a separate support request that I've temporarily abandoned because there is no clear solution for me to take the data in the charts and put them in a sensible architecture using Types. I'm sure a more experienced Toolset expert would find a way to make it work, but I simply couldn't wrap my head around it. You can look at the discussion here:

https://toolset.com/forums/topic/i-need-some-guidance-on-how-to-set-up-post-types-and-relationships/

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Where does the content that is inside the tooltips currently come from?

(And what are you using for your tooltips? jQueryUI, Bootstrap, something else?)

[thoraldM]

Hello Nigel,

The content of the charts is managed in a spreadsheet, which mailmerges into a Word document, which is then copied and pasted into the WordPress editor.

The tooltip uses jQuery UI:

hidden link

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

"copied and pasted into the WordPress editor"

Which editor?

Looking again at the page on your site, from the page source I can see that this must be a single chart post being viewed.

How is the list of tracks generated? I expected to see that it was created by a View, listing another post type, but from the page source I can see that it's not.

Is this generated by a custom single PHP template?

If so then it would be helpful to see that template.

I'm at a bit of a loss here, it's hard to know what the conflict is between your JS code and Toolset Forms in the abstract, and I can't see how you might improve on adding the tooltips without knowing how the page is generated.

[thoraldM]

Everything in the chart section is manually copied and pasted into the body area of the WordPress editor. It's not done through Views at all. As a said earlier, I would like to start doing that, but couldn't wrap my head around how to implement it using Toolset.

Ideally, I would like to use Toolset to power the charts so that I can have a scenario where I can click on a track title and it will show me that track's chart history (peak position, number of weeks on chart, etc.),

[thoraldM]

Here is the custom template for the chart (single page):

<?php get_header(); ?>

<div class="vw-page-wrapper clearfix <?php vw_the_sidebar_position_class(); ?>">
	<div class="container">
		<div class="row">

			<div class="vw-page-content" role="main" itemprop="articleBody">

				<?php if ( have_posts() ) : ?>

					<?php do_action( 'vw_action_before_single_post' ); ?>

					<?php while ( have_posts() ) : the_post(); ?>
						<article <?php post_class(); ?>>

							<!-- <div class="vw-post-categories"><a class=" vw-category-link vw-cat-id-1962" href="/chart/" title="View all charts" rel="category">The Bent*Spun 21</a></div> -->
							<!-- ADDED -->
							
							<div class="breadcrumbs" typeof="BreadcrumbList" vocab="<em><u>hidden link</u></em>">
							<?php if(function_exists('bcn_display'))
							{
							bcn_display();
							}?>
							</div>
						
							<span class="author vcard hidden"><span class="fn"><?php echo esc_attr( get_the_author() ); ?></span></span>
							<span class="updated hidden"><?php echo esc_attr( get_the_date( 'Y-m-d' ) ); ?></span>
							
							<?php vw_the_post_meta_large() ?>
							
							
							<div align="center"><img src="/charts/images/2016_bentspun_header.png"></div>
							<div><i>The tunes that rocked the hebdomad for the tracking period beginning <?php echo types_render_field("tracking-period-begin-date", array("style"=>"text", "format"=>"F d, Y")); ?> and ending <?php echo types_render_field("tracking-period-end-date", array("style"=>"text", "format"=>"F d, Y")); ?>.</i><p>&nbsp;</p></div>

							<?php vw_the_embeded_media(); ?>

							<div class="vw-post-content clearfix"><?php the_content(); ?></div>
						
							<?php wp_link_pages( array(
								'before'      => '<div class="vw-page-links"><span class="vw-page-links-title">' . __( 'Pages:', 'envirra' ) . '</span>',
								'after'       => '</div>',
								'link_before' => '<span class="vw-page-link">',
								'link_after'  => '</span>',
							) ); ?>

							<?php the_tags( '<div class="vw-tag-links"><i class="icon-iconic-tag"></i> <span class="vw-tag-links-title">'.__( 'Tags:', 'envirra' ).'</span>', '', '</div>' ); ?>

						</article><!-- #post-## -->

					<?php endwhile; ?>

					<?php do_action( 'vw_action_after_single_post' ); ?>
					
					<?php if ( function_exists( 'echo_ald_crp' ) ) echo_ald_crp(); ?>

					<?php vw_the_post_footer_sections(); ?>
					
				<?php endif; ?>

			</div>

			<?php get_sidebar(); ?>
		
		</div>
	</div>

</div>

<?php get_footer(); ?>

[thoraldM]

I believe the jQuery tooltip code, which I entered in the theme options (see pic), is being injected in the footer.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I took another look at this, but I can't do any testing because I don't have a copy of your site to test on.

I was trying to simplify the JS to hopefully avoid any issues.

I'm slightly puzzled by your code as it seems to initialise the tooltips twice.

Could you try replacing your JS with the following, first:

	( function( $ ) {
	$( document ).ready( function(){

		$('.bstablerow').each( function( i, element ){

			$( this ).children( '.bentspuncell').attr( 'title', function(){

				return $( element ).children( '.statusRollup' ).html();
			} );
			$( this ).children( '.statusRollup').remove();
		} );

		$( '.bstable' ).tooltip();

	});
})( jQuery );

I expect that to correctly add the tooltips, but I don't know if they will display as expected.

If not, try the following:

( function( $ ) {
	$( document ).ready( function(){

		$('.bstablerow').each( function( i, element ){

			$( this ).children( '.bentspuncell').attr( 'title', function(){

				return $( element ).children( '.statusRollup' ).html();
			} );
			$( this ).children( '.statusRollup').remove();
		} );


	    $( '.bstable' ).tooltip({
	      position: {
	        my: "left center",
	        at: "right+10 center",
	        using: function( position, feedback ) {
	          $( this ).css( position );
	          $( "<div>" )
	            .addClass( "arrow" )
	            .addClass( feedback.vertical )
	            .addClass( feedback.horizontal )
	            .appendTo( this );
	        }
	      }
	    });

	});
})( jQuery );

Test if it still works as expected, and then test with Toolset Forms activated.

[thoraldM]

Thanks Nigel. I tried both codes.

1) With Toolset Forms deactivated, they both work, but the tooltip isn't rendering the style elements. It's just showing a white box with the HTML code inside.

2) Once I activate Toolset Forms, the tooltip stops functioning altogether.