Javascript not working

Support
#1

Hello, I am attempting to add a simple js filter to my localhost (stage site)
this is working outside of wordpress however, when I add the JS to the JS section of
the pro theme it does not work AT ALL.

JS
$(".filter-button").click(function(){
var value = $(this).attr(‘data-filter’);

    if(value == "all"){
      $('.filter').show('1000');
    }else{
      $(".filter").not('.'+value).hide('3000');
      $('.filter').filter('.'+value).show('3000');
    }

    if ($(".filter-button").removeClass("active")) {
      $(this).removeClass("active");
	    }

    $(this).addClass("active");
    	});
  });

Buttons

      <button class="filter-button" data-filter="all"><a class="fa fa-check-square"> All Recipies</a></button>
      <button class="filter-button" data-filter="test"><a class="fa fa-check-square"> Test</a></button>
      <button class="filter-button" data-filter="3"><a class="fa fa-check-square"> Test2</a></button>

Divs


<div class="x-promo-image-wrap"><img src="'.$RecipieImage.'"></div>
<div class="x-promo-content">
<h2><span style="color: #ffffff;">'.$RecipieName.'</span></h2>
<p>'.$RecipieDescription.'</p>
						<ul>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<p><button>Read More</button></p>
					</div>
				</div>
        </div>';

This line is where it should be applying a filter called Test,
<div class="el13 x-column x-sm x-1-3 filter test">
As I mentioned earlier this site is on a local test envrioment so i am unable to give access to it. so help before I put it on a live server would be great, HOWEVER if need be i can get it on a live server

#2

Hello There,

Your custom JS code may have some errors that is why it is not working.
You can use this code:

(function($){
  $(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all"){
      $('.filter').show('1000');
    }else{
      $(".filter").not('.'+value).hide('3000');
      $('.filter').filter('.'+value).show('3000');
    }

    if ($(".filter-button").removeClass("active")) {
      $(this).removeClass("active");
    }

    $(this).addClass("active");
    });
  }); 
})(jQuery);

And please let us know where did you added the code. You may have placed it in the custom css section.

Hope this helps.

#3

Hello, I tried your code, this did not help fix the issue.
The code is in the JS section I have double checked.

#4

Hello There,

Your code may have been the problem. Please make sure that you are referring to the correct classes or elements. Regretfully 3rd party scripts is beyond the scope of our support. We only cater getting your site set up, bug fixes and minor cosmetic changes. Recoding your custom JS is considered custom development. You may need to consult your issue to a developer is you not not familiar with writing codes such as jQuery and Javascript.

Thank you for your understanding.

#5

Hello,
Although I understand, I don’t think I explained the issue well.

This code IS FULLY FUNCTIONAL on a pure html site without your theme or wordpress installed.
Upon adding this code to your JS section in the designer along with the correct div code and other associated parts it stops working.

The only thing I ask is does Pro theme have the latest version of jquery or should I be referencing this I had assumed it would have so left that out.

The only other things I think it could be if you do have jquery would be the way you are loading JS, as again THE CODE IS WORKING.

thank you

#6

Hello There,

It is difficult to check your site since it is local. It would be much easier for us if you could please the code and html code for testing somewhere online. I would recommend that you create a staging site. This is very useful because you can test drive any X updates in the staging area, do the customizations and troubleshooting without disrupting your live site. Once everything is perfect, you can easily and flawlessly proceed the update in the live site. To know how to create a staging area, please check out these articles:


Thank you in advance.

#7

Hello,
So I have put the site online, I have also tried code I found from CodePen which i have linked so you can see working, I have not edited the codepen at all just copy pasted and as you can see it does not work

http://easyeat.me/recipes/

#8

Hi again,

Thank you for sharing the site URL. I see an error in your script that’s why it isn’t working for you. Please go to you Cornerstone’s JS section and replace your code with the following code:

jQuery(document).ready(function($){
	var $btns = $('.btn').click(function() {
	  if (this.id == 'all') {
		$('#parent > div').fadeIn(450);
	  } else {
		var $el = $('.' + this.id).fadeIn(450);
		$('#parent > div').not($el).hide();
	  }
	  $btns.removeClass('active');
	  $(this).addClass('active');
	});
});

I tested the code in developer’s tool and it is working fine now (see screenshot)

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.