Skip Navigation

[Resolved] Can anything from toolset make jquery not work?

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 14 replies, has 3 voices.

Last updated by adrian-mihaiN 3 years, 10 months ago.

Assisted by: Shane.

Author
Posts
#2104263

Tell us what you are trying to do?

I am implementing a Show More button from this tutorial: hidden link

Example page: hidden link

I am trying to make the long description field be shorter and I added the required class to the Toolset div.

Is there any documentation that you are following?
hidden link

Is there a similar example that we can see?
see link above

What is the link to your site?
hidden link

Admin login:
toolset
NEAWSkh)xFTSnA7usTX2G3DN

Thank you.

#2104269

Can anything from toolset make jquery not work?
Hi, Toolset implements jQuery's no-conflict mode, so in general you should access the jQuery object in the namespace jQuery instead of $:

jQuery('#someid')...

...instead of...

 ​
$('#someid')...

That's why the error in the browser console says "Uncaught TypeError: $ is not a function at (index):2302".

When your jQuery code is wrapped in a document.ready handler, you can use the $ namespace if you use $ in the callback function's arguments:

// ...
// $ is undefined here

jQuery(document).ready(function($) {  // place $ in the callback function parameters...
  $(".comment").shorten();  // ...now you can use $ inside the function
});

// $ is undefined here
// ...

Try that and see if it solves the problem.

https://api.jquery.com/jquery.noconflict/

#2104275

So if I understood it correctly I changed from:

<script type="text/javascript">
$(document).ready(function() {

$(".comment").shorten();

});
</script>

To:

<script type="text/javascript">
jQuery(document).ready(function() {

$(".comment").shorten();

});
</script>

Didn't make it work.

#2104287

You need to add $ in the callback function parameter if you want to use $ inside the callback.
Change from this:

jQuery(document).ready(function() {

...to this:

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

That should resolve the error currently showing up in the browser. From there, we can continue debugging if necessary.

#2104293

Code edited.

Desired behavior not working plus added a new issue.

It's breaking a Toolset multifield - see the ? sign after Price: on the line below stars here hidden link. This wasn't happening before.

#2104295

The ? is actually gone now. Not sure why it showed a few min ago unless you went it and edited something since my last message.

#2105561

Since your profile said you were away until Sunday and the login data on 1st post was public I changed the psw.

Please set the next reply as private if you need me to share new login info.

Thanks.

#2106729

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adrian,

Christian is currently off on vacation for this week so I will be handling this ticket for him.

I've enabled the private fields for your next response.

Thanks,
Shane

#2106785

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi adrian,

Thank you for the credentials, however i'm not seeing where you've added the Javascript required to shorten the container text.

Can you let me know exactly where you've set this up ?

Thanks,
Shane

#2106815

Sorry for not making it more clear.

Header script to add the javascript controlled by Generate Press Elements. Can be edited here hidden link

Block where I try to make it work is the long description single field in the Toolset Archive hidden link - I've added the class "comment" to it.

The function is called in the archive page below the pagination HTML block.

An alternative implementation that I also couldn't make work below.

Using hidden link

I've uploaded the script here: hidden link

Can use the above Elements hook to insert any needed code in the header.

Another option would be a WordPress plugin if I could wrap somehow the content of a single field after x characters into a shortcode. The jquery solutions above look more elegant without having to touch the database after each change.

#2107929

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adrian,

Thank you for the clarity.

Currently having a look for you to see how best I can assist with getting this to work.

Thanks,
Shane

#2110303

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adrian,

Checking this further, I saw that there were some errors in your JS console that is causing the script to break. Unfortunately these errors below are part of the reason why the code isn't working.

jquery.min.js?ver=3.5.1:2 Uncaught TypeError: n(...).not(...).filter(...).mediaelementplayer is not a function
    at HTMLDocument.initialize (wp-mediaelement.min.js?ver=5.7.2:1)
    at e (jquery.min.js?ver=3.5.1:2)
    at t (jquery.min.js?ver=3.5.1:2)

Before I can debug any further we will need to ensure that these errors are cleared. I would recommend temporarily disabling all your non-toolset plugins and checking the website's console again to see if the errors are still present.

Also I recommend using the function call for the .shorten() function in its simplest form before adding the additional parameters.

jQuery(document).ready(function() {
	
		jQuery(".comment").shorten();
	
	});

Finally I did however did a small test with code below and it worked.

<div class="comment more">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Vestibulum laoreet, nunc eget laoreet sagittis,
	quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
	Duis eget nisl orci. Aliquam mattis purus non mauris
	blandit id luctus felis convallis.
	Integer varius egestas vestibulum.
	Nullam a dolor arcu, ac tempor elit. Donec.
</div>

However it only worked after I manually triggered the function after the errors using the JS console. What this means is that the script for the function is being loaded correctly so we just need to identify the cause of the JS errors.

Thanks,
Shane

#2110329

Turning all plugins off would be hard for the live site and will set up a dev version if really needed.

Since the error seems to come from mediaelement js I just blocked all mediaelement files from loading. Let me know if this fixes it.

Here you can turn off JS files as needed although some might interfere with site content hidden link

#2110461

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adrian,

This should now be working however I do noticed that all the items are not getting hidden.

Currently i'm not sure why this is soo but it could be due to the amount of paragraph tags that are there. Unfortunately there is not much I can do here in terms of debugging given that this is the case.

Thanks,
Shane

#2112045

My issue is resolved now. Thank you!