JOB SEEKERS || hubdb with Load more and search
{% set tableId = 966966 %}
{% set dynamic_page_hubdb_table_id = 966966 %}
{% if dynamic_page_hubdb_row %}
<!--- Post Page Code start --->
<div class="job-seeker-post-page-group">
<div class="custom-job-left-container">
<div class="jod-heading">
<h1 class="job-description">Job Description</h1>
<div class="custom-btn-share-container">
<div class="share-outlets clearfix">
<a class="mail" target="_blank" href="mailto:?subject={{dynamic_page_hubdb_row.hs_name}}&body=Check out this {{dynamic_page_hubdb_row.hs_name}} job: {{ content.absolute_url }}" class="product_share_email"><i class="ss-mail"></i></a>
<a class="twitter" target="_blank" href="https://twitter.com/share?url={{ content.absolute_url }}" class="product_share_twitter"><i class="fa-twitter"></i></a>
<a href="https://www.facebook.com/sharer.php?u={{ content.absolute_url }}" class="post_share_facebook" target="_blank"><i class="fa-facebook"></i></a>
<a class="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={{ content.absolute_url }}" target="_blank"><i class="fa-linkedin"></i></a>
</div>
<button name="share" data-ng-click="detail.open = !detail.open;" class="ng-binding"><i class="bhi-share"></i> Share</button>
</div>
<div class="job-left-container-decription">{{ dynamic_page_hubdb_row.job_description }}</div>
</div>
</div>
<div class="custom-job-right-container">
<p class="custom-date-format">Added - {{ dynamic_page_hubdb_row.added_on|datetimeformat('%m/%d/%y') }}</p>
<h1 class="title">{{dynamic_page_hubdb_row.hs_name}}</h1>
<p class="designation">{{ dynamic_page_hubdb_row.designation }}</p>
<p class="location"><span>{{ dynamic_page_hubdb_row.location }}</span><span class="card-separator">|</span><span>{{ dynamic_page_hubdb_row.hiring_process }}</span></p>
<a href="#" class="custom-apply-group">Apply</a>
<div class="popup-form">
<div class="popup-form-inner">
<div class="custom-form-details">
<h1 class="form-title">{{dynamic_page_hubdb_row.hs_name}}</h1>
<p class="form-designation">{{ dynamic_page_hubdb_row.designation }}</p>
<p class="form-location"><span class="location">{{ dynamic_page_hubdb_row.location }}</span><span class="card-separator">|</span><span class="hiring">{{ dynamic_page_hubdb_row.hiring_process }}</span></p>
</div>
<div class="form-container">
{% form
form_to_use="{{ module.form.form_id }}"
response_response_type="{{ module.form.response_type }}"
response_message="{{ module.form.message }}"
response_redirect_id="{{ module.form.redirect_id }}"
response_redirect_url="{{module.form.redirect_url}}"
gotowebinar_webinar_key="{{ module.module.form.gotowebinar_webinar_key }}"
%}
</div>
</div>
</div>
<a href="/job-seekers" class="category-filter ng-binding">View all jobs in this category<i class="bhi-arrow-right"></i></a>
</div>
</div>
<!--- Post Page Code Ends --->
{% elif dynamic_page_hubdb_table_id %}
<!--- Listing Page Code Starts --->
<!-- Search Code Starts -->
<!-- set the filter by drop down, search bar, and submit button -->
<div class="job-seaker-search">
<form id="form_id" method="get">
<div>
<div>
<input name="name" type="text" id="search-by" class="autocomplete" placeholder="Keyword Search">
</div>
</div>
</form>
</div>
<br>
<!-- sets the different query parameters using submitted input for hubdb query -->
{% set page_size = 20 %} {# Define Page Size Here #}
{% set rowCount = hubdb_table(tableId).row_count %}
{% set pageCount =(rowCount/page_size)|round(0, 'ceil') %}
{% if request.query_dict.page %}
{% set page_num = request.query_dict.page|int %}
{% else %}
{% set page_num = 1 %}
{% endif %}
{% set offsetNum = (page_num-1)*page_size %}
{% if request.query_dict.name %}
{% set filteredSeries = request.query_dict.name|urlencode %}
{% set filterData = '&hs_name__icontains='+filteredSeries+'&orderBy=-added_on' %}
{% else %}
{% set filterData = 'orderBy=-added_on&offset='+offsetNum+'&limit='+page_size %}
{% endif %}
{% set jobList = hubdb_table_rows(tableId,filterData) %}
{% if jobList|length == 0 %}
<div class="no-data-message" >
<h2 class="ng-binding">Oh No!</h2>
<h3 class="ng-binding">Looks like there are no jobs matching the criteria.</h3>
<p class="ng-scope"><a href="/job-seekers">Clear the criteria and search again.</a></p>
</div>
{% else %}
<div class="jobs-listing-wrapper">
{% for row in jobList|sort(True, False, 'added_on') %}
<div class="card-wrapper ng-scope">
<a class="card slide-up-item" href="{{ request.path }}/{{ row.hs_path }}">
<span class="card-date ng-binding ng-scope">Added - {{ row.added_on|datetimeformat('%m/%d/%y') }}</span>
<span class="card-title-category">
<span class="card-title ng-binding">{{row.hs_name}}</span>
<span class="card-category ng-binding">{{ row.designation }}</span>
</span>
<span class="card-location ng-binding">{{ row.location }}</span>
<span class="card-separator">|</span>
<span class="card-type ng-binding">{{ row.hiring_process }}</span>
<span class="card-description ng-binding">{{ row.job_description|truncatehtml(150) }}</span>
<i class="bhi-arrow-right"></i>
</a>
</div>
{% endfor %}
</div>
{% endif %}
<!-- Search Codes End --->
{% set last_page = page_num - 1 %}
{% if page_num <= 1 %}
{% set last_page = "" %}
{% endif %}
{% set next_page = page_num + 1 %}
{% if page_num >= pageCount %}
{% set next_page = "" %}
{% endif %}
{% set paginationPath = request.path+'?page=' %}
<div class="jobs-pagination">
{% if next_page and not request.query_dict.name %}<a class="next-posts-link load-more" href="{{ paginationPath }}{{ next_page }}" id="loadMore" data-total-page-count="{{ pageCount }}">Load more...</a>{% endif %}
</div>
<!--- Listing Page Code Ends --->
{% endif %}
-----------------------------------------=====Script=======-----------------------
$.fn.InsertValue = function() {
function doEvent( obj, name ) {
try {
var event = new Event( name, {target: obj, bubbles: true} );
return obj ? obj.dispatchEvent(event) : false;
}
catch (e) {
var event = document.createEvent('Event');
event.initEvent(name, true, true);
obj.dispatchEvent(event);
}
}
$(this).each(function() {
doEvent(this, 'change');
doEvent(this, 'input');
doEvent(this, 'blur');
});
return $(this);
};
setTimeout(function(){
var getFormTitle = $('.popup-form-inner h1.form-title').text();
$('.hs_position_name input').val(getFormTitle).InsertValue();
var getFormCat = $('.popup-form-inner p.form-designation').text();
$('.popup-form-inner .hs_category input').val(getFormCat).InsertValue();
var getFormLoc = $('.popup-form-inner .location').text();
$('.popup-form-inner .hs_location input').val(getFormLoc).InsertValue();
var getFormHire = $('.popup-form-inner .hiring').text();
$('.popup-form-inner .hs_hiring_process input').val(getFormTitle).InsertValue();
},1000);
(function() {
// Main content container
var $container = $('.jobs-listing-wrapper');
// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
$container.masonry({
// selector for entry content
itemSelector: '.jobs-listing-wrapper > .card-wrapper'
});
});
// Infinite Scroll
$container.infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : ".jobs-pagination",
// selector for the NEXT link (to page 2)
nextSelector : "a.next-posts-link.load-more",
// selector for all items you'll retrieve
itemSelector : ".jobs-listing-wrapper > .card-wrapper",
// finished message
loading: {
finishedMsg: 'No more pages to load.'
}
},
// Trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
// Pause Infinite Scroll
$(window).unbind('.infscr');
nx= $('a.next-posts-link').attr('data-total-page-count');
nx = parseInt(nx);
nxc = 2;
// Resume Infinite Scroll
$('a.next-posts-link.load-more').click(function(){
$container.infinitescroll('retrieve');
nxc < nx ? nxc+=1 : $(this).fadeOut()
return false;
});
})();
-----------------------
.custom-job-search{
display:none;
}
#loadMore {
text-align: center;
color:#000;
display:block;
margin: 0;
font-size: 1.2em;
cursor: pointer;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.jobs-pagination {
display: block !important;
}
Comments
Post a Comment