I have a working jQuery UI DatePicker script that only
displays WED & SAT (see MAIN SCRIPT below).
I also have a working jQuery UI DatePicker script that adds
a button image to trigger the DatePicker (see TRIGGER SCRIPT BELOW).
How can I integrate the TRIGGER SCRIPT into the MAIN SCRIPT?
I know this is simple but this newbie can't figure out out the syntax.
Sorry about that....
Trigger script:
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "css/blitzer/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
Main script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable Certains Days in a Week using jQuery UI DatePicker</title>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.6.custom.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0 || day == 1 || day == 2 || day == 4 || day == 5) {
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
</head>
<body>
<input id="datepicker"/>
</body>
</html>
<input type="button" name="date" id="popupDatepicker">
/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* taken from mootools */
function ArrayIndexOf(array,item,from){
var len = array.length;
for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
if (array[i] === item) return i;
}
return -1;
}
/* taken from mootools */
function ArrayContains(array,item,from){
return ArrayIndexOf(array,item,from) != -1;
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 5, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
});
});
In your main script:
$(document).ready(function(){
$( "#datepicker" ).datepicker(
{ showOn: "button",
buttonImage: "css/blitzer/images/calendar.gif",
buttonImageOnly: true});
});
Solution Found: How to Add jQuery UI DatePicker Button TRIGGER SCRIPT.
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "css/blitzer/images/calendar.gif",
buttonImageOnly: true,
beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0 || day == 1 || day == 3 || day == 4 || day == 6) {
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
Related
I have tinyMCE 6.2 in my project. How to chose file?
And I can't choose an image by click or by check.
The selected file path (tinymceCallBackURL) is empty. Can you help me?
tinyMCE init:
tinymce.init({ selector: '.tinymce', file_picker_callback: myFileBrowser, .......... }
My code js:
var type = meta.filetype;
var cmsURL = "file_manager/?conf=tiny";
if (cmsURL.indexOf("?") < 0) {
cmsURL = cmsURL + "?type=" + type;
} else {
cmsURL = cmsURL + "&type=" + type;
}
var windowManagerCSS = '<style type="text/css">' + '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' + '.tox-dialog__body { padding: 0!important; }' + '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' + '</style> ';
window.tinymceCallBackURL = '';
window.tinymceWindowManager = tinymce.activeEditor.windowManager;
tinymceWindowManager.open({
title: 'Menedżer plików',
url: cmsURL,
body: {
type: 'panel',
items: [{
type: 'htmlpanel',
html: windowManagerCSS + <iframe src="/file_manager/?conf=tiny&type=${type}" style="width:100%; height:500px" id="filemanager"></iframe> }]
},
buttons: [],
onClose: function () {
if (tinymceCallBackURL != '') callback(tinymceCallBackURL, {}); //to set selected file path } }); }````
I have a solution. (unswer in github issue https://github.com/artgris/FileManagerBundle/issues/107):
I needed to add module=tiny in cmsURL :
var cmsURL = "file_manager/?module=tiny&conf=tiny";
and replace:
html: windowManagerCSS + '<iframe src="/file_manager/?conf=tiny&type=${type}" ... thinking
with:
html: windowManagerCSS + '<iframe src="' + cmsURL ...
https://github.com/artgris/FileManagerBundle/blob/master/Resources/doc/tutorials/integrate-tinymce.md
I am very new to leaflet.
Below is my code where a polygon layer and a point layer are loaded from Geoserver through wfs service.
Each layer has a tooltip. When the two layers do not overlap the tooltips work as expected. When a point overlaps a polygon, in its position the tooltip of the polygon is shown. Unfortunately, for my purposes, when the two geometries overlap I want only the circle marker tooltip to be shown, that is exactly the opposite behavior than it is currently doing. It seems to be a kind of issue so impossible to solve for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<title>Example Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css">
</head>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var map = new L.Map('map');
var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
var myRenderer = L.canvas({padding: 0.5});
var dataset = new L.layerGroup().addTo(map);
$.ajax({
url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:point_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson1&SrsName=EPSG:4326&MaxFeatures=200',
dataType: 'jsonp',
jsonpCallback: 'getJson1',
success: function(response) {
WFSLayer1 = L.geoJson(response, {
style: function(feature) {
return {
color: '#696969'
};
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
renderer: myRenderer
});
},
onEachFeature: function(feature, layer) {
var popupText = '';
if (feature.properties.NOMECOMUNE) {
popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
}
if (feature.properties.CIVICO) {
popupText += "<b>CIVICO: </b>" + feature.properties.CIVICO + "<br />";
}
layer.bindTooltip(popupText, {'sticky': true});
}
}).addTo(dataset);
// map.fitBounds(WFSLayer1.getBounds());
}
});
$.ajax({
url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:polygon_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson2&SrsName=EPSG:4326&MaxFeatures=200',
dataType: 'jsonp',
jsonpCallback: 'getJson2',
success: function(response) {
WFSLayer2 = L.geoJson(response, {
style: function(feature) {
return {
stroke: true,
fillOpacity: 0
};
},
onEachFeature: function(feature, layer) {
var popupText = '';
if (feature.properties.NOMECOMUNE) {
popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
}
if (feature.properties.ZONA) {
popupText += "<b>TIPO ZONA: </b>" + feature.properties.ZONA + "<br />";
}
if (feature.properties.DEN_FI) {
popupText += "<b>AREA DI RISPETTO: </b>" + feature.properties.DEN_FI + "<br />";
}
if (feature.properties.TR_VINC) {
popupText += "<b>TRATTO VINCOLATO: </b>" + feature.properties.TR_VINC + "<br />";
}
if (feature.properties.DESCRIZION) {
popupText += "<b>CATEGORIA FORESTALE: </b>" + feature.properties.DESCRIZION + "<br />";
}
if (feature.properties.GIARDINI) {
popupText += "<b>PRESENZA GIARDINI: </b>" + feature.properties.GIARDINI + "<br />";
}
if (feature.properties.STAB_INDUS) {
popupText += "<b>STABILIMENTO A RISCHIO INCIDENTE GRAVE: </b>" + feature.properties.STAB_INDUS + "<br />";
}
if (feature.properties.CHANGETYPE) {
popupText += "<b>VARIAZIONI: </b>" + feature.properties.CHANGETYPE + "<br />";
}
layer.bindTooltip(popupText, {'sticky': true});
}
}).addTo(map);
map.fitBounds(WFSLayer2.getBounds());
}
});
map.on('zoomend', function() {
if (map.getZoom() < 16){
map.removeLayer(dataset);
}
else {
map.addLayer(dataset);
}
});
var BaseMap = {
"Base map": map
};
L.control.layers(BaseMap).addTo(map);
</script>
</html>
What I tried
I tried to create two explicit separate panes for each layer as follow:
map.createPane("polygonsPane");
map.createPane("pointsPane");
map.getPane('pointsPane').style.zIndex = 750;
map.getPane('polygonsPane').style.zIndex = 350;
Then I assigned each layer to its pane inside the style section.
For the polygon layer:
style: function(feature) {
return {
stroke: true,
fillOpacity: 1,
pane: "polygonsPane"
};
},
And for the point layer:
style: function(feature) {
return {
stroke: true,
fillOpacity: 1,
pane: "pointsPane"
};
},
With this, I was able to bring the points to the front and to make the tooltip work. Unfortunately, the tooltip for the polygon doesn't show anymore!
I'm very new to Leaflet. I'm sure I'm missing something obvious but I've been racking my brain trying to see what I'm missing. I would really appreciate it if anyone is able to give me a workaround.
Thank you very much.
I am running opecart 3 with the new journal theme 3.
The product page has a "quick buy" button that automatically adds product details to the cart and then redirects the customer to the checkout page.
I cannot seem to change the url for the quick_buy button. I need it to do what it does as above, but to instead redirect the user to a custom url..
How can I achieve this?
Code as seen here:
// Array includes polyfill
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function (searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If len is 0, return false.
if (len === 0) {
return false;
}
// 4. Let n be ? ToInteger(fromIndex).
// (If fromIndex is undefined, this step produces the value 0.)
var n = fromIndex | 0;
// 5. If n ≥ 0, then
// a. Let k be n.
// 6. Else n < 0,
// a. Let k be len + n.
// b. If k < 0, let k be 0.
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
function sameValueZero(x, y) {
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
}
// 7. Repeat, while k < len
while (k < len) {
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
// b. If SameValueZero(searchElement, elementK) is true, return true.
if (sameValueZero(o[k], searchElement)) {
return true;
}
// c. Increase k by 1.
k++;
}
// 8. Return false
return false;
}
});
}
$(function () {
// Currency
$('#form-currency .currency-select').unbind().on('click', function (e) {
e.preventDefault();
$('#form-currency input[name=\'code\']').val($(this).data('name'));
$('#form-currency').submit();
});
// Language
$('#form-language .language-select').unbind().on('click', function (e) {
e.preventDefault();
$('#form-language input[name=\'code\']').val($(this).data('name'));
$('#form-language').submit();
});
});
window['cart'].add = function (product_id, quantity, quick_buy) {
quantity = quantity || 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
beforeSend: function () {
$('[data-toggle="tooltip"]').tooltip('hide');
$('[onclick*="cart.add(\'' + product_id + '\'"]').button('loading');
},
complete: function () {
$('[onclick*="cart.add(\'' + product_id + '\'"]').button('reset');
},
success: function (json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
if (json['options_popup']) {
if ($('html').hasClass('iphone') || $('html').hasClass('ipad')) {
iNoBounce.enable();
}
var html = '';
html += '<div class="popup-wrapper popup-options">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>';
html += ' <iframe src="index.php?route=journal3/product&product_id=' + product_id + '&popup=options&product_quantity=' + quantity + '&' + (quick_buy ? 'quick_buy=true' : '') + '" width="100%" height="100%" frameborder="0" onload="this.height = this.contentWindow.document.body.offsetHeight; $(this).prev(\'.journal-loading\').fadeOut();"></iframe>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
} else {
location = json['redirect'];
}
}
if (json['success']) {
if (json['options_popup']) {
if ($('html').hasClass('iphone') || $('html').hasClass('ipad')) {
iNoBounce.enable();
}
var html = '';
html += '<div class="popup-wrapper popup-options">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>';
html += ' <iframe src="index.php?route=journal3/product&product_id=' + product_id + '&popup=options&' + (quick_buy ? 'quick_buy=true' : '') + '" width="100%" height="100%" frameborder="0" onload="this.height = this.contentWindow.document.body.offsetHeight; $(this).prev(\'.journal-loading\').fadeOut();"></iframe>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
} else {
if (json['notification']) {
show_notification(json['notification']);
if (quick_buy) {
location = 'index.php?route=checkout/checkout';
}
} else {
$('header').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
}
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart-total').html(json['total']);
$('#cart-items').html(json['items_count']);
}, 100);
if (Journal['scrollToTop']) {
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
$('.cart-content ul').load('index.php?route=common/cart/info ul li');
if (parent.window['_QuickCheckout']) {
parent.window['_QuickCheckout'].save();
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['cart'].remove = function (key) {
$.ajax({
url: 'index.php?route=checkout/cart/remove',
type: 'post',
data: 'key=' + key,
dataType: 'json',
beforeSend: function () {
$('#cart > button').button('loading');
},
complete: function () {
$('#cart > button').button('reset');
},
success: function (json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart-total').html(json['total']);
$('#cart-items').html(json['items_count']);
}, 100);
if ($('html').hasClass('route-checkout-cart') || $('html').hasClass('route-checkout-checkout')) {
location = 'index.php?route=checkout/cart';
} else {
$('.cart-content ul').load('index.php?route=common/cart/info ul li');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['cart'].update = function (key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function () {
$('#cart > button').button('loading');
},
complete: function () {
$('#cart > button').button('reset');
},
success: function (json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart-total').html(json['total']);
$('#cart-items').html(json['items_count']);
}, 100);
if ($('html').hasClass('route-checkout-cart') || $('html').hasClass('route-checkout-checkout')) {
location = 'index.php?route=checkout/cart';
} else {
$('.cart-content ul').load('index.php?route=common/cart/info ul li');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['wishlist'].add = function (product_id) {
$.ajax({
url: 'index.php?route=account/wishlist/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function (json) {
$('.alert').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('[data-toggle="tooltip"]').tooltip('hide');
if (json['notification']) {
show_notification(json['notification']);
} else {
$('header').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
}
$('#wishlist-total span').html(json['total']);
$('#wishlist-total').attr('title', json['total']);
$('.wishlist-badge').text(json['count']);
if (Journal['scrollToTop']) {
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['compare'].add = function (product_id) {
$.ajax({
url: 'index.php?route=product/compare/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function (json) {
$('.alert').remove();
if (json['success']) {
$('[data-toggle="tooltip"]').tooltip('hide');
if (json['notification']) {
show_notification(json['notification']);
} else {
$('header').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
$('#compare-total').html(json['total']);
$('.compare-badge').text(json['count']);
if (Journal['scrollToTop']) {
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['quickview'] = function (product_id) {
product_id = parseInt(product_id, 10);
// hide tooltip
$('[data-toggle="tooltip"]').tooltip('hide');
var html = '';
html += '<div class="popup-wrapper popup-quickview">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>';
html += ' <iframe src="index.php?route=journal3/product&product_id=' + product_id + '&popup=quickview" width="100%" height="100%" frameborder="0" onload="this.height = this.contentWindow.document.body.offsetHeight; $(this).prev(\'.journal-loading\').hide();"></iframe>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
};
window['open_popup'] = function (module_id) {
if ($('html').hasClass('iphone') || $('html').hasClass('ipad')) {
iNoBounce.enable();
}
module_id = parseInt(module_id, 10);
var html = '';
html += '<div class="popup-wrapper popup-module">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
$('.popup-container').css('visibility', 'hidden');
$.ajax({
url: 'index.php?route=journal3/popup/get&module_id=' + module_id + '&popup=module',
success: function (html) {
var $html = $(html);
var $popup = $html.siblings('.module-popup');
var $style = $html.siblings('style');
var $content = $popup.find('.popup-container');
$('#popup-style-' + module_id).remove();
$('head').append($style.attr('id', 'popup-style-' + module_id));
$('.popup-wrapper').attr('class', $popup.attr('class'));
$('.popup-container').html($content.html());
$('.popup-container').css('visibility', 'visible');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
}
});
};
window['open_login_popup'] = function () {
if ($('html').hasClass('iphone') || $('html').hasClass('ipad')) {
iNoBounce.enable();
}
var html = '';
html += '<div class="popup-wrapper popup-login">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>';
html += ' <iframe src="index.php?route=account/login&popup=login" width="100%" height="100%" frameborder="0" onload="this.height = this.contentWindow.document.body.offsetHeight; $(this).prev(\'.journal-loading\').fadeOut();"></iframe>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
};
window['open_register_popup'] = function () {
if ($('html').hasClass('iphone') || $('html').hasClass('ipad')) {
iNoBounce.enable();
}
var html = '';
html += '<div class="popup-wrapper popup-register">';
html += ' <div class="popup-container">';
html += ' <button class="btn popup-close"></button>';
html += ' <div class="popup-body">';
html += ' <div class="popup-inner-body">';
html += ' <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>';
html += ' <iframe src="index.php?route=account/register&popup=register" width="100%" height="100%" frameborder="0" onload="this.height = this.contentWindow.document.body.offsetHeight; $(this).prev(\'.journal-loading\').fadeOut();"></iframe>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div class="popup-bg popup-bg-closable"></div>';
html += '</div>';
// show modal
$('.popup-wrapper').remove();
$('body').append(html);
setTimeout(function () {
$('html').addClass('popup-open popup-center');
}, 10);
};
window['show_notification'] = function (opts) {
opts = $.extend({
position: 'center',
className: '',
title: '',
image: '',
message: '',
buttons: [],
timeout: Journal.notificationHideAfter
}, opts);
if ($('.notification-wrapper-' + opts.position).length === 0) {
$('body').append('<div class="notification-wrapper notification-wrapper-' + opts.position + '"></div>');
}
var html = '';
var buttons = $.map(opts.buttons, function (button) {
return '<a class="' + button.className + '" href="' + button.href + '">' + button.name + '</a>';
});
html += '<div class="notification ' + opts.className + '">';
html += ' <button class="btn notification-close"></button>';
html += ' <div class="notification-content">';
if (opts.image) {
html += ' <img src="' + opts.image + '" srcset="' + opts.image + ' 1x, ' + opts.image2x + ' 2x">';
}
html += ' <div>';
html += ' <div class="notification-title">' + opts.title + '</div>';
html += ' <div class="notification-text">' + opts.message + '</div>';
html += ' </div>';
html += ' </div>';
if (buttons && buttons.length) {
html += '<div class="notification-buttons">' + buttons.join('\n') + '</div>';
}
html += '</div>';
var $notification = $(html);
$('.notification-wrapper-' + opts.position).append($notification);
if (opts.timeout) {
setTimeout(function () {
$notification.find('.notification-close').trigger('click');
}, opts.timeout);
}
return $notification;
};
window['loader'] = function (el, status) {
var $el = $(el);
if (status) {
$el.attr('style', 'position: relative');
$el.append('<div class="journal-loading-overlay"><div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div></div>');
} else {
$el.attr('style', '');
$el.find('.journal-loading-overlay').remove();
}
};
window['resize_iframe'] = function (module_id, height) {
$('.module-popup-' + module_id + ' iframe').height(height);
};
from the code provided I can see that there is only one method that is really redirecting, and that is window['cart'].add
obviously, this code is responsible for redirecting
location = 'index.php?route=checkout/checkout';
yet, the location is not used anywhere after that. So it is a dead end.
Journal is one of the most mysterious frameworks I know, so it is no surprise for me. Here are something I would do.
edit this location parameter to the custom link like so location = 'index.php?route=product/special';
clear the twig cache so that we are sure the changes take place
if that doesn't work, check the controller file of catalog/controller/checkout/cart in method add and see if there is any custom redirect.
remember to check the modification files in system/storage/modification/... for the controller/checkout/cart.php and the twig view/theme/.../...twig
I hope I managed to push you in the right direction.
thanks for the help!! i found the culprit in the
/catalog/view/theme/journal3/template/product/product.twig
if ($btn.data('quick-buy') !== undefined) {
location = 'this-location-here';
}
hi I'm trying to use a datepicker bootstrap with a long date backwards selection. now I can only get 45 days back.
$( "#from" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
the code will disable all dates except the date specified in the array, but only a maximum of 45 days back. so the date of the array is not included.
any suggestions for this problem?
Thank you for your help
TRy this... Use '15/08/2018' to '15/8/2018'
$( "#js-date" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/8/2018', '16/8/2018', '17/8/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control" id="js-date">
Just another example, ("0" + (date.getMonth() + 1)).slice(-2) will get month in 2 digit format.
$('#datepicker').val("08-15-2018");/* for demo purpose */
$('#datepicker').datepicker({
multidate: true,
beforeShowDay: function(date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + ("0" + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
td.day.disabled {
opacity: 0.2;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<input id="datepicker">
I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That's why I am searching on how to change the editoptions:value of an edittype:"select".
Here's the sample jqGrid code:
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
Scenario:
All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.
How can I change the options?
I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
// get the selected stock column value before the editRow
var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
if( stockValue == 'Yes') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
} else if( stockValue == 'No') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
}
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}