We Keep Coding

JQuery Text Editor - adding additional dropdown list in the toolbar

I've implemented the JQueryTE in my application. Along with the usual tools that JQueryTE has to offer, I'd like to include a drop down picker with a list of predefined fields acting like placeholders, such as [[Title]],[[FirstName]] etc. I know its possible with CKEditor using placeholder plugin but can it be done with JQueryTE?
The most obvious method I would have thought was to try and add/append a option menu to the toolbar which will fire off some code which adds the field name, but not having much luck.
Can someone have a look at my jsfiddle please?
jsfiddle http://jsfiddle.net/jalz/hou94u8a/2/
$('.jqte-primary').jqte(
{
title: true,
format: true,
fsize: true,
color: true,
b: true,
i: true,
u: true,
ol: true,
ul: true,
sub: true,
sup: true,
outdent: true,
indent: true,
left: true,
center: true,
right: true,
strike: true,
link: true,
unlink: true,
remove: true,
rule: true,
source: false
}
);
$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\">Save</span>" );
/* this is the one that does not work - this control does not display in JQueryTE and then figure out how to fire the value chosen in the appropriate place */
selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('.jqte_toolbar').append($("<option/>", {
value: key,
text: value
}));
});
$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\">End</span>" );
$(".field_list").click( function () {
/* Insert the value into */
alert('insert value');
} )
Many thanks

hoping this helps to anybody that need to do something like this. I was using JQTE v 1.4 and JQuery 3.4 with JQuery-ui 1.12. What I did was to mimic the text format combo box that already have the desired behavior.
In this example the list is dynamically populated from an AJAX call which is the reason why I use dynamic element's Ids; on top of that I needed to place the same combo box with different content once on each depending on a parameter because there are many jqte's dynamically added to my page. Given that scenario the main entrance:
$("div[id^=\"jqteContainer_\"]").each(function(){
let currParamId = $(this).attr("id").split("_")[1]; //Obtain the id which have the param to know which combo belongs to which jqte toolbar
let currentCombo = $(this);
$.ajax("getData.[php/jsp/asp/aspx]",{ // The AJAX call to get the information for the options
data: { id: currParamId },
success: function(dataResponse){
let data = dataResponse.data; //Assuming data is an array with the information
let newOptions = "";
for(let i=0; i<data.length; i++){ //Mimicking the HTML and CSS of jqte format combo box for each option
newOptions += "<a class=\"jqte_format jqte_format_0 unselectable optMyClass\" data-myid=\"" + data[i].myId + "\" data-otherid=\"" + data[i].otherId + "\" role=\"menuitem\" unselectable=\"on\" style=\"user-select: none;\">" + data[i].name + "</a>";
}
// Mimicking the HTML and CSS of the combo box container as jqte format combo box container
currentCombo.children("div.jqte").children("div.jqte_toolbar").append("<div class=\"jqte_tool jqte_tool_1 unselectable\" role=\"button\" style=\"user-select: none;width:15%\" unselectable=\"on\"><a id=\"myCustomCombo_" + currParamId + "\" data-myid=\"" + currParamId +"\" class=\"jqte_tool_label unselectable myCustomCombo\" unselectable=\"on\" style=\"user-select: none;width:95%\"><span class=\"jqte_tool_text unselectable nowrap\" unselectable=\"on\" style=\"user-select: none;\">My Combo Label</span><span class=\"jqte_tool_icon unselectable\" unselectable=\"on\" style=\"user-select: none;\"></span></a><div id=\"myComboOptions_" + currParamId + "\" class=\"jqte_formats unselectable\" unselectable=\"on\" style=\"user-select: none; display: none;\">" + newOptions + "</div></div>");
},
error: showResult,
method: "POST"
});
});
$("body").on("click", ".myCustomCombo", function( event ) {
event.preventDefault();
$("#myComboOptions_"+$(this).attr("data-myid")).css("display","block");
});
$("body").on("click", ".optMyClass", function( event ) {
event.preventDefault();
// Your code per option. you can use the data-xxxx to differentiate
});
First of all, I had to add the combo box in each jqte in the page. In my case I have many jqte-s. However, this can be avoided just setting your Id if you have only one.
Next is mimicking jqte's format combo box used to list the text formats. The first part is adding the options, which are a bunch of anchors (a tags) with the information needed for your code in order to differentiate each one and the combo box if needed. In this case, the options are from an AJAX call, but it can be replaced for any static HTML that mimics the HTML showed here.
After implementing our options they are added to the corresponding jqte's toolbar which is the grandchildren of the jqte container (usually a div as in my case where the jqte textarea is a direct child), and add the rest of the HTML and CSS mimicking jqte's format combo box. Pay attention in the custom class added here (.myCustomCombo) because it is the way to make the show/hide of the options.
Finally is the javascript code which is pretty straight forward. The first one is just to show the options of our dropdown combo box, the next one is to do whatever we need once the option is selected. Pay attention to the way it is done because using the usual $(".myCustomCombo").click(...) are not going to work due to the fact that the combo box is generated dynamically. If it is already in the page (statically defined) the usual way to define this event should work; the same applies for the options.
Hoping this example be useful. Have fun and a great day.

tooltip doesn't work in a table cell

My question might seems long, but I am trying to give relevant information in detail so please bear with me.
I am using tooltipster tooltip plugin (http://iamceege.github.io/tooltipster/) on my website. However my question is more related to JS instead of tooltipster plug in. I am easily able to integrate the tooltip plugin on my website and it is working just fine on images, buttons, etc where the content is static. However, I am populating tables dynamically based on the JSON response and I can't get the tooltip working on the table cells.
First I thought there might be some problem with the plugin. In a flash I switched to bootstrap inbuilt tooltip and I am facing the same problem. I can get bootstrap tooltip to work on other other elements apart from the table cells.
Here is my JS where I am adding the class customToolTip
function addBetTypeProductsToLegend(table) {
var betType = $.data(table, 'BetTableData').betType,
legendRow = $.data(table, 'BetTableData').legendRow,
productNotFount = true,
td;
$.each(betType.products, function(index,value) {
var betTypeHint = 'betTypeId_' + value.id + '_hint';
td = element.create('td');
element.setId(td, value.id);
element.setClassName(td, 'customToolTip'); // adding customToolTip class
element.setTitle(td, window[ 'betTypeId_' + value.id + '_hint']); // setting respective title tags
element.setInnerHtml(td, getBrandBetName(value.name));
legendRow.appendChild(td);
productNotFount = false;
});
// Racing Specials
td = element.create('td');
element.setId(td, betType.id);
element.setInnerHtml(td, betType.name);
if (productNotFount) legendRow.appendChild(td);
}
This is how I am assigning class name and title attributes
var element = {
create: function(htmlIndentifier) {
return document.createElement(htmlIndentifier);
},
setClassName: function(element, className) {
element.className = className;
},
setTitle: function(element, title) {
element.title = title;
}
}
JS plugin initialization
$(document).ready(function() {
$('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
});
So the above doesn't apply to the table cell I tried to use bootstrap tooltip and initialize the function like this.
$(".customToolTip").tooltip({
placement : 'top'
});
It works fine for other elements apart from table cells.
I tried to set padding as well for tooltip as well
$('.customToolTip').each(function(e) {
var p = $(this).parent();
if(p.is('td')) {
$(this).css('padding', p.css('padding'));
p.css('padding', '0 0');
}
$(this).tooltip({
placement: 'top'
});
});
I followed couple of other posts where people were facing problem with tooltip and table cells
bootstrap "tooltip" and "popover" add extra size in table
https://github.com/twbs/bootstrap/issues/5687
Seems like I have deal with the layout issue later on first I need to show the custom tooltip instead of default title attribute.

Your initialization starts on document ready, when table does not exist in DOM yet. So $('.customToolTip') does not find those.
What you need is to make function, something like this:
function BindTooltips(target) {
target = target || $(document);
target.find('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
}
And launch it on document ready, so it will find all .customToolTip in your document.
Then after your table is being inserted into dom launch this function again and provide container (table) as argument.

jQuery Datepick (Keith Wood) highlight defaultDate with a CSS-class

I am using the inline version of Keith Woods jquery datepick plugin.
The default value for the picker is set like this:
var dpInputField = $('input#datepicker-value');
var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00
$('#datepicker').datepick({
dateFormat: $.datepick.TIMESTAMP,
monthsToShow: 2,
changeMonth: false,
altField: '#datepicker-value',
onDate: showDayAndMonth,
defaultDate: defaultDate,
}, $.extend($.datepick.regional[window.language]));
Theres a form submit after selecting a date. If I debug the defaultDate its correct! Just a CSS-class is missing somehow.

Solved it. I am using the onShow: event to call a function which is selecting the HTML object by its class.
for example: class="dp1403344800000", as theres the timestamp as part of the css class, it was no problem to .addClass(datepicker-selected)

Jquery Date picker is Selecting today and default date given

I am using Jquery date picker for selecting a date, and I'd like to be able to default the selection to a given date.
Here's my code:
var SelectDate=new Date(2013, 06,25 , 0, 0, 0, 0) ;
$("#OnwardTravelDate").datepicker({
numberOfMonths: 2,
dateFormat: 'dd/mm/yy',
minDate: datePickMinDate_DT,
maxDate: datePickMaxDate_DT,
defaultDate: SelectDate
});
But the date selector control highlights both today's date and the date 'selectDate' . I want only 'selectDate' as highlighted

removeClass("ui-state-highlight"); should fix your problem.
but if you just want the highlight of today never show again, you may get the datepicker's source (jquery.ui.datepicker.js) and find this line to remove:
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
then compile it to use.

Datepicker assigns different classes to "today" and "selected day":
today - ui-state-highlight
selected day - ui-state-active
You can either remove or override styling of ".ui-datepicker .ui-state-highlight" or remove the class:
$("#OnwardTravelDate a.ui-state-highlight").removeClass("ui-state-highlight");

What about setting the value of #OnwardTravelDate in html or jquery?
HTML:
<input type="text" id="OnwardTravelDate" value="25/06/2013" />
jQuery:
$("#OnwardTravelDate").val("25/06/2013"); // Before datepicker code
Then you don't need your defaultDate: SelectDate at all :)
Hope that helps.
Edit: (more info)
You could also try the setDate method:
$("#OnwardTravelDate").datepicker("setDate", SelectDate); // After datepicker code
Edit: jsfidle
This JS fidle seems to work for me: jsfiddle
Maybe the styling on your theme makes it look like it's selected?

EDIT1: From here I found just a fix, but I'm not able to handle with your code.
$( "#datepicker" ).datepicker({
beforeShow: function(input, inst) {
window.setTimeout(function(){
$(inst.dpDiv).find('.ui-state-highlight.ui-state-hover').removeClass('ui-state-highlight ui-state-hover')
},0)
},
});
Check this JSFiddle and if possible update it with your code you trying.
EDIT2: By overriding the default css .ui-datepicker-today and a.ui-state-highlight of with the below one.
.ui-datepicker-today a.ui-state-highlight {
border-color: #d3d3d3;
background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
color: #555555;
}
Check out this JSFiddle

jQuery Date Picker on Multiple Fields using array notation

Using JS to generate a list of input fields that have the name of:
name="date_from[]"
The class, 'date_picker', is instantiated using:
$( ".date_picker" ).datepicker({ dateFormat: "dd-mm-yy" });
When a new record is generated using JS the new input field does in deed display the Date Picker but the date selected is inserted into the first field, always.
Is there any solution, or maybe an option in the date_picker to make it insert into the currently selected field?

The datepicker has a onClose event wich provide a variable with the result. You need to take it, split it, and set it to your inputs :
var $input = $('input')
$input.datepicker({
dateFormat: 'dd-mm-yy'
, onClose: function(dateText) {
for (var i = 0, date = dateText.split('-'), item; item = $input[i];) {
item.value = date[i++];
}
}
})​
Here is a live example.