I have this code for the previous and next buttons but when I use them they do not return any data unless I refresh the page. Is it as simple as adding some code to this to turn ajax to false or is there a better solution? And how should this be handled? Thanks.
$links.each(function)
{
var reverse = $(this).closest("." + prevLIClass).length;
$(this).buttonMarkup(
{
"role" : "button",
"theme" : "d",
"iconpos" : "notext",
"icon" : "arrow-" + (reverse ? "1" : "r")
})
.bind("vclick", function()
{
$.mobile.changePage($(this).attr("href"),{reverse : reverse});
return false;
});
});
Related
So I have created datatable with customized checkbox. I did not used the plugin of dataTable. I put checkbox manually every td. I am using map function to get data of the checkbox.
Problem here is, I only get values of checkbox on the first page, even tho I checked checkboxes of other pages, I only get the first page. I am using client side datatable btw. Here's my code
var values = $("input[name='checkbox_perprod[]']:checked")
.map(function(){
dataArr = {
'product_id' : $(this).val(),
'sys_shop' : $(this).data('sys_shop'),
'product_name' : $(this).data('product_name'),
'product_promo_type' : 1,
'product_promo_rate' : 1,
'product_orig_price' : $(this).data('product_price'),
'product_promo_price' : 0,
'product_promo_stock' : 0,
'product_curr_stock' : $(this).data('product_stock'),
'product_purch_limit' : 0,
'product_status' : 1
};
alignProductPromotion(dataArr, counter);
counter++;
productArray.push(dataArr);
}).get();
I just figured out other way to solve my problem. I just created separate function to save and delete value of checkbox. I'm storing the data using array and delete it using splice when i uncheck the checkbox. Here's the complete code
$('#table-grid-productpromo').on('click', 'input[type="checkbox"]', function() {
var value = $(this).val();
if(this.checked) {
dataArr = {
'product_id' : $(this).val(),
'sys_shop' : $(this).data('sys_shop'),
'product_name' : $(this).data('product_name'),
'product_promo_type' : 1,
'product_promo_rate' : 1,
'product_orig_price' : $(this).data('product_price'),
'product_promo_price' : 0,
'product_promo_stock' : 0,
'product_curr_stock' : $(this).data('product_stock'),
'product_purch_limit' : 0,
'product_status' : 1
};
addProdArr.push(dataArr); // record the value of the checkbox to valArray
} else {
var index = addProdArr.findIndex(p => p.product_id == $(this).val());
if (index !== -1) {
addProdArr.splice(index, 1);
}
}
});
I have a custom development with FullCalendar v4 js and I'm encountering a problem with eventLimitClick method.
When I click on it I want all events displayed inside popover to have a custom onclick eventListener for me to display aditional information of this current event in another custom popup.
This is my method so far:
eventLimitClick : function(info){
info.segs.forEach(function(seg){
seg.el.querySelector('div.fc-content').addEventListener('click', function(event){
console.log('event definition', event);
});
});
return "popover";
}
But this is adding the listener to the elements I already see in my calendar. I also tried with hiddenSegs instead of segs but it's not working.
So is there any way to achieve this without having to create a custom popup with all the events?
** EDIT ** [included code]
calendar object
{
locale : 'en',
plugins : ['dayGrid','timeGrid','list','interaction'],
header : {
left : 'prev,next today',
center : 'title',
right : 'dayGridWeek, dayGridMonth, dayGridDay'
},
allDaySlot : false,
aspectRatio : 1.8,
displayEventTime : false,
editable : false,
navLinks : true,
eventLimit : true,
views : {
dayGridMonth : {
eventLimit : 2
}
},
events : this.eventLIST,
datesRender : this.calendarviewRender,
eventClick : this.calendareventClick,
eventRender : this.calendareventRender
}
datesRender, eventClick and eventRender functions:
calendarviewRender = (info) => {
//set current and end dates
this.endDate = info.view.activeEnd;
this.currentDate = info.view.activeStart;
//retrieve fresh event/task info
this.refreshCalendar();
}
calendareventClick = (info) => {
this.info = {id : info.event.id,
tipo : info.event.extendedProps.tipo,
tipoObj : info.event.extendedProps.tipoObj,
isClosed : info.event.extendedProps.isClosed && info.event.extendedProps.isClosed !== null ? (info.event.extendedProps.isClosed === 'false' ? false : true) : false,
campos : info.event.extendedProps.lCamposInfo};
//allow second button
this.info.displaysecondbutton = !this.info.isClosed && this.info.tipoObj === 'Task';
//allow popup display
this.allowpopup = true;
info.jsEvent.preventDefault();
}
calendareventRender = (info) => {
let html = "<i class='fa fa-" + info.event.extendedProps.icon + " fa-lg'></i>";
info.el.querySelector('div.fc-content').style.cssText = 'height: 100%;';
//if month view apply padding
if(info.view.type.includes('dayGrid')) info.el.querySelector('div.fc-content').classList.add('slds-p-around_x-small');
//center elements
info.el.querySelector('div.fc-content').classList.add('slds-align_absolute-center');
//append icon
info.el.querySelector('div.fc-content').innerHTML = html;
}
I also removed eventLimitClick.
Based on your comments i see you were working with lightning-web-components.
I was facing same issue as you when working with LWC on salesforce.
I was able to solve this by editing main.js in daygrid package and add delay when Popover was getting hidden.
Here is snippet of code
function Popover(options) {
var _this = this;
this.isHidden = true;
this.margin = 10; // the space required between the popover and the edges of the scroll container
// Triggered when the user clicks *anywhere* in the document, for the autoHide feature
this.documentMousedown = function (ev) {
if (_this.el && !_this.el.contains(ev.target)) {
setTimeout(function () {
_this.hide();
}, 1000);
}
};
this.options = options;
}
functions starts in line 100 of main.js.
I was using Fullcalendar v4
Hello I am working on a application , where an error has occured after I updated my browsers to the newest version. For example the error doesnt occur if I am using IE 10, with IE 11 the error/bug it is not occuring. I will try the error so exactly as possible. If you cannot follow me, you can ask me explicit questions.
The bug is produced by javascript.
Main Description: I have a button, if it is clicked a popup fenster is opened dynamically with JQuery:
jQuery(html.join('')).dialog(
{
modal : true,
width : 650,
height : 500,
autoOpen : true,
closeOnEscape : true,
draggable : true,
resizable : false,
buttons : [
/*
* { text: alerts_GetMessageText(ghAlertsDetailsMessages,
* 'Alerts.AlertDetails.Reason.Dialog.Cancel') ,click:
* function() { jQuery( this ).dialog( "close" ); }
* ,classes: 'ButtonDialogLeft' },
*/
{
text : alerts_GetMessageText(ghAlertsDetailsMessages,
'Alerts.AlertDetails.Reason.Dialog.OK'),
click : alerts_Details_CloseReasonDialog,
classes : 'ButtonDialogRight'
} ]
});
The bug is, that the Popup-Window is closed immediately after it is shown. I suppose the cause is that the current is redirected to the same current page. So I am landing on the same page with closed popup-window.
I know it is not easy to explain the point, but what is irritating me, that no errors are shown in the console.
The popup window is filled by calling:
goMyAlertsCommandQueue.addAjaxCall({
type : "GET",
url : './showAlertsAlertReasonAjax.do',
dataType : "html",
data : ({
AjaxAction : 'data',
AlertId : alertId
})
}, alerts_Details_OpenReasonDialogReady);
goMyAlertsCommandQueue.run();
alerts_Details_OpenReasonDialogReady is looking like:
function alerts_Details_OpenReasonDialogReady(poHtml) {
// Button ausrichten
/*
* jQuery("button[classes='ButtonDialogLeft']",
* jQuery(this).parent()).css("float","left");
*/
jQuery("button[classes='ButtonDialogRight']", jQuery(this).parent()).css(
"float", "right");
// show dialog data
jQuery("#ReasonDialog div").remove();
jQuery("#ReasonDialog").append(poHtml);
// 'Close'-Button ausblenden
jQuery(".ui-dialog-titlebar-close").show();
dropdownList();
firstTime = false;
}
some time later this function jquery-ui:
_delay: function( handler, delay ) {
function handlerProxy() {
return ( typeof handler === "string" ? instance[ handler ] : handler )
.apply( instance, arguments );
}
var instance = this;
return setTimeout( handlerProxy, delay || 0 );
},
After return ( typeof handler === "string" ? instance[ handler ] : handler )
.apply( instance, arguments ); is being executed, the page is redirected to the current page and the popup is disappearing. No errors are shown in the console. So I cannot recognize what causes the error. If u have any questions so please ask, I am grateful for any help.
Edit: #halcyon
function alerts_Details_OpenReasonDialog() {
var alertId = jQuery(this).attr("alertId");
if (firstTime) {
//
//jQuery("#ReasonDialog").dialog('destroy');
jQuery("#ReasonDialog").remove();
var html = [];
var i = -1;
html[++i] = "<div class='cReasonDialog' id='ReasonDialog' title='"
+ alerts_GetMessageText(ghAlertsDetailsMessages,
'Alerts.AlertDetails.Reason.Dialog.Title') + "'>";
html[++i] = "<div style='margin-top:50px; text-align:center;'>"
+ alerts_GetMessageText(ghAlertsDetailsMessages,
'Alerts.AlertDetails.Reason.Dialog.LoadingData')
+ "</div>";
html[++i] = "<div style='margin-top:25px; text-align:center;'><img src='./reportingErgon/img/icon_loading.gif' alt='"
+ alerts_GetMessageText(ghAlertsDetailsMessages,
'Alerts.AlertDetails.Reason.Dialog.LoadingData')
+ "' /></div>";
html[++i] = "</div>";
jQuery(html.join('')).dialog(
{
modal : true,
width : 650,
height : 500,
autoOpen : true,
closeOnEscape : true,
draggable : true,
resizable : false,
buttons : [
/*
* { text: alerts_GetMessageText(ghAlertsDetailsMessages,
* 'Alerts.AlertDetails.Reason.Dialog.Cancel') ,click:
* function() { jQuery( this ).dialog( "close" ); }
* ,classes: 'ButtonDialogLeft' },
*/
{
text : alerts_GetMessageText(ghAlertsDetailsMessages,
'Alerts.AlertDetails.Reason.Dialog.OK'),
click : alerts_Details_CloseReasonDialog,
classes : 'ButtonDialogRight'
} ]
});
goMyAlertsCommandQueue.reset();
goMyAlertsCommandQueue.addAjaxCall({
type : "GET",
url : './showAlertsAlertReasonAjax.do',
dataType : "html",
data : ({
AjaxAction : 'data',
AlertId : alertId
})
}, alerts_Details_OpenReasonDialogReady);
goMyAlertsCommandQueue.run();
firstTime = false;
} else {
jQuery("#dropdown1 input").val("");
jQuery("#FilterText").val("");
jQuery("#FilterValue").val("");
jQuery("input[name=Rating]:checked").attr("checked", false);
jQuery(".cErrorMessage").text("");
jQuery("#ReasonDialog").dialog('open');
}
}
I would like to have an object that returns status true/false based on the presence of an element in the DOM. I can't get the variable to actually maintain a state other than the state of the loaded page. My last attempt was rather stupid and resulted in Maximum call stack size exceeded, which was expected. Any way that I could have these variables change with the DOM?
var navigation = function runNav(){
runNav();
var navigation = {
globe : {
element : $("#icons .globe"),
status : (function(){
return ($(".window_stable.globe").length == 1) ? true : false;
})()
},
cart : {
element : $("#icons .cart"),
status : (function(){
return ($(".window_stable.cart").length == 1) ? true : false
})()
},
phone : {
element : $("#icons .phone"),
status : (function(){
return ($(".window_stable.phone").length == 1) ? true : false
})()
}
}
return navigation;
}();
example
navigation.cart.status
false
-- Enabled the element
navigation.cart.status
false
($(".window_stable.cart").length == 1) ? true : false
true
You should remove the call to runNav() at the start of your code. It's causing an infinite recursion loop. Other than that, your code looks fine.
I think I get what you're trying to do. I think you want the function you've defined for status to run every time you access the status property.
To my knowledge, I don't think you can do it just by making it a property. I think you need to make it a function.
Like this: (jsFiddle)
var navigation = {
globe: {
element: $("#icons .globe"),
getStatus: function() { return ($(".window_stable.globe").length > 0); }
},
cart: {
element: $("#icons .cart"),
getStatus: function() { return ($(".window_stable.cart").length > 0); }
},
phone: {
element: $("#icons .phone"),
getStatus: function() { return ($(".window_stable.phone").length > 0); }
}
};
alert("status = "+ navigation.cart.getStatus());
The problem that you are seeing is because the "status" property is being set immediately. So if the navigation object is initialized before these elements are added to the DOM, "status" will always be false.
If you are dead set on accessing "status" like you would a property, you can use the Object.defineProperty pattern: http://jsfiddle.net/TFVFS/
var navigation = (function runNav(){
var navigation = {
globe : {
element : $("#icons .globe")
},
cart : {
element : $("#icons .cart")
},
phone : {
element : $("#icons .phone")
}
};
Object.defineProperty(navigation.globe, "status", {
get:function(){return $(".window_stable.globe").length == 1 ? true : false;}
});
Object.defineProperty(navigation.cart, "status", {
get:function(){return $(".window_stable.cart").length == 1 ? true : false;}
});
Object.defineProperty(navigation.phone, "status", {
get:function(){return $(".window_stable.phone").length == 1 ? true : false;}
});
return navigation;
})();
console.log(navigation.cart.status);
console.log(navigation.globe.status);
console.log(navigation.phone.status);
This isn't fully backwards compatible, and isn't fully supported in IE prior to version 9.
#Travesty3's answer will be backwards compatible, but it requires a change in syntax. Personally, I would recommend his answer if you need to support version of IE before 9.
I have enabled the 'fontsizeselect' plugin in tinyMCE. My question is how do I remove the header (title) of the drop-down menu?
Edit:
I've tried removing it using JQuery .remove(), but after that the height of whole list is calculated wrong.
The second option I tried was:
http://www.tinymce.com/wiki.php/API3:method.tinymce.ui.DropMenu.remove
But that just went wrong and "fontsizeselect.remove(title)" (analogically to .add) makes error to whole tinyMCE - "missing : after property id". Problably it is completly bad method to do this.
The third option was editing tiny_mce\themes\advanced\editor_template_src.js line 467:
c = ed.controlManager.createListBox('fontsizeselect', {title : 'advanced.font_size', onselect : function(v) {...}
but seems, that TinyMCE developers thought, that every drop-down must have title/header
SOLVED:
before initialization of MCE we have to override the menu rendering function
(function(tinymce) {
var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each, Dispatcher = tinymce.util.Dispatcher, undef;
tinymce.create('tinymce.ui.ListBoxNoTitle:tinymce.ui.ListBox', {
renderMenu : function() {
var t = this, m;
m = t.settings.control_manager.createDropMenu(t.id + '_menu', {
menu_line : 1,
'class' : t.classPrefix + 'Menu mceNoIcons',
max_width : 250,
max_height : 150
});
m.onHideMenu.add(function() {
t.hideMenu();
t.focus();
});
/* m.add({
title : t.settings.title,
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
*/
each(t.items, function(o) {
// No value then treat it as a title
if (o.value === undef) {
m.add({
title : o.title,
role : "option",
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
} else {
o.id = DOM.uniqueId();
o.role= "option";
o.onclick = function() {
if (t.settings.onselect(o.value) !== false)
t.select(o.value); // Must be runned after
};
m.add(o);
}
});
t.onRenderMenu.dispatch(t, m);
t.menu = m;
}
});
})(tinymce);
And with this comment on "m.add" You just have to add
tinyMCE.init({
setup : function(ed) {
ed.onBeforeRenderUI.add(function(ed){
ed.controlManager.setControlType('listbox', tinymce.ui.ListBoxNoTitle);
});
}
});
this setup to standard initialization of tinyMCE. So, it can be done without editing source files.