We Keep Coding

Post from dynamic form to dynamic iframe in Chrome opens a new window

I am doing some tests to create a JavaScript widget that allows communication across domain.
I have a script tag that could be placed on any site that will inject a dynamic form and iframe into their page.
The idea I had was to set the dynamic form's target attribute to the name of the dynamic iframe, so that data can be posted from a third party site to my backend for processing.
Put it together and works great in Firefox, but in Chrome the submission forces a new window to open.
If I use a non dynamic iframe, it suddenly works. However it is not very elegant if I want my widget to be easy for third parties to integrate into their sites.
Anyone know how to get this working? I don't think it's my code because, as I say, the code works when the iframe is static. I have verified that the name and ID of the dynamic iframe are set as expected.
Cheers.
I have added a JSFiddle demoing this behaviour. Note that the JavaScript would actually be placed in a script tag beneath the div id Widget in the HTML. https://jsfiddle.net/n67w5tm7/
(function($) {
var TEST = (function() {
var param = {
source: '//localhost',
gateway: '/gateway.php'
},
_target,
_gateway,
get = function(id) {
var n = document.getElementById(id);
return (typeof n === 'undefined' ? $() : $(n));
},
init = function() {
_target = get('Widget');
_gateway = $(document.body).append('iframe', {
src : param['source'] + param['gateway'],
name : 'Gateway',
id : 'Gateway'
})
.node();
_submitter = _target.top()
.append('form', {
id: 'Form',
target: 'Gateway',
action: param['source'] + param['gateway'],
method: 'POST'
}).node();
$(_submitter)
.append('fieldset', {
'class': 'three'
})
.append('div', {
'class': 'row'
})
.append('label')
.addText('Some field')
.up()
.append('input', {
type: 'text',
name: 'field',
id: 'field'
})
.up()
.up()
.append('input', {
type: 'submit',
value: 'Submit'
})
.up()
.up()
.up();
ready();
},
ready = function() {
// Some work
};
function TEST() {
init();
};
return TEST;
})();
return new TEST();
})(ezJS);

I discovered the solution it seems, by accident.
The iframe name property needed to be set presumably before it was appended to the DOM. I have updated my JsFiddle ( https://jsfiddle.net/n67w5tm7/1/ ) with the following:
append: function(tag, attrs) {
var el = document.createElement(tag);
if (tag === 'iframe' && attrs && attrs.name) {
try {
el.name = attrs.name; // This seems to fix it!
el = document.createElement('<iframe name="' + attrs.name + '">');
} catch (e) {}
}
_last(_ref).appendChild(el);
_ref.push(el);
if (attrs && typeof attrs === 'object') {
_each(attrs, functions.attr);
}
return functions;
},

Making bootstrap-tags responsive, jquery events lost

I am trying to change this demo:
http://maxwells.github.io/bootstrap-tags.html
into a responsive version in which I can set it to readOnly and remove it from readOnly as I like. This code:
var alltags = ["new tag", "testtag", "tets", "wawa", "wtf", "wtf2"];
$(document).ready(function() {
var tagbox = $('#my-tag-list').tags({
suggestions: alltags
});
var tagenable = true;
$('#my-tag-list').focusout(function() {
if (tagenable) {
tagbox.readOnly = true;
$('#my-tag-list').empty();
tagbox.init();
tagenable = false;
}
});
$('#my-tag-list').click(function() {
if(!tagenable) {
tagbox.readOnly = false;
$('#my-tag-list').empty();
tagbox.init();
tagenable = true;
}
});
});
seems to work fairly well, it makes everything readonly after focusout and editable when I click it. However, the editing does not work since I cannot insert new tags nor delete them (seems to be like event handling was lost or something like that).
I am guessing that emptying the #my-tag-list div is causing this, but I cannot yet find a way to use for instance "detach" instead that removes everything inside (not the element itself) and putting it back in again.
I tried to make a JS Fiddle, but it isn't really working so well yet:
http://jsfiddle.net/tomzooi/cLxz0L06/
The thing that does work is a save of the entire website, which is here:
https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0
this link has the unminimized JS of the bootstrap-tags stuff I am using:
https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js

So far I managed to do this with some modifications of the bootstrap javascript code. I use two different tagbox which I hide and unhide with some click events.
var tagbox = $('#my-tag-list').tags({
suggestions: alltags,
tagData: tmp_tags,
afterAddingTag: function(tag) { tagboxro.addTag(tag); },
afterDeletingTag: function(tag) {tagboxro.removeTag(tag); }
});
var tagboxro = $('#my-tag-listro').tags({
suggestions: alltags,
tagData: tmp_tags,
readOnly: 'true',
tagSize: 'sm',
tagClass: 'btn-info pull-right'
});
$(document).mouseup(function (e) {
var container = $("#my-tag-list");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) { // ... nor a descendant of the container
if (tagsave) {
$("#my-tag-listro").show();
$("#my-tag-list").hide();
var tags = tagbox.getTags();
$.post("%basedir%/save.php", {
editorID:"new_tags",
tags:tags
}, function(data,status){
//alert("Data: " + data + "\nStatus: " + status);
});
tagsave = false;
}
}
});
$('#my-tag-listro').click(function() {
tagsave = true;
//$(".tag-list").toggle();
$("#my-tag-list").show();
$("#my-tag-listro").hide();
});
I had to modify the code of bootstrap-tags.js to allow for this since it normally deletes all of the usefull functions when it is considered readonly in the init function:
if (this.readOnly) {
this.renderReadOnly();
this.removeTag = function(tag) {
if (_this.tagsArray.indexOf(tag) > -1) {
_this.tagsArray.splice(_this.tagsArray.indexOf(tag), 1);
_this.renderReadOnly();
}
return _this;
};
this.removeTagClicked = function() {};
this.removeLastTag = function() {};
this.addTag = function(tag) {
_this.tagsArray.push(tag);
_this.renderReadOnly();
return _this;
};
this.addTagWithContent = function() {};
this.renameTag = function() {};
return this.setPopover = function() {};
}
would be awesome if this feature was incorporated in a somewhat less hacky way though :)

jquery: can find element, but unable to remove it

I've got stuck here with jQuery remove method. Here's a piece of code ...
clearTemplate : function(contentContainer) {
var container = $('body').find('#' + contentContainer);
if (container.length !== 0) {
console.log(container.length);
container.remove();
console.log(container.length);
}
}
Script can easily find '#'+contentContainer in DOM but is unable to remove it. It has no problem with removing children elements of container object as well.
Console.log returns (obviously) : 1 and 1
Container is also dynamically loaded into DOM.
Here's a bigger piece ...
var TemplateClass = {
mainDiv : $('<div>').attr('id',contentContainer),
setData : function(result, images, template, link) {
this.result = result;
this.images = images;
this.template = template;
this.link = link;
},
readyTemplate : function() {
var that = this;
$.each(this.result, function () {
data = that.result[0];
$(that.mainDiv).loadTemplate(that.template, data, {
append: true
});
});
return this.mainDiv;
},
clearTemplate : function(contentContainer) {
var container = $('body').find('#' + contentContainer);
if (container.length !== 0) {
console.log(container.length);
container.remove();
console.log(container.length);
}
}
}
I'm able to live without removing this object, but it's just not right.

Jstree lazyloading and expand all issue

We are experiencing an issue when using the lazyloading feature and open_all feature together.
The contents of the tree are loaded using lazy loading feature.
When we select a node and click on expand all button, all the child nodes of that node will be fetched using jstree ajax call and opened using the open_all function, when clicking collapse all button, we are using close_all function. This works perfectly for the first time.
But on second time, when we click on expand all on the same node, same ajax url is hit on recursively. ( We think, the url is hit on every time on opening a node using open_all). The intended behaviour is not to call the url(as data is already loaded), only the open_all function should be executed.
Could you please clarify how to fix the issue
//code to load the tree
$("#TreePanel").jstree({
"xml_data" : {
"ajax" : {
"url" : "/ajax/loadTree",
"type" : "post",
"data" : function(node) {
var data = {};
data.dunsNumber = ${dunsNumber};
if (node == -1) {
//set duns number to data
} else {
data.selectedNodeId = node.attr("id");
data.expandAll = isExpandAll;
}
return data;
},
"success" : function(data) {
if ($(data).attr('id') == 'error') {
$("#overlayContent").empty();
} else {
return data;
}
}
},
"xsl" : "nest"
},
"plugins" : [ "themes", "xml_data" ]
});
//code to expand all nodes
$("#ufvExpandAll").bind("click", function() {
isExpandAll= true;
$("#TreePanel").jstree("open_all", selectedNode);
isExpandAll= false;
});
//code to collapse all nodes
$("#ufvCollapseAll").bind("click", function() {
$("#TreePanel").jstree("close_all", selectedNode);
});
//code to get the node and set on a variable on clicking a node
var selectedNode;
$("#TreePanel").delegate("a", "click", function(e, data) {
var node = $(e.target).closest("li");
if (selectedNode != undefined && selectedNode != null) {
$("#" + selectedNode.id + " > a").removeClass("jstree-default- selected-node");
}
selectedNode = node[0];
$("#" + selectedNode.id + " > a").addClass("jstree-default-selected- node");
$("#ufvExpandAll").attr("disabled", false);
$("#ufvCollapseAll").attr("disabled", false);
return false;
});
Thanks In Advance
Regards
Hari

Try to inspect the node to see if it has any pre-existing children before executing logic to load it with children.
.bind("open_node.jstree", function (event, data) {
var node = $(data.rslt.obj);
var children = $.jstree._reference(node)._get_children(node);
if (children.length==0){
//node is empty, so do node open logic here
}
})

JavaScript WYSIWYG Rich Text Editor

What is the basic method of styling text inside input boxes? Can you show me the most simple example of how to change text color separately?

Very simply:
window.document.designMode = “On”;
document.execCommand(‘ForeColor’, false, ‘red’);
For more detail:
http://shakthydoss.com/javascript/html-rich-text-editor/
and then
http://shakthydoss.com/javascript/stxe-html-rich-text-editor/

There are 4 approaches you can adopt
Create a textarea. Let user modify the content. On key press or button click insertHtml to preview div. Trix uses the same approach but programmatically.
Add some textarea. Use some markdown processor which can render the the content of textarea.
Handle every movement of blinking cursor and implement something like Google docs which doesn't use execCommands. I believe quilljs also doesn't use execCommands.
You can use execCommands which are supported by almost all modern browsers. Here is the simplest example. Or check this example which uses this small code to run set of execCommands to make a rich text editor. You can simplify it more.
Example
angular.module("myApp", [])
.directive("click", function () {
return {
restrict: "A",
link: function (scope, element, attrs) {
element.bind("click", function () {
scope.$evalAsync(attrs.click);
});
}
};
})
.controller("Example", function ($scope) {
$scope.supported = function (cmd) {
var css = !!document.queryCommandSupported(cmd.cmd) ? "btn-succes" : "btn-error"
return css
};
$scope.icon = function (cmd) {
return (typeof cmd.icon !== "undefined") ? "fa fa-" + cmd.icon : "";
};
$scope.doCommand = function (cmd) {
if ($scope.supported(cmd) === "btn-error") {
alert("execCommand(“" + cmd.cmd + "”)\nis not supported in your browser");
return;
}
val = (typeof cmd.val !== "undefined") ? prompt("Value for " + cmd.cmd + "?", cmd.val) : "";
document.execCommand(cmd.cmd, false, (cmd.val || ""));
}
$scope.commands = commands;
$scope.tags = [
'Bootstrap', 'AngularJS', 'execCommand'
]
})