Using Code without Form

[christalv]

Hello,

I would love to implement this on a site I am working on but I have limited coding experience. How would I implement the demo without a form?

Thanks!

[cferdinandi]

@christalv This should get you started (and I will update the documentation with this as well—thanks for bringing this up). If you still need help, please reach out to me about some custom services.

(Don't forget to include the scripts on the page.)

<div data-petfinder-app="aside"></div>
<div data-petfinder-app="main"><a href="#">Visit us on Petfinder to view our list of available animals.</a></div>

<div data-petfinder-template="all" hidden>
    <div class="{{classes}}">
        <div data-petfinder-img-container>
            <img src="{{photo.1.medium}}">
        </div>
        <h2>{{name}}</h2>
        <p><a data-petfinder-async href="{{url.pet}}">View Full Profile</a></p>
        <hr>
    </div>
</div>

<div data-petfinder-template="one" hidden>
    <p><a data-petfinder-async href="{{url.all}}">&larr; Back to Full List</a></p>
    <div data-petfinder-img-container>
        <div data-petfinder-img></div>
        <p>
            <a data-petfinder-img-toggle="{{photo.1.large}}" href="#"><img src="{{photo.1.thumbnail.large}}"></a>&nbsp;
            <a data-petfinder-img-toggle="{{photo.2.large}}" href="#"><img src="{{photo.2.thumbnail.large}}"></a>&nbsp;
            <a data-petfinder-img-toggle="{{photo.3.large}}" href="#"><img src="{{photo.3.thumbnail.large}}"></a>
        </p>
    </div>
    <h2>{{name}}</h2>
    <p>
        Age: {{age}}<br>
        Gender: {{gender}}<br>
        Size: {{size}}
    </p>
    <div>{{description}}</div>
</div>

<div data-petfinder-template="aside-all" hidden>
    <strong>Age:</strong>
    {{checkbox.ages.toggle}}

    <strong>Size:</strong>
    {{checkbox.sizes}}

    <strong>Gender:</strong>
    {{checkbox.genders}}

    <strong>Breeds:</strong>
    {{checkbox.breeds.toggle}}
</div>

<script>
    ;(function (window, document, undefined) {

        'use strict';

        // Feature test
        var supports = !!document.querySelector && !!window.addEventListener && !!window.localStorage && !!Array.prototype.indexOf;
        if ( !supports ) return;

        petfinderAPI.init({
            key: '[YOUR PETFINDER API KEY HERE]', // Learn more: https://www.petfinder.com/developers/api-key
            shelter: '[YOUR SHELTER ID]',
            callback: function () {
                petfinderSort.init(); // If you want to use the filtering plugin
                petfinderImgToggle.init(); // If you want to use the image toggle script
            }
        });

    })(window, document);
</script>

[christalv]

Hi Chris,

Thank you so much for getting back to me.

I tried what you sent over, and I actually had tried that same thing before, removing the form, but it does seem to work. I have it up at http://www.christalvass.com/hhs/.

Before you update the documentation, I think something may be missing, or it could be that I'm missing something or not implementing it right.

​Thanks so much for helping! I think the script you have created is great and will certainly help a lot of people looking to help non profits with their sites.

Christal Vass

On Fri, Nov 20, 2015 at 8:12 AM, Chris Ferdinandi notifications@github.com wrote:

@christalv https://github.com/christalv This should get you started (and I will update the documentation with this as well—thanks for bringing this up). If you still need help, please reach out to me about some custom services http://gomakethings.com.

(Don't forget to include the scripts on the page.)

Visit us on Petfinder to view our list of available animals.

— Reply to this email directly or view it on GitHub https://github.com/cferdinandi/petfinderAPI4everybody/issues/27#issuecomment-158399080 .

[cferdinandi]

Looking at your demo page, you're calling the function before you actually load the scripts that power it on the page.

Do this instead (I removed your API key from the example below):

<script src="dist/js/petfinderAPI4everybody.js"></script>
<script src="dist/js/petfinderSort.js"></script>
<script src="dist/js/petfinderImgToggle.js"></script>
<script>
    ;(function (window, document, undefined) {

        'use strict';

        // Feature test
        var supports = !!document.querySelector && !!window.addEventListener && !!window.localStorage && !!Array.prototype.indexOf;
        if ( !supports ) return;

        petfinderAPI.init({
            key: '[YOUR API KEY]', // Learn more: https://www.petfinder.com/developers/api-key
            shelter: 'VA155',
            callback: function () {
                petfinderSort.init(); // If you want to use the filtering plugin
                petfinderImgToggle.init(); // If you want to use the image toggle script
            }
        });

    })(window, document);
</script>

[christalv]

Thank you so much! I also noticed that the sorting or filtering part of the demo doesn't seem to work here http://cferdinandi.github.io/petfinderAPI4everybody/, FYI

Thanks Again Christal

On Fri, Nov 20, 2015 at 11:45 AM, Chris Ferdinandi <notifications@github.com

wrote:

Looking at your demo page, you're calling the function before you actually load the scripts that power it on the page.

Do this instead (I removed your API key from the example below):

— Reply to this email directly or view it on GitHub https://github.com/cferdinandi/petfinderAPI4everybody/issues/27#issuecomment-158455665 .

[cferdinandi]

No problem. I think that's related to this bug, which I'll be fixing soon.