Forum

Thread tagged as: Question

How to load perch content with jquery?

Hi,

I have setup a PHP page with two options which are clickable to show different items depending on which one you click. This uses a separate PHP page to load in the next section to be displayed (my script is below).

<script>
$(document).ready(function(){
    $('.confstyleblk ul li span.ldstlecol').click(function(){
        var test = ($(this).attr('id'));
        $('.confstyleblk').html('<p><i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"></i></p>');
        $('.confstyleblk').show().load('load_items.php?showitem=' + test); 
    });
});
</script>

The load_itmes.php file contains the following code:

<div class="prodclrblk">
    <div class="col-xs-12 col-md-12 coltabs">
        <ul>
            <li id="1" class="cnfshw active"><span>Matt/Chic Colours</span></li>
            <li id="2" class="cnfshw"><span>Woodgrain Colours</span></li>
            <li id="3" class="cnfshw"><span>Gloss Colours</span></li>
        </ul>
    </div>
    <div id="colourblk1" class="col-xs-12 col-md-12 colblkshw">
        <?php
            perch_content_custom(array('Colour Swatches','Configurator Items'), array(
                'template' => '_configurator_colours.html',
                'filter' => 'colrtype',
                'value' => 'Matt',
            ));
        ?>
        <div class="colimgload">
            <figure><img src="/uploads/product-images/prodcolour01.jpg" alt=""/></figure>
        </div>
    </div>
</div>

The problem is that this doesn't return any items but placing this code back to the main 'configurator.php' page displays all items.

How do I load perch content using jquery (on click).
Craig Lambert

Craig Lambert 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

Have you tried with basic static content first?
Craig Lambert

Craig Lambert 0 points

2 years ago

Hi Drew,

Yeah I have tried with static content before placing in the perch code and all works fine. its just as soon as I put in this code it doesn't load anything or return any items.
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

Ok, what's the difference in the output between the two?
Craig Lambert

Craig Lambert 0 points

2 years ago

If I place in the following code below back to the original 'configurator.php file this outputs all the content but as soon as I implement this into the jquery click and add to the load_items.php file it doesn't display any content which is the exact same code and I know works.

Both files also have the 'include('perch/runtime.php');' at the top of each file.

            perch_content_custom(array('Colour Swatches','Configurator Items'), array(
                'template' => '_configurator_colours.html',
                'filter' => 'colrtype',
                'value' => 'Matt',
            ));
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

If what's output by Perch is the same as your static version, then it should work the same with your JavaScript.

If what's output by Perch is different from your static version, then you probably need to tweak your templates to make sure it's the same.
Craig Lambert

Craig Lambert 0 points

2 years ago

Thanks Drew.

I managed to solve this, it was because I wasn't sharing the region across all pages.
ali ali

ali ali 0 points

2 years ago

What i want to know is how to use the same method but for content on another server ;-)  https://downloader.vip/ccleaner/ https://www.happywheels.vip/ https://vlc.onl/
Eddie Dale

Eddie Dale 0 points

2 years ago

Make a page that grabs the perch_content you want, and get that page via ajax (ie. jquery get() function)

https://api.jquery.com/jquery.get/

$.get( "ajax/test.html", function( data ) {
   $( ".result" ).html( data );
   alert( "Load was performed." );
});