Preview not display straight away - javascript

When I click on my button's at top of textarea it opens either a hyperlink modal or a image insert modal shown in codepen example below.
I can create and insert links and images fine.
How ever when I create the links or image and click save on modal the preview does not show straight away I have to press a key in textarea to see new changes in preview.
Question: When I add a new hyperlink or image from my bootstrap modal
and click save how can I make sure the changes show up in preview
straight away. Using showdown.js
CODEPEN EXAMPLE
Script
$("#message").on('keyup paste copy change', function() {
var text = document.getElementById('message').value,
target = document.getElementById('showdown'),
converter = new showdown.Converter({parseImgDimensions: true}),
html = converter.makeHtml(text);
target.innerHTML = html;
});
Full Script
$('#button-link').on('click', function() {
$('#myLink').modal('show');
});
$('#button-image').on('click', function() {
$('#myImage').modal('show');
});
$('#button-smile').on('click', function() {
$('#mySmile').modal('show');
});
$('#myLink').on('shown.bs.modal', function() {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
$('#link_title').val(selectedText);
$('#link_url').val('http://');
});
$('#myImage').on('shown.bs.modal', function() {
$("#image_url").attr("placeholder", "http://www.example.com/image.png");
});
$("#save-image").on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
var counter = findAvailableNumber(textarea);
var replace_word = '![enter image description here]' + '[' + counter + ']';
if (counter == 1) {
if ($('input#image_width').val().length > 0) {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val() + ' =' + $('input#image_width').val() + 'x' + $('input#image_height').val();
} else {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val();
}
} else {
var add_link = '\n' + ' [' + counter + ']: ' + $('#image_url').val();
}
textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link;
});
$("#save-link").on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
var counter = findAvailableNumber(textarea);
if ($('#link_title').val().length > 0) {
var replace_word = '[' + $('#link_title').val() + ']' + '[' + counter + ']';
} else {
var replace_word = '[enter link description here]' + '[' + counter + ']';
}
if (counter == 1) {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#link_url').val();
} else {
var add_link = '\n' + ' [' + counter + ']: ' + $('#link_url').val();
}
textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link;
});
function findAvailableNumber(textarea){
var number = 1;
var a = textarea.value;
if(a.indexOf('[1]') > -1){
//Find lines with links
var matches = a.match(/(^|\n)\s*\[\d+\]:/g);
//Find corresponding numbers
var usedNumbers = matches.map(function(match){
return parseInt(match.match(/\d+/)[0]); }
);
//Find first unused number
var number = 1;
while(true){
if(usedNumbers.indexOf(number) === -1){
//Found unused number
return number;
}
number++;
}
}
return number;
}
$("#message").on('keyup paste copy change', function() {
var text = document.getElementById('message').value,
target = document.getElementById('showdown'),
converter = new showdown.Converter({parseImgDimensions: true}),
html = converter.makeHtml(text);
target.innerHTML = html;
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

Just trigger the keyup event at the end of the $("#save-link").on('click', function(e) {});
I assume as jQuery setting value doesn't trigger any of the related events set on $("#message")
$("#message").trigger('keyup');
Just tested on the codepen and works fine,
$("#save-link").on('click', function(e) {
//All your code
// ....
$("#message").trigger('keyup');
});
I hope this helps !!

Related

How to optimize and minify the following code

I am attaching an excerpt from my code:
document.getElementById("product-selector-25b").onchange = function () {
document.getElementById("purchase-25b").href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
document.getElementById("product-selector-26").onchange = function () {
document.getElementById("purchase-26").href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
document.getElementById("product-selector-29").onchange = function () {
document.getElementById("purchase-29").href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
document.getElementById("product-selector-Zx3").onchange = function () {
document.getElementById("purchase-Zx3").href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
document.getElementById("product-selector-001sfF").onchange = function () {
document.getElementById("purchase-001sfF").href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
As you can see, the code is repeated in everything except IDs getElementById("product-selector-25b") purchase-25b
The problem is that in total I have hundreds of different IDs and I believe that this code can be optimized somehow, but I don’t understand how. What do you advise?
Here is how you can refacto your code :
const selectors = [
"product-selector-25b",
"product-selector-26",
"product-selector-29",
"product-selector-Zx3",
"product-selector-001sfF"
];
const updateLink = (e) => {
const selectorId = e.target.id;
const productId = e.target.selectedOptions[0].getAttribute("data-product");
const variationId = e.target.value;
const purchaseId = `purchase-${selectorId.split("-")[1]}`;
document.getElementById(purchaseId).href = `https://example.com/?add-to-cart=${productId}&variation_id=${variationId}/`;
};
document.addEventListener("DOMContentLoaded", () => {
selectors.forEach(selectorId => {
const element = document.getElementById(selectorId);
if(element){
element.onchange = updateLink;
}else {
console.error(`Element with id ${selectorId} not found`)
}
});
});
Just add others ids to the array.
When you want to optimize a repetitive code, the idea is to create a reusable function and loop inside of it
My solution is this:
var elements = document.querySelectorAll('[id^="product-selector-"]');
var updateLink = function(el) {
var tagId = el.id.replace("product-selector-", "");
document.getElementById("purchase-" + tagId).href = "https://example.com/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}
for (var i=0; i < elements.length; i++) {
elements[i].addEventListener("change", function(){
updateLink(this);
});
}
Note: I assume all IDs start with "product-selector-".
Otherwise you need to create an array which contains all the IDs.

Google Ads scripts - how to do customised or long rolling date ranges

I'm using the following script to export Google Ads data from my account, but I am stuck with Google's pre-set date ranges and can't figure out how/if it's possible to jimmy these. Ideal date range would be year to date, with the report refreshing each day and adding on a fresh day's data, but would also be interested if we can get all time to work.
I'm a coding novice, so apologies in advance.
Script:
function main() {
var currentSetting = new Object();
currentSetting.ss = SPREADSHEET_URL;
// Read Settings Sheet
var settingsSheet = SpreadsheetApp.openByUrl(currentSetting.ss).getSheetByName(SETTINGS_SHEET_NAME);
var rows = settingsSheet.getDataRange();
var numRows = rows.getNumRows();
var numCols = rows.getNumColumns();
var values = rows.getValues();
var numSettingsRows = numRows - 1;
var sortString = "";
var filters = new Array();
for(var i = 0; i < numRows; i++) {
var row = values[i];
var settingName = row[0];
var settingOperator = row[1];
var settingValue = row[2];
var dataType = row[3];
debug(settingName + " " + settingOperator + " " + settingValue);
if(settingName.toLowerCase().indexOf("report type") != -1) {
var reportType = settingValue;
} else if(settingName.toLowerCase().indexOf("date range") != -1) {
var dateRange = settingValue;
} else if(settingName.toLowerCase().indexOf("sort order") != -1) {
var sortDirection = dataType || "DESC";
if(settingValue) var sortString = "ORDER BY " + settingValue + " " + sortDirection;
var sortColumnIndex = 1;
}else {
if(settingOperator && settingValue) {
if(dataType.toLowerCase().indexOf("long") != -1 || dataType.toLowerCase().indexOf("double") != -1 || dataType.toLowerCase().indexOf("money") != -1 || dataType.toLowerCase().indexOf("integer") != -1) {
var filter = settingName + " " + settingOperator + " " + settingValue;
} else {
if(settingValue.indexOf("'") != -1) {
var filter = settingName + " " + settingOperator + ' "' + settingValue + '"';
} else if(settingValue.indexOf("'") != -1) {
var filter = settingName + " " + settingOperator + " '" + settingValue + "'";
} else {
var filter = settingName + " " + settingOperator + " '" + settingValue + "'";
}
}
debug("filter: " + filter)
filters.push(filter);
}
}
}
// Process the report sheet and fill in the data
var reportSheet = SpreadsheetApp.openByUrl(currentSetting.ss).getSheetByName(REPORT_SHEET_NAME);
var rows = reportSheet.getDataRange();
var numRows = rows.getNumRows();
var numCols = rows.getNumColumns();
var values = rows.getValues();
var numSettingsRows = numRows - 1;
// Read Header Row and match names to settings
var headerNames = new Array();
var row = values[0];
for(var i = 0; i < numCols; i++) {
var value = row[i];
headerNames.push(value);
//debug(value);
}
if(reportType.toLowerCase().indexOf("performance") != -1) {
var dateString = ' DURING ' + dateRange;
} else {
var dateString = "";
}
if(filters.length) {
var query = 'SELECT ' + headerNames.join(",") + ' FROM ' + reportType + ' WHERE ' + filters.join(" AND ") + dateString + " " + sortString;
} else {
var query = 'SELECT ' + headerNames.join(",") + ' FROM ' + reportType + dateString + " " + sortString;
}
debug(query);
var report = AdWordsApp.report(query);
try {
report.exportToSheet(reportSheet);
var subject = "Your " + reportType + " for " + dateRange + " for " + AdWordsApp.currentAccount().getName() + " is ready";
var body = currentSetting.ss + "<br>You can now add this data to <a href='https://www.optmyzr.com'>Optmyzr</a> or another reporting system.";
MailApp.sendEmail(EMAIL_ADDRESSES, subject, body);
Logger.log("Your report is ready at " + currentSetting.ss);
Logger.log("You can include this in your scheduled Optmyzr reports or another reporting tool.");
} catch (e) {
debug("error: " + e);
}
}
function debug(text) {
if(DEBUG) Logger.log(text);
}
I've tried overwriting the data validation in the host spreadsheet, but think I need to amend the script itself also.

Google Api Calendar If else ,done with javascript

So I'm doing Google Calendar Api, that shows all the booked things for that day. I'm trying to get this code to print 'Vapaa' (means free in finnish and is shown if there's nothing booked in that time) only once but still print the rest of the appointments that come later that day. Here's the code that does the if else
if (events.length > 0) {
for (i = 0; i < events.length; i++) {
var event = events[i];
var when = new Date(event.start.dateTime);
var hs = addZero(when.getHours());
var ms = addZero (when.getMinutes());
var end = new Date(event.end.dateTime);
var he = addZero(end.getHours());
var me = addZero (end.getMinutes());
var now = new Date();
var hn = addZero(now.getHours());
var mn = addZero (end.getMinutes());
if (!when) {
when = event.start.date;
}
if (when.getTime() <= now.getTime() && now.getTime() <= end.getTime()){
appendPre(event.summary + ' ' + hs + (':') + ms + '' + (' - ') + '' + he + (':') + me + '');
} else {
appendPre('Vapaa');
appendPre(event.summary + ' ' + hs + (':') + ms + '' + (' - ') + '' + he + (':') + me + '');
}
return;
}
} else {
appendPre('Ei varauksia');
}
Also the appendPre is printed to html with this code
function appendPre(message) {
if (message != 'Vapaa'){
var pre = document.getElementById('booked');
var textContent = document.createTextNode(message + '\n' + '\n');
} else {
var pre = document.getElementById('free');
var textContent = document.createTextNode(message + '\n' + '\n');
}
pre.appendChild(textContent);
}
I'm so lost so any help would be awesome.
return; stops right where it is and exits the function, so your for loop will only run once with the return in there. See W3C for more info.
Typically, if you want to exit only the loop, but continue in the function (if you have code after it, it doesn't look like you've shown that here), you can use break;. If you want to skip the rest of the stuff in the for loop (nothing is shown in your example), but continue iterating onto the next entry, you can use continue;. See W3C for more details.

Wrap only selected text with a html tag using javascript

I am trying to wrap only selected text with a specific tag using javascript tag. I find a code but when I click a button then it will add a tag which I don't want because I only want to apply the tag around selected element.
Example JS code:
function wrapText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('#bold').click(function() {
wrapText("myTa", "<strong>", "</strong>");
});
$('#italic').click(function() {
wrapText("myTa", "<em>", "</em>");
});
$('#underline').click(function() {
wrapText("myTa", "<u>", "</u>");
});
$('#code').click(function() {
wrapText("myTa", "<pre><code>", "</code></pre>");
});
This is the Full working code Link
Any help will be appreciated.
Use this condition: if(start != end){ ... }
http://jsfiddle.net/sherali/bd4np/119/
function wrapText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
if (start != end){
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
}

MultiSelect : Object expected. Jquery does not work in IE. Works well in Firefox

The following Jquery code works well in Firefox but throws exception in IE. Please help. The following code will render a multi select box where you can drag and drop values from one box to other. The code when run in IE throws an object expected expception. As it in inside a large page, the actual place of bug can not be identified.
$(document).ready(function() {
//adding combo box
$(".combo").each(function() {
var name = "to" + $(this).attr('name');
var $sel = $("<select>").addClass("multi_select");
$sel.addClass("combo2");
$sel.attr('id', $(this).attr('id') + "_rec");
$(this).after($sel);
});
$(".multi_select").hide();
var $tab;
var i = 0;
var temp = 0;
//creating different div's to accomodate different elements
$(".multi_select").each(function() {
var $cont = $("#container");
var $input;
if ($(this).hasClass("combo") || $(this).hasClass("combo2")) {
var $col = null;
if ($(this).hasClass("combo")) {
$tab = $("<table>");
$cont = ($tab).appendTo($cont);
var idT = $(this).attr('id');
var $row = $("<tr id='" + idT + "_row1'>").appendTo($tab);
$col = $("<td id='" + idT + "_col1'>").appendTo($row);
$input = $("<input class='searchOpt'></input><img src='images/add.png' class='arrow1'/> ");
$("<div>").addClass('ip_outer_container combo').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col);
($row).after("<tr><td></td><td><textarea name='" + $(this).attr("name") + "Text' id='" + $(this).attr("id") + "Text'></textarea> </td></tr>");
$cont = $tab;
} else {
var idTm = $(this).attr('id');
var $row2 = $("<tr id='" + idTm + "_row2'>").appendTo($tab);
var $col2 = $("<td id='" + idTm + "_col2'>").appendTo($row2);
$input = $("<input class='searchOpt'></input>");
$("<div>").addClass('ip_outer_container combo2').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col2);
}
} else {
$("<div>").addClass('ip_outer_container' + classSelect).attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($cont);
}
$("<div>").addClass('outer_container').attr('id', $(this).attr('id') + "_div").appendTo('#' + $(this).attr('id') + "out_div");
$($input).appendTo("#" + $(this).attr('id') + "out_div");
});
//adding options from select box to accomodate different //elements
$(".multi_select option").each(function() {
$(this).attr('id', $(this).parent().attr('id') + "option_" + i);
var val = $(this).val().replace("#comment#", "");
var $d = $("<div class='multi_select_div'>" + val + "</div>").attr('id', $(this).parent().attr('id') + 'option_div_' + i);
$d.appendTo("#" + $(this).parent().attr('id') + "_div");
i++;
});
//delete function
$(".delete").click(function() {
$(this).parent().remove();
});
//input
$(".searchOpt").keyup(function() {
$(this).prev().children().show();
var val = $(this).val();
if (val != "") {
var selId = $(this).prev().attr('id');
selId = selId.replace("_div", "option_div");
$(this).prev().children().not("div[id^=" + selId + "]:contains(" + val + ")").hide();
//var $d=$('div[id^="multi_select_senoption_div"]');
//$('div[id^="multi_select_senoption_div"]').not('div[id^="multi_select_senoption_div"]:contains("xls")').hide();
}
});
var optionId = 0;
$(".arrow1").click(function() {
var divId = $(this).parent().attr("id");
divId = divId.replace("out_div", "");
var textValue = "#comment#" + $("#" + divId + "Text").val();
var selToId = divId + "_rec";
$("#" + divId + " option[selected='selected']").each(function() {
var idOpt = $("#" + selToId).attr("id") + "option_" + optionId;
$opt = $("<option>");
$opt.attr("id", idOpt).attr("value", $(this).val() + textValue);
$("#" + selToId).append($opt);
var value = $(this).val().replace("#comment#", "");
var divId = $("#" + selToId).attr('id') + 'option_div_' + optionId;
var $de = $("<div class='multi_select_div'><img class='delete' src='images/delete.png'></img>" + value + "</div>").attr('id', divId);
$de.appendTo("#" + $("#" + selToId).attr('id') + "_div");
$("#" + divId).bind("click", handler);
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
$("#" + divId).attr("title", textValue.replace("#comment#", ""));
//$("#"+divId).bind("mouseenter",handler2);
//$("#"+divId).bind("mouseleave",handler3);
$(".delete").bind("click", handler1);
optionId++;
});
// function code
//
});
$(".multi_select_div").click(function() {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
});
function handler(event) {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
}
function handler1(event) {
$(this).parent().remove();
}
function handler2(event) {
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
var pos = $(this).position();
var cssObj = {
top: pos.top - 100,
left: pos.left + 200
};
var $divImg = $("<td>");
var $divCl = $("<div class='comment'>" + comment + "</div>").css(cssObj);
$divImg.append($divCl);
$(this).parent().parent().parent().parent().append($divImg);
}
function handler3(event) {
$(".comment").remove();
}
});
function optionToDiv(option) {
var id_div = option.replace('option_', 'option_div_');
id_div = "#" + id_div;
return id_div;
}
function divToOption(div) {
var id_opt = div.replace('div_', '');
id_opt = "#" + id_opt;
return id_opt;
}​
IE browsers do not support indexOf for an array, which arises issue with javascript.
Add the below javascript in the head of the page, it might resolve your issue:
//
// IE browsers do not support indexOf method for an Array. Hence
// we add it below after performing the check on the existence of
// the same.
//
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function (obj, start)
{
for (var i = (start || 0), j = this.length; i < j; i++)
{
if (this[i] === obj)
{
return i;
}
}
return -1;
};
}

Categories