#StackBounty: #plugins #ajax #gallery Theme is Causing Ajax Conflicts for a plugin I cant identify it

Bounty: 100

This is a bit of a odd one, It is plugin related but sadly 1 month without a response from the Owner of the Plugin im turning to the community

The Problem is that I have this plugin "Visual Portfolio" Which uses Ajax to filter and load Images for a Gallery

Now After hours of fiddling,removing jq , removing plugins trying to pinpoint the issue, I’ve kinda figured out the plugin’s ajax stops working all together whenever I call my footer in my Theme

So whenever I say It breaks even if I remove every single line of Code from the Footer except for <?php wp_footer(); ?>

Im at a complete loss ive removed any and all jq from the site all plugins and still, but for some reason It works on the Twenty-Twenty Theme so I know its a Conflict,

Do you guys maybe have some advice in regards to General Debugging for this kind of thing Before everyone jumps into arms and says this is not plugin specific support Im asking for a General Thing of how would you go about trying to resolve this your self, Please let me know of any code you might need.

Small note the Gallery Is Populated from a Post type and the featured images of that Post type.

Ill add my Footer, And a page where the gallery appears,

<?php wp_footer(); ?>
<script>
const backToTopButton = document.querySelector("#back-to-top-btn");

window.addEventListener("scroll", scrollFunction);

function scrollFunction() {
  if (window.pageYOffset > 300) { // Show backToTopButton
    if(!backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnExit");
      backToTopButton.classList.add("btnEntrance");
      backToTopButton.style.display = "block";
    }
  }
  else { // Hide backToTopButton
    if(backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnEntrance");
      backToTopButton.classList.add("btnExit");
      setTimeout(function() {
        backToTopButton.style.display = "none";
      }, 250);
    }
  }
}

backToTopButton.addEventListener("click", smoothScrollBackToTop);

// function backToTop() {
//   window.scrollTo(0, 0);
// }

function smoothScrollBackToTop() {
  const targetPosition = 0;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 750;
  let start = null;
  
  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};    
</script>
<footer>
    <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
    <section class="footer ">
        <div class="container ta-c">
        <div class="footer-top">
            <div class="row img-row">
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-1.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-2.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-3.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-4.png">
                </div>
            </div>
            <div class="row" style="width: 100%">
                <div class="col-md-3 footer-block">

                    <h5>NEW BUSINESS INQUIRIES</h5>
                    <h2 ></h2>
                    <p class="railway-simple mg-remove">RESEARCH & MARKETING MANAGER</p>
                    <a class="footer-mail" href="mailto:"></a>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>CALL US</h5>
                    <a  href="tel:">(</a>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>POP IN FOR A CHAT</h5>
                    <a  href=""></a>
                    <p class="railway-simple" ></p>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>FOLLOW US</h5>
                   <a style="margin: 10px;" href=""> <i class=" fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
            <div class="parent-footer">
                <h2>SITEMAP</h2>
            </div>

        <div class="footer-sitemap row">

            <div class="col-md-2">
                <h3>We are.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/lionremaster">Home</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/about/">We are</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/about">About</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/theteam">Meet the team</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>We do.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/wedo/#services">Services</a></li>
                    <li><a  href="<?php echo get_home_url(); ?>/partners">Partners</a></li>

                    <li><a>Freebies</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>Why us.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/whyus">Why us</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h3>Who we work with.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/brandstories">Brand Stories</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/gallery">Gallery</a></li>
                    <li><a>Case Studies</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/news">Industry News</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>Get in touch.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/getintouch">Contact us</a></li>
                </ul>
            </div>

         </div>
        </div>
    </section>
</footer>
<?php
get_header();
?>
<section class="brand-main">
    <div class="container">
        <div class="brand-header">
            <img class="line-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-10.png">
            <h4 style="letter-spacing: 2px;" class="railway-regular mg-top-s">BRAND STORIES</h4>
            <h1 class="railway-extra ">A PRIDE OF
                BRAND STORIES
                TO TALK ABOUT</h1>
            <img class="line-img mg-top-s" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-10.png">
        </div>
        <div class="brand mg-top-m">
            <?php
            echo do_shortcode('[visual_portfolio id="191" class=""]');
            ?>

            </div>
    </div>
</section>
<?php
get_footer();
?>


Also the jq file for my site:

function openTab(evt, cityName) {
    let buttonIndex = -1;
    const $clickedButton = $(evt.target); //Using Jquery to get the button which was clicked
    const tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    if($clickedButton.hasClass('tablinks')){
        $('.tablinks').each(function(i, el){
            if($(el).is($clickedButton)){
                buttonIndex = i;
                return false; //break from the each now that we have the button index
            }
        });
    } else {
        $('.tablinks-title').each(function(i, el){
            if($(el).is($clickedButton)){
                buttonIndex = i;
                return false; //break from the each now that we have the button index
            }
        });
    }

    //Remove active class from buttons before adding to newly selected
    $('.tablinks').removeClass('active');
    $('.tablinks-title').removeClass('active');

    //Add the active class to the corresponding buttons at the clicked index for both
    //Number and title
    $($('.tablinks')[buttonIndex]).addClass('active');
    $($('.tablinks-title')[buttonIndex]).addClass('active');

    document.getElementById(cityName).style.display = "block";
  

}
  document.getElementById("defaultOpentitle").click();
    document.getElementById("defaultOpen").click();

filterSelection("all")
function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
}

function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
    }
}

function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btnz");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}







Adding on note’s

Im going to provide a site link you can have a look at the Galleries and you’ll see theres no functionality in relation to my ajax Im at the point where im willing to prove complete copies of the site just to get some assistance, I have 2 sites now that are using this plugin they share the same theme template theres a conflict thats neglecting all my ajax and I just dont know what it is anymore

Please let me know if there are any details you’d need

http://azipit.co.za/lionremaster/

My Functions php on my new site just for an example so you can see how little im using and theres still a conflict

<?php 

function wpt_theme_styles() {
    
    wp_enqueue_style( 'fontawesome_css', 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/jquery-ui.min.css' );

}
add_action( 'wp_enqueue_scripts', 'wpt_theme_styles' );

function my_scripts() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', false );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', false );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/script.js', array('jquery'), '', false );  
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Heres a Screenshot of the new Site’s Structure this is on local host ILL post a image of the Site tech "In qeustion" as-well
enter image description here

enter image description here

I have plugins checking for errors but there are none, So I dont know what to post in that regard

Found one warning in logs now:

Warning: session_start(): Cannot start session when headers already sent in /home/azipitfy/public_html/lionremaster/wp-content/plugins/visual-portfolio/classes/class-get-portfolio.php on line 25

Here is a Zipped file with a local copy of the theme template I kinda use
and the Logins for them are:
U:Roy
P:Test

The Google Drive link

The only difference here beyond my other site would be extra pages and css so this would give a great example of the issue im having


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.