Lazy Load + Isotope adaptation - php

i tried to adapt the explanation from this post :
Lazy Load + Isotope
to my proper case :
http://40parallele.com/produits-test.php?id=4
but something is missing...
Here is my js code :
// Isotope
$j(window).load(function()
{
// lazyload
var $win = $(window);
var $imgs = $('img.lazy');
var $container = $j('#folio');
// calcul la taille des images
$imgs.each(function(index) {
var item_height = $(this).attr("height");
$(this).parent().parent().css("height",item_height);
});
if( $container.length )
{
$container.isotope(
{
itemSelector : '.folio-item'
});
var $optionSets = $j('#portfolio .folio-filter'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function()
{
var $this = $j(this);
// don't proceed if already selected
if ( $this.hasClass('selected') )
{
return false;
}
var $optionSet = $this.parents('.folio-filter');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' )
{
changeLayoutMode( $this, options );
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
}
$container.isotope({
onLayout: function() {
$win.trigger("scroll");
}
});
/*OK*/
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
});
$j(window).bind('resize', function(e)
{
window.RT = setTimeout(function() {$j('#folio').isotope('reLayout'); }, 800);
});
thanks for your help

Related

delete file thumbnail from dropzone

Below is the code which I use to upload images through dropzone.
<script>
Dropzone.options.uploaddeadlineimages = {
// The camelized version of the ID of the form element
// The configuration
paramName: 'files',
url:"<?=base_url()."Product/upload_listing_images";?>",
dictDefaultMessage: "<img src='<?=base_url()."public/images/";?>/frontend/camera-black.png'><h2>Drag and drop your photos here to upload</h2><p><a href='javascript:void(0)'>Or Click here to browse for photos</a></p>",
uploadMultiple: false,
createImageThumbnails: true,
addRemoveLinks: true,
parallelUploads:100,
dictInvalidFileType:'Please upload only valid file type(png,jpg,gif,pdf)',
clickable:true,
maxFiles:100,
autoProcessQueue: true,
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
}else{
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
// The setting up of the dropzone
init: function() {
var myDropzone = this;
//alert after success
this.on('queuecomplete', function( file, resp ){
//alert('hahahahahaha');
});
// First change the button to actually tell Dropzone to process the queue.
document.getElementById("create_listing_button").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
the code has this parth which is used to append the new filename into hidden field so that i can save those names in database then. but the problem is that when i click on delete button i need to delete the name of that file from the hidden field too. I am getting an encrypted name from the server.
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
}else{
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
I don't need the exact code. I just need a method by which i can pass the new filename to a function when i click on delete button. this should not prevent the delete from doing it default function
well i found an answer . just update the success part according to your need. but as in my case i needed the image name as id of preview element. it will be done in this way.
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
file.previewElement.id = response;
}else{
file.previewElement.id = response;
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
to change the value of list after delete button just add the following code in dropzone.js file(just the way i did it).
the code starts from line number 274. just change it from this
removeFileEvent = (function(_this) {
return function(e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
return _this.removeFile(file);
});
} else {
return _this.removeFile(file);
}
}
};
})(this);
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
removeLink = _ref2[_k];
_results.push(removeLink.addEventListener("click", removeFileEvent));
}
return _results;
}
},
to this(just four lines added. do it carefully, otherwise you can mess up all)
removeFileEvent = (function(_this) {
return function(e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
var id = $(this).closest("div").prop("id");
update_img_list(id);
return _this.removeFile(file);
});
} else {
var id = $(this).closest("div").prop("id");
update_img_list(id);
return _this.removeFile(file);
}
}
};
})(this);
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
removeLink = _ref2[_k];
_results.push(removeLink.addEventListener("click", removeFileEvent));
}
return _results;
}
},
add this function at the end of file change ('#listing_images') to ('#id_of_your_field_which_contains_the_list')
function update_img_list(id){
var list = $('#listing_images').val();
separator = ",";
var values = list.split(separator);
for(var i = 0 ; i < values.length ; i++) {
if(values[i] == id) {
values.splice(i, 1);
$('#listing_images').val(values.join(separator)) ;
}
}
return list;
}

How to implement Isotope with Pagination

I am trying to implement isotope with pagination on my WordPress site (which obviously is a problem for most people). I've come up with a scenario which may work if I can figure a few things out.
On my page, I have this part of my isotope script -
$('.goforward').click(function(event) {
var href = $(this).attr('href');
$('.isotope').empty();
$('.isotope').load(href +".html .isotope > *");
$( 'div.box' ).addClass( 'isotope-item' );
$container.append( $items ).isotope( 'insert', $items, true );
event.preventDefault();
});
Then I am using this pagination function which I modified from here to have the 'goforward' class --
function isotope_pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class='pagination'>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<a href='".get_pagenum_link($i)."' class='inactive goforward'>".$i."</a>":"<a href='".get_pagenum_link($i)."' class='inactive goforward' >".$i."</a>";
}
}
echo "</div>\n";
}
}
1st Problem - I'm having issues with the filtering/sorting. It filters fine for the first page, but doesn't sort. On the second page or any other page loaded it does not append/insert or even filter/sort when starting fresh on that page. Instead, when trying to do so it gives me this error --
Uncaught TypeError: Cannot read property '[object Array]' of undefined
2nd Problem - When loading the page fragments, there's a delay and the current page is still visible before the next page fragment is loaded in its place.
I know a lot of people have problems with isotope and pagination, usually, end up using infinite scroll even though isotope author does not recommend it.
So my theory is loading content via load() and have a callback of some sort to only display filtered items.
Any ideas on how to achieve this?
My entire isotope script ---
$(function () {
var selectChoice, updatePageState, updateFiltersFromObject,
$container = $('.isotope');
$items = $('.item');
////////////////////////////////////////////////////////////////////////////////////
/// EVENT HANDLERS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Mark filtering element as active/inactive and trigger filters update
$('.js-filter').on( 'click', '[data-filter]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Sort filtered (or not) elements
$('.js-sort').on('click', '[data-sort]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Listen to filters update event and update Isotope filters based on the marked elements
$container.on('filter-update', function (event, opts) {
var filters, sorting, push;
opts = opts || {};
filters = $('.js-filter li.active a:not([data-filter="all"])').map(function () {
return $(this).data('filter');
}).toArray();
sorting = $('.js-sort li.active a').map(function () {
return $(this).data('sort');
}).toArray();
if (typeof opts.pushState == 'undefined' || opts.pushState) {
updatePageState(filters, sorting);
}
$container.isotope({
filter: filters.join(''),
sortBy: sorting
});
});
//////////////////////////////////////////////////////
// Set a handler for history state change
History.Adapter.bind(window, 'statechange', function () {
var state = History.getState();
updateFiltersFromObject(state.data);
$container.trigger('filter-update', {pushState: false});
});
////////////////////////////////////////////////////////////////////////////////////
/// HELPERS FUNCTIONS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Build an URI to get the query string to update the page history state
updatePageState = function (filters, sorting) {
var uri = new URI('');
$.each(filters, function (idx, filter) {
var match = /^\.([^-]+)-(.*)$/.exec(filter);
if (match && match.length == 3) {
uri.addSearch(match[1], match[2]);
}
});
$.each(sorting, function (idx, sort) {
uri.addSearch('sort', sort);
});
History.pushState(uri.search(true), null, uri.search() || '?');
};
//////////////////////////////////////////////////////
// Select the clicked (or from URL) choice in the dropdown menu
selectChoice = function ($link, opts) {
var $group = $link.closest('.btn-group'),
$li = $link.closest('li'),
mediumFilter = $group.length == 0;
if (mediumFilter) {
$group = $link.closest('.js-filter');
}
if (opts.click) {
$li.toggleClass('active');
} else {
$li.addClass('active');
}
$group.find('.active').not($li).removeClass('active');
if (!mediumFilter) {
if ($group.find('li.active').length == 0) {
$group.find('li:first-child').addClass('active');
}
$group.find('.selection').html($group.find('li.active a').first().html());
}
};
//////////////////////////////////////////////////////
// Update filters by the values in the current URL
updateFiltersFromObject = function (values) {
if ($.isEmptyObject(values)) {
$('.js-filter').each(function () {
selectChoice($(this).find('li').first(), {click: false});
});
selectChoice($('.js-sort').find('li').first(), {click: false});
} else {
$.each(values, function (key, val) {
val = typeof val == 'string' ? [val] : val;
$.each(val, function (idx, v) {
var $filter = $('[data-filter=".' + key + '-' + v + '"]'),
$sort = $('[data-sort="' + v + '"]');
if ($filter.length > 0) {
selectChoice($filter, {click: false});
} else if ($sort.length > 0) {
selectChoice($sort, {click: false});
}
});
});
}
};
////////////////////////////////////////////////////////////////////////////////////
/// Initialization
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Initialize Isotope
$container.imagesLoaded( function(){
$container.isotope({
masonry: { resizesContainer: true },
itemSelector: '.item',
getSortData: {
date: function ( itemElem ) {
var date = $( itemElem ).find('.thedate').text();
return parseInt( date.replace( /[\(\)]/g, '') );
},
area: function( itemElem ) { // function
var area = $( itemElem ).find('.thearea').text();
return parseInt( area.replace( /[\(\)]/g, '') );
},
price: function( itemElem ) { // function
var price = $( itemElem ).find('.theprice').text();
return parseInt( price.replace( /[\(\)]/g, '') );
}
}
});
var total = $(".next a:last").html();
var pgCount = 1;
var numPg = total;
pgCount++;
$('.goback').click(function() {
$('.isotope').empty();
$('.isotope').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *");
$container.append( $items ).isotope( 'insert', $items, true );
$( 'div.box' ).addClass( 'isotope-item' );
});
$('.goforward').click(function(event) {
var href = $(this).attr('href');
$('.isotope').empty();
$('.isotope').load(href +".html .isotope > *");
$( 'div.box' ).addClass( 'isotope-item' );
$container.append( $items ).isotope( 'insert', $items, true );
event.preventDefault();
});
});
//////////////////////////////////////////////////////
// Initialize counters
$('.stat-count').each(function () {
var $count = $(this),
filter = $count.closest('[data-filter]').data('filter');
$count.html($(filter).length);
});
//////////////////////////////////////////////////////
// Set initial filters from URL
updateFiltersFromObject(new URI().search(true));
$container.trigger('filter-update', {pushState: false});
});
});
lazy loader works quite well,i've tried it myself
check codepen
you can also try:
var $container = $('#container').isotope({
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
Have you checked the following link:
https://codepen.io/Igorxp5/pen/ojJLQE
It has a working example of isotope with pagination.
Have a look at the following block of code from the JS section:
var $container = $('#container').isotope({
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
Check below link if usefull
https://mixitup.kunkalabs.com/extensions/pagination/
You can also use lazy loder for pagination.
Hope this'll help you
I think this will help you.
Refer this URL

Infinite scroll (jScroll) and Ajax product filters

I have an issue, where I use jScroll for infinite scroll(jScroll), which works fine when the page loads. But the infinite scrolling is not working after an ajax call by a product filter in a search result page.
So here are my filter function called on change ajax call:
<script type='text/JavaScript'>
function filter_onchange()
{
$('#imgLoader').show();
$("#searchResults").load("<?php print $config_baseHREF; ?>search.php?ajax=1&"+$(".ajax").serialize());
$('imgLoader').hide();
}
</script>
Here is my jscroll script called from the footer.
<script>
$('.page-section').jscroll({
autotrigger: true,
loadingHtml: '<img class="center-block" src="/images/712.gif" alt="Loading" />',
padding: 20,
nextSelector: 'a.next',
contentSelector: '.infinite, .pagination',
});
</script>
So the issue is that after a user has used an filter(calling the function filter_onchange()) the jScroll stops working. In console I get the error:
TypeError: data is undefined
if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
jScroll.js
/*!
* jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging
* http://jscroll.com/
*
* Copyright 2011-2013, Philip Klauzinski
* http://klauzinski.com/
* Dual licensed under the MIT and GPL Version 2 licenses.
* http://jscroll.com/#license
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl-2.0.html
*
* #author Philip Klauzinski
* #version 2.3.4
* #requires jQuery v1.4.3+
* #preserve
*/
(function($) {
'use strict';
// Define the jscroll namespace and default settings
$.jscroll = {
defaults: {
debug: true,
autoTrigger: true,
autoTriggerUntil: false,
loadingHtml: '<small>Loading...</small>',
padding: 0,
nextSelector: 'a:last',
contentSelector: '',
pagingSelector: '',
callback: false
}
};
// Constructor
var jScroll = function($e, options) {
// Private vars and methods
var _data = $e.data('jscroll'),
_userOptions = (typeof options === 'function') ? { callback: options } : options,
_options = $.extend({}, $.jscroll.defaults, _userOptions, _data || {}),
_isWindow = ($e.css('overflow-y') === 'visible'),
_$next = $e.find(_options.nextSelector).first(),
_$window = $(window),
_$body = $('body'),
_$scroll = _isWindow ? _$window : $e,
_nextHref = $.trim(_$next.attr('href') + ' ' + _options.contentSelector),
// Check if a loading image is defined and preload
_preloadImage = function() {
var src = $(_options.loadingHtml).filter('img').attr('src');
if (src) {
var image = new Image();
image.src = src;
}
},
// Wrap inner content, if it isn't already
_wrapInnerContent = function() {
if (!$e.find('.jscroll-inner').length) {
$e.contents().wrapAll('<div class="jscroll-inner" />');
}
},
// Find the next link's parent, or add one, and hide it
_nextWrap = function($next) {
var $parent;
if (_options.pagingSelector) {
$next.closest(_options.pagingSelector).hide();
} else {
$parent = $next.parent().not('.jscroll-inner,.jscroll-added').addClass('jscroll-next-parent').hide();
if (!$parent.length) {
$next.wrap('<div class="jscroll-next-parent" />').parent().hide();
}
}
},
// Remove the jscroll behavior and data from an element
_destroy = function() {
return _$scroll.unbind('.jscroll')
.removeData('jscroll')
.find('.jscroll-inner').children().unwrap()
.filter('.jscroll-added').children().unwrap();
},
// Observe the scroll event for when to trigger the next load
_observe = function() {
_wrapInnerContent();
var $inner = $e.find('div.jscroll-inner').first(),
data = $e.data('jscroll'),
borderTopWidth = parseInt($e.css('borderTopWidth'), 10),
borderTopWidthInt = isNaN(borderTopWidth) ? 0 : borderTopWidth,
iContainerTop = parseInt($e.css('paddingTop'), 10) + borderTopWidthInt,
iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top,
innerTop = $inner.length ? $inner.offset().top : 0,
iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop);
if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
//data.nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);
_debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...');
return _load();
}
},
// Check if the href for the next set of content has been set
_checkNextHref = function(data) {
data = data || $e.data('jscroll');
if (!data || !data.nextHref) {
_debug('warn', 'jScroll: nextSelector not found - destroying');
_destroy();
return false;
} else {
_setBindings();
return true;
}
},
_setBindings = function() {
var $next = $e.find(_options.nextSelector).first();
if (!$next.length) {
return;
}
if (_options.autoTrigger && (_options.autoTriggerUntil === false || _options.autoTriggerUntil > 0)) {
_nextWrap($next);
if (_$body.height() <= _$window.height()) {
_observe();
}
_$scroll.unbind('.jscroll').bind('scroll.jscroll', function() {
return _observe();
});
if (_options.autoTriggerUntil > 0) {
_options.autoTriggerUntil--;
}
} else {
_$scroll.unbind('.jscroll');
$next.bind('click.jscroll', function() {
_nextWrap($next);
_load();
return false;
});
}
},
// Load the next set of content, if available
_load = function() {
var $inner = $e.find('div.jscroll-inner').first(),
data = $e.data('jscroll');
data.waiting = true;
$inner.append('<div class="jscroll-added" />')
.children('.jscroll-added').last()
.html('<div class="jscroll-loading">' + _options.loadingHtml + '</div>');
return $e.animate({scrollTop: $inner.outerHeight()}, 0, function() {
$inner.find('div.jscroll-added').last().load(data.nextHref, function(r, status) {
if (status === 'error') {
return _destroy();
}
var $next = $(this).find(_options.nextSelector).first();
data.waiting = false;
data.nextHref = $next.attr('href') ? $.trim($next.attr('href') + ' ' + _options.contentSelector) : false;
$('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
_checkNextHref();
if (_options.callback) {
_options.callback.call(this);
}
_debug('dir', data);
});
});
},
// Safe console debug - http://klauzinski.com/javascript/safe-firebug-console-in-javascript
_debug = function(m) {
if (_options.debug && typeof console === 'object' && (typeof m === 'object' || typeof console[m] === 'function')) {
if (typeof m === 'object') {
var args = [];
for (var sMethod in m) {
if (typeof console[sMethod] === 'function') {
args = (m[sMethod].length) ? m[sMethod] : [m[sMethod]];
console[sMethod].apply(console, args);
} else {
console.log.apply(console, args);
}
}
} else {
console[m].apply(console, Array.prototype.slice.call(arguments, 1));
}
}
};
// Initialization
$e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref}));
_wrapInnerContent();
_preloadImage();
_setBindings();
// Expose API methods via the jQuery.jscroll namespace, e.g. $('sel').jscroll.method()
$.extend($e.jscroll, {
destroy: _destroy
});
return $e;
};
// Define the jscroll plugin method and loop
$.fn.jscroll = function(m) {
return this.each(function() {
var $this = $(this),
data = $this.data('jscroll'), jscroll;
// Instantiate jScroll on this element if it hasn't been already
if (data && data.initialized) {
return;
}
jscroll = new jScroll($this, m);
});
};
})(jQuery);
Can anyone point me in the direction of what is wrong here - is it the placement of the scripts ?
In the filter ajax call, I do call the footer again so the jScroll script is part of the load in the filter function called.

How to stay on same tab in bootstrap3 in zf2?

I used bootstrap 3 tabs in php but when i refresh my previous tab forms fields shown empty,How i show these fields after refreshing page?
Here is my code:
var hash = window.location.hash;
$('#signup_tabs_group a[href="' + hash + '"]').tab('show');
// Get form data and enforce tab wise validation
var form_data = $.parseJSON($('form').attr('data-elements'));
$("#continue_to_account").click(function (e) {
if ($("#password1").val() != '' && $("#password1").val() != $("#password2").val()) {
popoverContent('password2', "Please Confirm Password.", "right");
$("#password2").popover('show');
$("#password2").addClass('mypopover');
$("#password2").focus();
return false;
} else {
$("#password2.mypopover").popover('hide');
}
if ($("#email").val() != '' && $("#email").val() != $("#email2").val()) {
popoverContent ('email2', "Please Confirm Email.", "right");
$("#email2").popover('show');
$("#email2").focus();
$("#email2").addClass('mypopover');
return false;
} else {
$("#email2.mypopover").popover('hide');
}
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
var custom_form = [];
var required_elements = ['email', 'email2', 'username', 'password1', 'password2'];
for (var c = 0; c < form_data.length; c++) {
if (typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
custom_form[c] = form_data[c];
}
}
if (validations(custom_form, $('form'), $(this), 'right') != false) {
e.preventDefault();
$('#signup_tabs_group a[href="#contact"]').tab('show');
return true;
}
return false;
});
$("#back_to_account").click(function (e) {
e.preventDefault();
$('#signup_tabs_group a[href="#account"]').tab('show');
});
$("#continue_to_website").click(function (e) {
var custom_form = [];
var required_elements = [{'contact_first_name': true}, {'contact_last_name': true}, {'country': true}, {'account_type': true}, {'address1': true}, {'address2': false}, {'address3': false}, {'city': true}, {'state': false}, {'zipcode': true}, {'phone_code': false}, {'phone_number': true}, {'fax': false}, {'currency': false}];
if (
typeof($('input[name=account_type]:checked').val()) != 'undefined' &&
$('input[name=account_type]:checked').val() == 'company'
) {
required_elements.push({'company_name': true});
}
//return false;
for (var c = 0; c < form_data.length; c++) {
if (
typeof(form_data[c].name) != "undefined" &&
typeof(form_data[c].validation) != "undefined" &&
typeof(form_data[c].validation.required) != "undefined"
) {
for (var i = 0; i < required_elements.length; i++) {
if (typeof(required_elements[i][form_data[c].name]) != 'undefined') {
form_data[c].validation.required = required_elements[i][form_data[c].name];
custom_form[c] = form_data[c];
break;
}
}
}
}
if (validations(custom_form, $('form'), $(this), 'right') != false) {
e.preventDefault();
$('#signup_tabs_group a[href="#website"]').tab('show');
return true;
}
return false;
});
$("#back_to_website").click(function (e) {
e.preventDefault();
$('#signup_tabs_group a[href="#contact"]').tab('show');
});
$('input[name=account_type]').change(function() {
if ($('input[name=account_type]:checked').val() == 'company') {
$('.company-label').removeClass('hidden');
} else {
$('.company-label').addClass('hidden');
$('#company_name').val('');
if ($('#company_name').hasClass('mypopover')) {
$('#company_name').popover('hide');
$('#company_name').popover('disable');
}
}
});
// jQuery International Telephone Input With Flags and Dial Codes
$("#phone_code").intlTelInput({
defaultCountry: "gb"
});
//Validation
$(".validate_button").click(function(e){
var words = $('#description').val().split(/\b[\s,\.-:;]*/);
if (words.length > 100) {
words.splice(100);
$('#description').val(words.join(" "));
}
var custom_form3 = [];
var required_elements = ['website_name', 'website_url', 'unique_visitors', 'audience_geo', 'audience_interests', 'website_content', 'advertising_type', 'other_affiliate_member', 'working_with_qs', 'description', 'hear_about_us', 'accept_terms'];
for (var c = 0; c < form_data.length; c++) {
if (typeof(form_data[c]) != "undefined" && typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
custom_form3[c] = form_data[c];
}
}
if (validations(custom_form3, $('form'), $(this), 'right') != false) {
return true;
}
How i show form fields after refreshing page?
It's rather pure JS/jQuery question than ZF2 related.
I solved this problem in such a way:
$(function(){
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
i'm looking for tabs which 'a' element href ends with hash from url and then i show them. I also set in window url hash component when someone click on tab so after that someone refresh page it bring him last viewed tab.

Updating two lists with one JQuery function

I have a little problem and hoping someone with JQuery knowledge can look at my code and spot what I'm doing wrong.
I have two unordered lists (dynamically created) that get updated with ajax.
With script below I can only get one list to update but not both. I cloned first script and changed variables for second list but only one gets updated.
Thanks for you help.
Here is the html code:
List one: <ul data-options="" class="elgg-list-mainriver elgg-sync elgg-list-river elgg-river"><li> .....</li>
</ul>
List Two: <ul data-options="" class="elgg-list-miniriver elgg-sync elgg-list-river elgg-river"><li> .....</li>
</ul>
And JQuery code:
elgg.provide('elgg.river');
elgg.river.init = function() {
var riverList = $('ul.elgg-list-mainriver');
//var miniriverList = $('.elgg-list-miniriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river.timedRefresh(riverList);
//elgg.river.MinitimedRefresh(miniriverList);
}, time);
}
};
elgg.river.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(600));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}
elgg.provide('elgg.river_miniriver');
elgg.river_miniriver.init = function() {
var miniriverList = $('ul.elgg-list-miniriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river_miniriver.timedRefresh(miniriverList);
}, time);
}
};
elgg.river_miniriver.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(600));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}
elgg.register_hook_handler('init', 'system', elgg.river.init);
elgg.register_hook_handler('success', 'elgg:river:ajax', elgg.river.init, 500);
elgg.register_hook_handler('init', 'system', elgg.river_miniriver.init);
elgg.register_hook_handler('success', 'elgg:river:ajax', elgg.river_miniriver.init, 500);
If I try to combine both lists class in the function "$('ul.elgg-list-miniriver, ul.elgg-list-mainriver')" than both lists get updated but first list item (li) gets "opacity:0;" in style????
This code:
elgg.river_miniriver.init = function() {
var miniriverList = $('ul.elgg-list-miniriver, ul.elgg-list-mainriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river_miniriver.timedRefresh(miniriverList);
}, time);
}
};
elgg.river_miniriver.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(1000));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}

Categories