1
0
-1
1 answer
- 10-1
Prangon,
You would need to get all of the values into a JSON string and post that JSON to the RescueGroups.org API. The apikey you were provided would be sent, like in the publicSearch example in the API Guide:
Hope that helps,
Richard
Add your comment...
<?php $url = home_url( '/' ); $siteurl = $url; /* Template Name: RescueGroups.org API Search Template */ get_header(); global $invert_shortname; wp_enqueue_style('bootstrap-modal', get_stylesheet_directory_uri() . '/css/bootstrap-modal.css'); wp_enqueue_script('bootstrap-modalmanager', get_stylesheet_directory_uri() . '/js/bootstrap-modalmanager.js', array( 'bootstrap'), '', true); wp_enqueue_script('bootstrap-modal', get_stylesheet_directory_uri() . '/js/bootstrap-modal.js', array('bootstrap'), '', true); wp_enqueue_script('history', get_stylesheet_directory_uri() . '/js/history.js', array('bootstrap'), '', true); $pet_type = isset($_GET['type']) ? $_GET['type']: 'Dog'; $zipcode = isset($_GET['zipcode']) ? $_GET['zipcode']: ''; $breed = isset($_GET['breed']) ? $_GET['breed']: ''; $radius = isset($_GET['radius']) ? $_GET['radius']: 500; $color_q = isset($_GET['color']) ? $_GET['color']: array(); $primary_breed_first = isset($_GET['primary_breed_first']) ? $_GET['primary_breed_first']: ''; $gender = isset($_GET['gender']) ? $_GET['gender'] : array(); $gender_q = isset($_GET['gender']) ? $_GET['gender'] : array(); $age_q = isset($_GET['age']) ? $_GET['age'] : array(); $size_q = isset($_GET['size']) ? $_GET['size'] : array(); $coat_q = isset($_GET['coat_length']) ? $_GET['coat_length'] : array(); $hypoallergenic = isset($_GET['hypoallergenic']) ? $_GET['hypoallergenic'] :''; $special_q = isset($_GET['special_needs']) ? $_GET['special_needs'] :array(); $neutered_q = isset($_GET['neutered']) ? $_GET['neutered'] :array(); $grooming_q = isset($_GET['grooming_needs']) ? $_GET['grooming_needs'] :array(); $shedding_q = isset($_GET['shedding']) ? $_GET['shedding'] :array(); $ok_with_dogs = isset($_GET['ok_with_dogs']) ? $_GET['ok_with_dogs'] :''; $ok_with_cats = isset($_GET['ok_with_cats']) ? $_GET['ok_with_cats'] :''; $ok_with_kids = isset($_GET['ok_with_kids']) ? $_GET['ok_with_kids'] :''; $ok_with_seniors = isset($_GET['ok_with_seniors']) ? $_GET['ok_with_seniors'] :''; $likes_lap = isset($_GET['likes_lap']) ? $_GET['likes_lap'] :''; $timid = isset($_GET['timid']) ? $_GET['timid'] :''; $gentle = isset($_GET['gentle']) ? $_GET['gentle'] :''; $affectionate = isset($_GET['affectionate']) ? $_GET['affectionate'] :''; $playful = isset($_GET['playful']) ? $_GET['playful'] :''; $protective = isset($_GET['protective']) ? $_GET['protective'] :''; $ok_with_apartments = isset($_GET['ok_with_apartments']) ? $_GET['ok_with_apartments'] :''; $activity_q = isset($_GET['activity_level']) ? $_GET['activity_level'] :array(); $energy_q = isset($_GET['energy']) ? $_GET['energy'] :array(); $vaccinated = isset($_GET['vaccinated']) ? $_GET['vaccinated'] :''; $special_diet = isset($_GET['special_diet']) ? $_GET['special_diet'] :''; $ongoing_medical = isset($_GET['ongoing_medical']) ? $_GET['ongoing_medical'] :''; $sort_q = isset($_GET['sort']) ? $_GET['sort'] : 'distance'; $radius_array = array("1"=>"1","5"=>"5","25"=>"25","50"=>"50","100"=>"100","250"=>"250","500"=>"500","Any"=>"Any"); $gender_array = array("Male","Female"); $age_array = array("Baby","Young","Adult","Senior"); $size_array = array("Small","Medium","Large","X-Large"); $coat_array = array("Short","Medium","Long","Hairless"); $special_needs_array = array("Yes","No"); $neutered_array = array("Yes","No"); $grooming_array = array("Not Required","Low","Moderate","High"); $shedding_array = array("None","Moderate","High"); $activity_array = array("Not Active","Slightly Active","Moderately Active","Highly Active"); $energy_array = array("Low","Moderate","High"); $paged = get_query_var( 'page',1 ); $paged = ($paged < 1) ? 1 : $paged; ?> <div class="result_search_wrap"> <div class="result_search"> <form action="#" id="search_filter" name="search_filter" autocomplete="off"> <div class="form_field selectpet_field"> <select class="type" id="type" name="type" placeholder="Select Pet Type"> <!-- <option value="">Select Pet Type</option> --> <option <?php echo $pet_type =="Dog" ? "selected='selected'":'' ?> value="Dog">Dog</option> <option <?php echo $pet_type =="Cat" ? "selected='selected'":'' ?>value="Cat">Cat</option> </select> </div> <div class="form_field breeds_field"> <select class="pbr_select " id="breed" name="breed"> <option value=''>Select Breed (Optional)</option> <?php $all_breeds = load_all_breeds($pet_type); foreach ($all_breeds as $breed_obj) : ?> <option <?php echo $breed== $breed_obj['key'] ? "selected='selected'":'' ?> value="<?php echo $breed_obj['key'];?>"><?php echo $breed_obj['name'];?></option> <?php endforeach; ?> </select> </div> <div class="form_field location_field"> <div id="locationField"> <input class="zip" value="<?php echo $zipcode ?>" type="text" id="zip" name="zip" placeholder="Zip Code"> </div> </div> <div class="form_btn_field"> <input type="submit" class=" btn btn_s1 form-control" Value="Search"> </div> </form> </div> <div class="result_search_instructions"> You <em>MUST</em> enter a Zip Code in order to do a Search </div> </div> <div class="result_content"> <div class="container"> <div class="result_page_wrap row"> <form action="#" id="search_form" name="search_form" autocomplete="off"> <input type="hidden" value="search_api" name="action" /> <input type="hidden" value="<?php echo $paged; ?>" name="pg" /> <div id="filterSiderbar" class="rpw_filtering"> <div id="countRow"> </div> <div id="searchtags" style="display:none"></div> <div class="rpw_filtering_inner panel-group" id="accordion"> <div class="panel rpw_f_section"> <div class="rpw_title"><a href="#search_block" >Filter Search Results</a></div> <div id="search_block" class="rpw_content" style="display:block"> <h6>Distance</h6> <div class="full_row"> <span>Within</span> <select id="radius" name="radius" placeholder="radius" class="outerselect"> <?php foreach($radius_array as $key=>$value) : ?> <option <?php echo $key== $radius ? "selected='selected'":'' ?> value="<?php echo $key;?>"><?php echo $value ?></option> <?php endforeach ?> </select> <span>Miles</span> </div> <!-- <div class="form-section"> <h6>Breeds</h6> <div class="full_row"> <label> <input type="checkbox" <?php echo $primary_breed_first == 1 ? "checked='checked'": '' ?> value="1" name="primary_breed_first" id="primary_breed_first" class="jcf-hidden"><span class="s_checkbox"> </span> Primary Breed Matches First </label> </div> <div class="full_row"> <label > <input type="checkbox" value="1" name="purebred_only" id="purebred_only" class="jcf-hidden"> <span class="s_checkbox"> </span> Show purebred only (No) </label> </div> </div> --> </div> </div> <!-- rpw_f_section end --> <div class="panel rpw_f_section"> <div class="rpw_title"><a href="#basic_block" >THE BASICS</a></div> <div id="basic_block" class="rpw_content" style="display:block"> <h6>Gender</h6> <?php foreach($gender_array as $key=>$gender) : ?> <div class="full_row"> <label> <input type="checkbox" id="gender_<?php echo $key ?>" <?php echo in_array($gender ,$gender_q) ? "checked='checked'":'' ?> value="<?php echo $gender ?>" name="gender[]"><span class="s_checkbox"> </span> <?php echo $gender; ?></label> </div> <?php endforeach;?> <h6> Age </h6> <?php foreach($age_array as $key=>$age) : ?> <div class="full_row"> <label> <input type="checkbox" id="age_<?php echo $key ?>" <?php echo in_array($age , $age_q) ? "checked='checked'":'' ?> value="<?php echo $age ?>" name="age[]"><span class="s_checkbox"> </span> <?php echo $age; ?></label> </div> <?php endforeach;?> <div class="form-section"> <h6>Size</h6> <?php foreach($size_array as $key=>$size) : ?> <div class="full_row"> <label> <input type="checkbox" id="size_<?php echo $key ?>" <?php echo in_array($size , $size_q) ? "checked='checked'":'' ?> value="<?php echo $size ?>" name="size[]"><span class="s_checkbox"> </span> <?php echo $size; ?></label> </div> <?php endforeach;?> </div> <div class="form-section"> <h6> Coat Length </h6> <?php foreach($coat_array as $key=>$coat) : ?> <div class="full_row"> <label> <input type="checkbox" id="coat_length_<?php echo $key ?>" <?php echo in_array($coat ,$coat_q) ? "checked='checked'":'' ?> value="<?php echo $coat ?>" name="coat[]"><span class="s_checkbox"> </span> <?php echo $coat; ?></label> </div> <?php endforeach;?> </div> </div> </div> <!-- rpw_f_section end --> <!-- <div class="panel rpw_f_section"> <div class="rpw_title"><a href="#color_block" >Color</a></div> <div id="color_block" class="rpw_content"> <?php $all_colors=get_all_colors($pet_type); foreach($all_colors as $colors) : ?> <div class="full_row"> <label> <input <?php echo in_array($colors['key'],$color_q) ? "checked='checked'":'' ?> type="checkbox" value="<?php echo $colors['key'];?>" name="color[]" id="color" class="jcf-hidden"><span class="s_checkbox"> </span> <?php echo $colors['name'];?> </label> </div> <?php endforeach; ?> </div> </div> --> <!-- rpw_f_section end --> <div class="panel rpw_f_section"> <div class="rpw_title"><a href="#health_block" >Health & Care</a></div> <div class="rpw_content" id="health_block" > <div class="form-section-wrapper"> <div class="form-section"> <h6> Special Needs </h6> <?php foreach($special_needs_array as $key=>$special) : ?> <div class="full_row"> <label><input type="checkbox" id="special_needs_<?php echo $key ?>" <?php echo in_array($special ,$special_q) ? "checked='checked'":'' ?> value="<?php echo $special ?>" name="special[]"><span class="s_checkbox"> </span><?php echo $special; ?></label> </div> <?php endforeach;?> </div> <!-- <div class="form-section"> <h6>High Risk (No)</h6> <div class="full_row"> <label > <input type="checkbox" value="1" name="high_risk" id="high_risk" class="jcf-hidden"><span class="s_checkbox"> </span> Yes </label> </div> </div> <div class="form-section"> <h6>Spayed/Neutered</h6> <?php foreach($neutered_array as $key=>$neutered) : ?> <div class="full_row"> <label><input type="checkbox" id="neutered_<?php echo $key ?>" <?php echo in_array($neutered, $neutered_q) ? "checked='checked'":'' ?> value="<?php echo $neutered?>" name="neutered[]"><span class="s_checkbox"> </span><?php echo $neutered; ?> </label> </div> <?php endforeach; ?> </div> --> <!-- <div class="form-section"> <h6>Hypoallergenic</h6> <div class="full_row"> <label> <input type="checkbox" value="1" name="hypoallergenic" <?php echo "1"== $hypoallergenic_q ? "checked='checked'":'' ?> id="hypoallergenic" class="jcf-hidden"><span class="s_checkbox"> </span> Yes </label> </div> </div> --> <!-- <div class="form-section"> <h6>Grooming Needs</h6> <?php foreach($grooming_array as $key=>$grooming) : ?> <div class="full_row"> <label> <input type="checkbox" id="grooming_needs_<?php echo $key ?>" <?php echo in_array($grooming,$grooming_q) ? "checked='checked'":'' ?> value="<?php echo $grooming ?>" name="grooming[]"><span class="s_checkbox"> </span> <?php echo $grooming; ?> </label> </div> <?php endforeach; ?> </div> --> <div class="form-section"> <h6> Shedding </h6> <?php foreach($shedding_array as $key=>$shedding) : ?> <div class="full_row"> <label> <input type="checkbox" id="shedding_<?php echo $key ?>" <?php echo in_array($shedding ,$shedding_q) ? "checked='checked'":'' ?> value="<?php echo $shedding ?>" name="shedding[]"><span class="s_checkbox"> </span> <?php echo $shedding; ?> </label> </div> <?php endforeach; ?> </div> <!-- <div class="form-section"> <h6>Other Characteristics</h6> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo "1"== $vaccinated ? "checked='checked'":'' ?> name="vaccinated" id="vaccinated" class="jcf-hidden"><span class="s_checkbox"> </span> Vaccinated (no) </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo "1"== $special_diet ? "checked='checked'":'' ?> name="special_diet" id="special_diet" class="jcf-hidden"><span class="s_checkbox"> </span> Special Diet </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo "1"== $ongoing_medical ? "checked='checked'":'' ?> name="ongoing_medical" id="ongoing_medical" class="jcf-hidden"><span class="s_checkbox"> </span> Ongoing Medical </label> </div> </div> --> </div> </div> </div> <!-- rpw_f_section end --> <div class="rpw_f_section"> <div class="rpw_title"><a href="#behavior_block" >BEHAVIOR</a></div> <div class="rpw_content" id="behavior_block"> <div class="form-section-wrapper"> <!-- <div class="form-section"> <h6>House Trained</h6> <div class="full_row"> <label> <input type="checkbox" value="1" name="house_trained[]" id="house_trained[]_1" class="jcf-hidden"><span class="s_checkbox"> </span> Yes </label> </div> <div class="full_row"> <label> <input type="checkbox" value="2" name="house_trained[]" id="house_trained[]_2" class="jcf-hidden"><span class="s_checkbox"> </span> No </label> </div> </div> --> <div class="form-section"> <h6> Compatibility </h6> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $ok_with_dogs == 1 ? "checked='checked'":'' ?> name="ok_with_dogs" id="ok_with_dogs" class="jcf-hidden"><span class="s_checkbox"> </span> OK With Dogs </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $ok_with_cats == 1 ? "checked='checked'":'' ?> name="ok_with_cats" id="ok_with_cats" class="jcf-hidden"> <span class="s_checkbox"> </span> OK With Cats </label> </div> <div class="full_row"> <label data-tag_text=""> <input type="checkbox" value="1" <?php echo $ok_with_kids == 1 ? "checked='checked'":'' ?> name="ok_with_kids" id="ok_with_kids" class="jcf-hidden"> <span class="s_checkbox"> </span> OK With Kids </label> </div> <div class="full_row"> <label data-tag_text=""> <input type="checkbox" value="1" <?php echo $ok_with_seniors == 1 ? "checked='checked'":'' ?> name="ok_with_seniors" id="ok_with_seniors" class="jcf-hidden"> <span class="s_checkbox"> </span> OK With Seniors </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $ok_with_apartments == 1 ? "checked='checked'":'' ?> name="ok_with_apartments" id="ok_with_apartments" class="jcf-hidden"><span class="s_checkbox"> </span> OK With Apartments</label> </div> </div> <!-- <div class="form-section"> <h6>Temperament</h6> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $protective == 1 ? "checked='checked'":'' ?> name="protective" id="protective" class="jcf-hidden"><span class="s_checkbox"> </span> Protective </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $playful == 1 ? "checked='checked'":'' ?> name="playful" id="playful" class="jcf-hidden"><span class="s_checkbox"> </span> Playful </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $affectionate == 1 ? "checked='checked'":'' ?> name="affectionate" id="affectionate" class="jcf-hidden"><span class="s_checkbox"> </span> Affectionate </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $gentle == 1 ? "checked='checked'":'' ?>name="gentle" id="gentle" class="jcf-hidden"><span class="s_checkbox"> </span> Gentle </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $timid == 1 ? "checked='checked'":'' ?> name="timid" id="timid" class="jcf-hidden"><span class="s_checkbox"> </span> Timid </label> </div> <div class="full_row"> <label> <input type="checkbox" value="1" <?php echo $likes_lap == 1 ? "checked='checked'":'' ?> name="likes_lap" id="likes_lap" class="jcf-hidden"><span class="s_checkbox"> </span> Likes Lap</label> </div> </div> <div class="form-section"> <h6>Activity Level</h6> <?php foreach($activity_array as $key=>$activity) : ?> <div class="full_row"> <label> <input type="checkbox" id="activity_<?php echo $key ?>" <?php echo in_array($activity ,$activity_q) ? "checked='checked'":'' ?> value="<?php echo $activity?>" name="activity[]"><span class="s_checkbox"> </span> <?php echo $activity; ?> </label> </div> <?php endforeach; ?> </div> --> <div class="form-section"> <h6> Energy Level </h6> <?php foreach($energy_array as $key=>$energy) : ?> <div class="full_row"> <label> <input type="checkbox" id="energy_<?php echo $key ?>" <?php echo in_array($energy ,$energy_q) ? "checked='checked'":'' ?> value="<?php echo $energy ?>" name="energy[]"><span class="s_checkbox"> </span> <?php echo $energy; ?> </label> </div> <?php endforeach; ?> </div> <!-- <div class="form-section"> <h6>Training Level (no)</h6> <div class="full_row"> <label> <input type="checkbox" value="1" name="training_level[]" id="training_level[]_1" class="jcf-hidden"><span class="s_checkbox"> </span> Needs Training </label> </div> <div class="full_row"> <label> <input type="checkbox" value="2" name="training_level[]" id="training_level[]_2" class="jcf-hidden"><span class="s_checkbox"> </span> Has Basic Training </label> </div> <div class="full_row"> <label> <input type="checkbox" value="3" name="training_level[]" id="training_level[]_3" class="jcf-hidden"><span class="s_checkbox"> </span> Well Trained </label> </div> </div> --> </div> </div> </div> <!-- rpw_f_section end --> <div class="panel rpw_f_section"> <div class="rpw_title"><a href="#nameorg_block">Search By Name</a></div> <div id="nameorg_block" class="rpw_content"> <div class="full_row"> <input type="text" value="" name="by_name" id="by_name" placeholder="Search By Pet Name" > <button> <i class="fa fa-search"></i></button> </div> <!-- <div class="full_row"> <input type="text" value="" disabled="disabled" name="by_org" id="by_org" placeholder="Search by Organization" class="jcf-hidden"> <button> <i class="fa fa-search"></i></button> </div> --> </div> </div> <!-- rpw_f_section end --> </div> <a href="#" class="saved_search_btn btn btn_s1 savesearch_btn" disabled="disabled">Save My Search</a> <a href="#" class=" btn btn_cl_all" disabled="disabled">Clear All Search Filters</a> </div> <div class="rpw_right"> <div class="rpw_right_inner_wrap"> <div class="row"> <div class="col-md-12"> <div class="pull-right"> <div class="row"><span class="field_wrap smhide xshide"> <a href="#" class="saved_search_btn btn btn_s1 " disabled="disabled">Save My Search</a></span> <span id="mySearchBlock" class="field_wrap xshide"> <?php $my_search=get_saved_search_by_id(); if(!empty($my_search)) : ?> <select name="my_search" id="my_search" class="outerselect"> <option value="">My Saved Searches</option> <?php foreach($my_search as $search) : ?> <option data-icon="glyphicon-remove" value="<?php echo $search->SearchID ?>" <?php echo isset($_GET['searchid']) && $_GET['searchid'] == $search->SearchID ? "selected='selected'":'' ?> data-search="<?php echo $search->SearchUrl ?>"><?php echo $search->SearchName ?> </option> <?php endforeach;?> </select> <?php endif; ?> </span> <!-- <span class="field_wrap"><a href="#">Save My Search</a></span>--> <span class="field_wrap"> <select name="sort" id="sort" class="form-control"> <option <?php echo $sort_q== 'distance' ? 'selected="selected"': '' ?> value="distance" selected="selected">Sort by Distance</option> <option <?php echo $sort_q== 'recent' ? 'selected="selected"': '' ?> value="Sort by Most Recent">Sort by Most Recent</option> <!-- <option value="recency">Sort by Most Recent</option> <option value="viewed">Sort by Most Viewed</option> <option value="shared">Sort by Most Shared</option> <option value="favorited">Sort by Most Favorited</option> --> </select> </span> </div> <div id="rcountRow" > </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="loading" style="display:none"> <div class="progress progress-striped active"> <div class="bar" style="width: 100%;"></div> </div> </div> </div> </div> <div class="row"> <div id="result_container"> <div id="RequiredError"> <!-- 7-17-2015 PG Remove search instructions message and dog / cat background images... <div class="alert alert-info">Please select a Pet Type and Zip Code from the search bar at the top of the page and then click the "Search" button to begin your search. </div> <div class="col-md6 text-center"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/dog.png"/> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/cat.png"/> </div> ...and use a picture of dog background image instead <div class="col-md6 text-center"> image and styling defined in .result_content rule in custom-styles.css <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/search-api-dog-background-image.gif"/> </div> --> </div> </div> </div> <div id="paging"> </div> </div> </div> </form> </div> </div> </div> <div id="saveMe" class="modal fade" tabindex="-1"> </div> <div id="confirmModal" class="modal fade" tabindex="-1"> <div class="modal-content"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> <div id="confirmM"> <div class="modal-body"> <div class="text-center"><img src="<?php echo get_stylesheet_directory_uri();?>/images/cat-dog-icon.png"/></div> <h3> Don't Lose Track of These Pets</h3> <p class="how-to text-center"><span> Save your search</span> below and we'll assist you in future to show you the results that match your search criteria.</p><p></p> </div> <div class="modal-footer"> <button id="SavedMBtn" class="btn_s1 btn btn-primary">Save My Search</button> </div> </div> <div id="SuccessM" class="modal-body" style="display:none"> <div class="text-center"><img src="<?php echo get_stylesheet_directory_uri();?>/images/cat-dog-icon.png"/></div> <div class="alert alert-warning">Your saved search has been created.<br><br>You can view this search at any time by clicking "My Saved Searches" and selecting it from the dropdown menu.</div> </div> </div> </div> <script id="info-template" type="text/x-handlebars-template"> {{#each data}} <div class="col-md-4 item"> <div class="rpw_item"> <div class="rpw_thumb"> <a href="<?php echo $siteurl;?>/profile/{{animalID}}"><img src="{{FirstImage animalPictures}}" /></a> </div> <div class="rpw_item_detail"> <a href="<?php echo $siteurl;?>/profile/{{animalID}}"><h4>{{animalName}}</h4> </a> <a href="<?php echo $siteurl;?>/profile/{{animalID}}" class="view_profile_btn btn">View Profile</a> <span class="rpw_breed">{{animalBreed}}</span> <span class="rpw_age">{{animalGeneralAge}} <i class="fa fa-circle"></i> {{animalSex}}</span> <span class="rpw_address"><i class="fa fa-map-marker"></i> {{address locationCity locationState}}</span> <div class="bottom_btn_wrap"> <a class="share_fb facebook-link js-facebook-share" onclick="return fbShare(this)" href="#" data-picture="{{FirstImage animalPictures}}" data-link="<?php echo $siteurl;?>/profile/{{animalID}}?social_ref=facebook_share_pet_card" data-title="{{animalName}} The {{animalSpecies}}" data-name="{{animalName}}"> Share on Facebook </a> <a href="#" data-name="{{animalName}}" data-id="{{animalID}}" class="saveme_btn">Rescue Me</a> </div> </div> </div> </div> {{/each}} </script> <script type="text/javascript"> jQuery(document).ready(function() { function close_accordion_section() { jQuery('#accordion .rpw_title a').removeClass('active'); jQuery('#accordion .rpw_content').stop().slideUp(300).removeClass('open'); } jQuery('.rpw_title a').click(function(e) { // Grab current anchor value var currentAttrValue = jQuery(this).attr('href'); if (jQuery(e.target).is('.active')) { close_accordion_section(); } else { close_accordion_section(); // Add active class to section title jQuery(this).addClass('active'); // Open up the hidden content panel jQuery('#accordion ' + currentAttrValue).stop().slideDown(300).addClass('open'); } e.preventDefault(); }); }); var warning = '<div id="RequiredError"><div class="alert alert-info"> Please select a Pet Type and Zip Code from the search bar at the top of the page and then click' + ' the "Search" button to begin your search.</div><div class="col-md6 text-center"></div></div>'; function fbShare(selector) { var template = Handlebars.compile("{{name}} is available for rescue on SaveaRescue.org. View and share {{name}}'s profile and help the pet find a home!"); var html = template({ name: jQuery(selector).data('name') }); console.log(html); FB.ui({ method: 'feed', link: jQuery(selector).data('link'), caption: 'http://<?php echo $siteurl;?>/', name: jQuery(selector).data('title'), description: html, picture: jQuery(selector).data('picture') }, function(response) {}); return false; } jQuery(function($) { "use strict"; jQuery('select:not(.outerselect)').selectpicker(); var b_history = window.history; var $paged = '<?php echo $paged; ?>'; var res_modal = $('#saveMe').modal({ keyboard: false, show: false }); var confirmModal = $('#confirmModal').modal({ keyboard: false, show: false }); var ajaxObj = false; var IsProcess = false; var Zipcode = ''; var Breed = ''; var Type = ''; var s_form = $('#search_form'); var s_f_form = $('#search_filter'); function load_breed(type) { $.ajax({ type: "post", url: ajaxurl, dataType: "json", data: Formdata, beforeSend: function() { $('#loading').show(); }, success: function(data) { $('#loading').hide(); parseRespone(data); } }); } function load_type_info(type) { $.ajax({ type: "post", url: ajaxurl, dataType: "json", data: { "action": "load_type_info", "type": type }, beforeSend: function() { }, success: function(data) { var breed = data.breed; var color = data.color; var b_html = '<option value="">Select Breeds (Optional)</option>'; for (var i = 0; i < breed.length; i++) { b_html += '<option value="' + breed[i]['key'] + '">' + breed[i]['name'] + '</option>'; } $('select#breed').html(b_html); $('select:not(#my_search)').selectpicker('refresh'); var c_html = ''; for (var i = 0; i < color.length; i++) { c_html += ' <div class="full_row"><label>'; c_html += '<input type="checkbox" value="' + color[i]['key'] + '" name="color[]" id="color" class="jcf-hidden"><span class="s_checkbox"> </span>'; c_html += color[i]['name'] + '</label></div>'; } $('div#color_block').html(c_html); } }); } $('select#type').change(function() { load_type_info(this.value); }); var $container = jQuery('#result_container').masonry({ itemSelector: '.item', isFitWidth: true, /* isAnimated: true*/ }); function validateEmail(email) { var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; return re.test(email); } res_modal.on('submit', 'form', function(ev) { ev.preventDefault(); var name=$('input[name=name]',res_modal); var email=$('input[name=email]',res_modal); var subject=$('input[name=subject]',res_modal); var body=$('input[name=body]',res_modal); if(name.val() == ''){ name.css({'border':'1px solid #ff0000'}); name.focus(); return false; } else{ name.css({'border':''}) } if(email.val() == ''){ email.css({'border':'1px solid #ff0000'}); email.focus(); return false; } else if(!validateEmail(email.val())){ email.css({'border':'1px solid #ff0000'}); email.focus(); return false; } else { email.css({'border':''}) } if(subject.val() == ''){ subject.css({'border':'1px solid #ff0000'}); subject.focus(); return false; } else { subject.css({'border':''}); } if(body.val() == ''){ body.css({'border':'1px solid #ff0000'}); body.focus(); return false; } else { body.css({'border':''}); } $.ajax({ type: "post", url: ajaxurl, data: $(this).serializeArray(), beforeSend: function() { var html="<div class='text-center'><p>You've successfully sent your message.</p></div>"; res_modal.find('.modal-body').html(html); res_modal.find('.modal-footer').hide(); }, success: function() { } }); return false; }); $container.on('click', 'a.saveme_btn', function() { $('body').modalmanager('loading'); res_modal.load(ajaxurl, { action: "load_save_modal", "name": $(this).data('name'), "id": $(this).data('id') }, function() { res_modal.modal(); }); return false; }); function intTags() { $('#filterSiderbar input,#filterSiderbar select,select#sort').each(function(e, t) { if (!IsProcess) return false; var type = $(this).prop('type'); if (type == 'checkbox' && $(this).is(':checked')) { buildTags($(this)); } else if (type == 'text' && $(this).val() != '') buildTags($(this)); else if (type == 'select-one' && $(this).val() != '') buildTags($(this)); }) } s_f_form.submit(function(ev) { ev.preventDefault(); var zipcode = $('#zip').val(); var a_type = $('#type').val(); if (zipcode == '') { // $container.html(warning); IsProcess = false; return false; } else if (a_type == '') { // $container.html(warning); IsProcess = false; return false; } Zipcode = zipcode; Type = a_type; Breed = $('#breed').val(); IsProcess = true; intTags(); send_ajax_call(); return false; }); Handlebars.registerHelper('address', function(city, state) { var html = city; if (city != '' && city != null) html += ', '; if (state != null) html += state; return html; }); Handlebars.registerHelper('FirstImage', function(images) { return images.length && images[0].urlSecureFullsize; }); function Paging($total) { var $limit = 15; if ($total && $total <= 0) { $('#paging').html(''); } var $last = Math.ceil($total / $limit); var $links = 5; var $paged = parseInt($('input[name=pg]').val()); var $start = (($paged - $links) > 0) ? $paged - $links : 1; var $end = (($paged + $links) < $last) ? parseInt($paged) + parseInt($links) : $last; var $html = '<ul class="pagination">'; var $class = ($paged == 1) ? "disabled prev" : "prev"; $html += '<li class=" + $class + "><a data-page="' + ($paged - 1) + '" href="?page=' + ($paged - 1) + '">Previous</a></li>'; if ($start > 1) { $html += '<li><a data-page="1" href="&page=1">1</a></li>'; $html += '<li class="disabled"><span>...</span></li>'; } for (var $i = $start; $i <= $end; $i++) { $class = ($paged == $i) ? "active" : ""; $html += '<li class=" + $class + "><a data-page="' + $i + '" href="?page=' + $i + '">' + $i + '</a></li>'; } if ($end < $last) { $html += '<li class="disabled"><span>...</span></li>'; $html += '<li><a data-page="' + $last + '" href="?page=' + $last + '">' + $last + '</a></li>'; } $class = ($paged == $last) ? "disabled last" : "last"; $html += '<li class=" + $class + " ><a data-page="' + parseInt($paged + 1) + '" href="?page=' + parseInt($paged + 1) + '">Next</a></li>'; $html += '</ul>'; $('#paging').html($html); } $('#paging').on('click', 'a', function(ev) { ev.preventDefault(); var page = $(this).data('page'); $('input[name=pg]').val(page); var li = $(this).parent(); li.siblings().removeClass('active').end().end().addClass('active'); $("html, body").animate({ scrollTop: $("#main").offset().top }, 500); send_ajax_call(); return false; }) function parseRespone(res) { var source = $("#info-template").html(); $('#countRow,#rcountRow').html(res.foundRows + ' Matches '); console.log(res,res.foundRows); if (!res.foundRows || res.foundRows <= 0) { $container.empty().html('<div class="col-xs-12"><div class="alert alert-danger">No Record Found</div></div>'); $('#paging').html(''); $container.masonry('reloadItems'); $container.masonry('layout'); return false; } var template = Handlebars.compile(source); var html = template(res); $container.empty().html(html).imagesLoaded(function() { $container.masonry("reloadItems"); $container.masonry(); });; Paging(res.foundRows); } var TagList = []; var tagContainer = $('#searchtags'); $('.btn_cl_all').click(function() { $('#filterSiderbar .panel-group').find("input:text, select, textarea").val(""); $('#filterSiderbar .panel-group').find("input:radio, input:checkbox").prop("checked",false) tagContainer.empty().hide(); TagList=[]; $('#filterSiderbar').find("#radius").val(500).trigger('change'); $('#sort').val("distance").trigger('change'); send_ajax_call(); return false; }); function removeTag(selector) { for (var i = 0; i < TagList.length; i++) { if (TagList[i]) { if (TagList[i].id == 'a_' + selector.attr('id')) { TagList[i].close(); selector.prop('checked', false); } } } } function getTagIndex(selector) { var Index = -1; for (var i = 0; i < TagList.length; i++) { if (TagList[i]) { if (TagList[i].id == 'a_' + selector.attr('id')) { Index = i; break; } } } return Index; } function buildTags(tags) { var selector = $(tags); var a_id = 'a_' + selector.attr('id'); console.log(a_id, 'id'); var $index = -1; if(!tagContainer.is(':visible')) tagContainer.show(); switch (selector.prop('type')) { case "checkbox": if (selector.is(':checked')) { var tag = $('<a/>', { id: a_id, class: "closeable", click: function() { $(this).remove(); send_ajax_call(); selector.prop('checked', false); } }).html(selector.parent().text() + '<i class="fa fa-remove"></i>'); TagList.push({ text: $(this).text(), id: a_id, close: function() { tag.remove(); send_ajax_call(); selector.prop('checked', false); } }); tagContainer.append(tag); } else { removeTag(selector); } break; case "text": if (($index = getTagIndex(selector)) != -1) { if (selector.val() == '') { TagList[$index].close(); selector.val(''); send_ajax_call(); } else { $('#' + TagList[$index].id).html(selector.prop('value') + '<i class="fa fa-remove"></i>'); send_ajax_call(); } } else { var tag = $('<a/>', { id: id, class: "closeable", click: function() { $(this).remove(); selector.prop('value', ''); send_ajax_call(); } }).html(selector.attr('placeholder') + '<i class="fa fa-remove"></i>'); TagList.push({ text: selector.text(), id: a_id, close: function() { tag.remove(); selector.prop('value', ''); send_ajax_call(); } }); tagContainer.append(tag); } break; case "select-one": var html= selector.prop('value'); if(selector.prop('id') =="radius"){ html= selector.prop('value') + " Miles "; } else if(selector.prop('id') =="sort"){ html=$(selector).find(":selected").text(); } else html= selector.prop('value'); console.log(html,selector.prop('value'),'value' ); if (($index = getTagIndex(selector)) != -1) { console.log($('#' + TagList[$index].id), TagList[$index]); $('#' + TagList[$index].id).html(html); } else { var tag = $('<a/>', { id: a_id, class: "closeable", click: function() { } }).html(html); TagList.push({ text: selector.text(), id: a_id, close: function() { } }); tagContainer.append(tag); } } } // console.log(s_form,s_form.find('input,select')); $('#filterSiderbar').on('change', 'input,select', function() { buildTags(this); if ($(this).val() == '') return; send_ajax_call(); }); $('select#sort').on('change', function() { buildTags(this); if ($(this).val() == '') return; send_ajax_call(); }); s_form.bind('submit', function(ev) { ev.preventDefault(); send_ajax_call(); return false; }); function send_ajax_call() { if (!IsProcess) return false; var Formdata = s_form.serializeArray(); Formdata.push({ name: "zipcode", value: Zipcode }); Formdata.push({ name: "type", value: Type }); Formdata.push({ name: "breed", value: Breed }); $('.btn').removeAttr('disabled'); if (ajaxObj) ajaxObj.abort(); var str = $.param(Formdata); /* if html5 browser */ if (b_history.pushState && b_history.replaceState) b_history.pushState(null, null, '?' + str); else History.pushState(null, null, '?' + str); ajaxObj = $.ajax({ type: "post", url: ajaxurl, dataType: "json", data: Formdata, beforeSend: function() { $('#loading').show(); $('#paging').html(''); $container.empty(); }, success: function(data) { $('#loading').hide(); parseRespone(data); } }); } var radius_search = $('select#radius').selectpicker({ 'container': 'body' }) var my_search = false; function chageSearch() { /*var option = $(this).find(":selected"); var url = $(option).data('search'); url += '&searchid=' + $(this).val(); window.location.href = url; return false;*/ } if ($('select#my_search').length) { my_search = $('select#my_search').selectpicker({ 'container': 'body' }).on('change', chageSearch); } $('a.saved_search_btn').click(function(ev) { ev.preventDefault(); $('#SuccessM',confirmModal).hide(); $('#confirmM',confirmModal).show(); confirmModal.modal('show'); return false; }); $('#SavedMBtn').click(function() { var url = window.location.href; var selector = $(this); ajaxObj = $.ajax({ type: "post", url: ajaxurl, dataType: "json", data: { "action": "save_search", "url": url, "type": $('#type').val() }, beforeSend: function() { //selector.text('Saving...'); $('#confirmM',confirmModal).hide(); $('#SuccessM',confirmModal).show(); }, success: function(data) { $('#confirmM',confirmModal).hide(); $('#SuccessM',confirmModal).show(); if (!my_search) { var select = '<select name="my_search" id="my_search" class="outerselect">' + '<option value=""> My Saved Searches</option>'; select += '<option data-icon="glyphicon-remove" value="' + data.id + '" data-search="' + data.url + '">' + data.name + '</option>'; select += '</select>'; my_search = $(select).appendTo($('#mySearchBlock')); my_search.selectpicker({ 'container': 'body' }).on('change', chageSearch); // mySearchBlock } else { my_search.append('<option data-icon="glyphicon-remove" value="' + data.id + '" data-search="' + data.url + '">' + data.name + '</option>'); my_search.selectpicker('refresh'); } // confirmModal.modal('hide'); } }); return false; }); s_f_form.submit(); }); </script> <?php /* e61718*/ get_footer(); ?>How do I use my API key and implement the data that I have into this template? Sorry for the long code.