jquery: On click load content only once and keep content

Question

Once a button is clicked, and it loads the content from a difference source. How would I stop it from reloading the content again, especially when I click through other buttons? Below, I have button working as tabs/toggles. I have it where once I click on a button, it loads the content in a div. The content is a bunch of checkboxes with values, which the values are different for each tab. Currently I have it where if you click on button, it brings the content, but then when you click on another button to check other checkboxes, it erases the previous content checked. Want to be able to click on button, check what I need to, go to another button to display content and go back to the original if need to.So How would I only load the content just once to keep it from uploading again and erasing the previous content?

Button HTML

    <ul class="category">
        <li><a href="#web" class="category-btn web-btn">WEBSITE</a></li>
        <li><a href="#page" class="category-btn cama-btn">PAGES</a></li>
        <li><a href="#document" class="category-btn">DOCUMENTATION</a></li>
    </ul>

Code to the container which will display the checkboxes of products the user can choose from.

    <div id="product_container" >
        <div class="website box" >
            <div class="tx-row" id='webin' >

            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >

            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >

            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>

JQuery on loading the content of checkboxes per category.

    $(document).ready(function(){   
        var $content = $('.box');
        function showContent(type) {
            $content.hide().filter('.' + type).show();
        }
        $('.category').one('click', '.web-btn', function(e) {
            $("#webin").load("/wp-content/themes/child/search-web.php");
            $("#webx"+").load("/wp-content/themes/child/search-notlikeweb.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.page-btn', function(e) {
            $("#pagein").load("/wp-content/themes/child/search-page.php");
            $("#pagex").load("/wp-content/themes/child/search-notlikepage.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.document-btn', function(e) {
            $("#documentin").load("/wp-content/themes/child/search-document.php");
            $("#documentx").load("/wp-content/themes/child/search-notlikedocument.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $(".box").hide();
    });

is the code like that, because you have a type error here `$("#webx"+").load("/wp-content/themes/child/search-notlikeweb.php");` here exactly `+"` — Jefferson, Sep 19 '17 at 21:35
You could set some sort of flag when you load the content and prevent it from loading again if the flag is set. Or you could load content only if the [element is empty](https://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery). Have you tried anything yet? — showdev, Sep 19 '17 at 21:41

score 0 · Answer 1 · answered Sep 19 '17 at 21:48

I dont think you want to be using .load() here. It would probably be better to just have 3 diffrent tabs in your HTML and toggling them instead.

So you just load the content once to each div. Maybe this will help you:

$('.toggle').on('click', function(){
  var $target = $($(this).data('target'));
  $target.siblings().removeClass('active');
  $target.addClass('active');
});

.box {
  display: none;
}

.box.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product_container" >
        <div class="website box active" >
            <div class="tx-row" id='webin' >
              Content for website box
            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >
              Content for page box
            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >
              Content for document box
            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>
    
    <button class="toggle" data-target=".website.box">Toggle website</button>
    <button class="toggle" data-target=".page.box">Toggle page</button>
    <button class="toggle" data-target=".document.box">Toggle document</button>

Like your idea, but is there a way to bring in a page? There is a total of 10 tabs, each tab have about at least 3 to most of 25 products in them. Each tab hits and pulls information from the database, which then slows the page down. I mean it loads in 10 to 12 seconds. Definitely want to shave some time off by when they click on the button it brings info up. — NicholasCAMAvision, Sep 20 '17 at 13:12

jquery: On click load content only once and keep content

1 Answers1