Looking at this example https://editor.datatables.net/examples/inline-editing/simple
It allow you edit the text if you click on the cell. If you click on the cell - it will then render into input tag
My case, I want a bit different. Each row have a Edit button, user click on the Edit button then all input tags will be displayed on that row.
I am unable to find any demo or how to do this on datatables, can you advice?
when click td render into input code like this:
$td.click(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html('<input type="text" value="'+ OriginalContent + '" style="width: 100%"/>');
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
click on the Edit button then all input tags will be displayed on that row:
1.row data in memory
2.when click button,find this row's td config (which UI to render:input,select,radio....)
3.switch UI and row data like angularjs two-way Data Binding
Spend one hour for this Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="newGrid"></div>
<script>
function Grid(){
this.config = {
id:"newGrid",
data:[
{name:"alert",age:"18"},
{name:"Jone",age:"28"}
]
};
this.rows = [];
}
Grid.prototype.render =function(){
var html = '<table class="table table-bordered">' +
'<tr>' +
'<th>Name</th>' +
'<th>age</th>' +
'<th></th>' +
'</tr>' +
'</table>';
var $table = $(html);
for(var i= 0,item;item=this.config.data[i++];){
var newRow = new Row();
this.rows.push(newRow);
var rowDom = newRow.render(item);
$table.append(rowDom);
}
$("#"+this.config.id).append($table);
};
function Row(){
this.cells = {};
}
Row.prototype.render = function(row){
var _this = this;
var nameCell= new Cell(row.name);
var ageCell = new Cell(row.age);
this.cells = {
name:nameCell,
age:ageCell
};
var $editBtn= $("<button>Edit</button>").click(function(){
_this.editRow();
});
var $saveBtn= $("<button>Save</button>").click(function(){
_this.saveRow();
});
return $("<tr></tr>")
.append($("<td></td>").append(nameCell.$Dom))
.append($("<td></td>").append(ageCell.$Dom))
.append($("<td></td>").append($editBtn).append($saveBtn));
};
Row.prototype.editRow = function(){
for(var key in this.cells){
this.cells[key].editorCell();
}
};
Row.prototype.saveRow = function(){
var data = {};
for(var key in this.cells){
//console.log(key+"="+this.cells[key].editor.getValue());
data[key] = this.cells[key].editor.getValue()
}
alert(JSON.stringify(data))
};
function Cell(value){
this.$Dom = $("<td></td>");
this.editor = null;
this.render(value);
}
Cell.prototype.render = function(value){
this.editor = new Forms["Span"](value);
return this.$Dom.append(this.editor.$Dom);
};
Cell.prototype.editorCell = function(){
this.editor = new Forms["Input"](this.editor.getValue());
this.$Dom.html(this.editor.$Dom)
};
var Forms = {};
//Span Object
Forms.Span = function(value){
this.$Dom = $('<span>'+ value +'</span>');
};
Forms.Span.prototype.setValue = function(value){
this.$Dom.text(value);
};
Forms.Span.prototype.getValue = function(){
return this.$Dom.text();
};
//Input Object
Forms.Input = function(value){
this.$Dom = $('<input type="text" style="width:100%">');
this.setValue(value);
};
Forms.Input.prototype.setValue = function(value){
this.$Dom.val(value);
};
Forms.Input.prototype.getValue = function(){
return this.$Dom.val();
};
//Init Grid
$(document).ready(function(){
new Grid().render();
})
</script>
</body>
</html>
Related
I'm creating a Custom Drop Down Menu using rich combo in CKEDITOR.
I want to add a Search functionality within it like key press search or input textbox search.
My Drop Box looks like this.
Here I don't have any default methods that's why i am doing like this it'wroking fine.
editor.ui.addRichCombo( 'richcombo',{
init : function(){
this.startGroup("");
this.add('search', '<div onmouseover="parent.comboSearch(this);" onclick="parent.nemsComboSearch(this);"><input class="cke_search" placeholder="Search"/></div>', '');
this.add(styles[i].name,styles[i].name,styles[i].element);
},
});
and I am adding combo search here
window.comboSearch= function(element) {
var anchorID = $(element).closest('a').attr("id");
var liDom = $(element).closest('li');
liDom.empty().append('<div id="' + anchorID + '" style="padding:4px 5px;"><input class="cke_search" placeholder="Search" /></div>');
liDom.find('input').off("keyup").on("keyup", function() {
var data = this.value;
//create a jquery object of the rows
var jo = liDom.siblings('li');
data = data.toUpperCase();
var len = jo.length;
for(var i=0;i<len;i++){
if(jo[i].textContent.toUpperCase().indexOf(data)){
jo[i].hidden = true;
}else{
jo[i].hidden = false;
}
}
}).focus(function() {
this.value = "";
$(this).unbind('focus');
});
};
function filter(data, jo) {
if (this.value === "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this);
if ($t.is(":icontains('" + data + "')")) {
return true;
}
return false;
}).show();
}
It' working fine.
This is the code, I can't get the click event listener to fire
Javascript:
var cid = 1721;
var alt = "4x6_" + cid;
var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce";
var mattes_selected_type = "182";
var i = 0;
function common_get_site_url()
{
return "https://jsfiddle.net/img/logo.png";
}
//
var thumb_img = new Image();
thumb_img.id = 'cid_' + cid;
thumb_img.alt = alt;
thumb_img.src = "";
thumb_img.addEventListener('load', function() {
alert("LOAD");
}, false);
thumb_img.addEventListener('click', function() {
alert("CLICK");
}, false);
thumb_img.src = common_get_site_url();
$('#matte_designs_strip_wrapper').append('<span class="matte_design_image_name"><img id="cid_' + cid + '" src="' + thumb_img.src +'" /></span>');
HTML:
<div id="matte_designs_strip_wrapper"></div>
https://jsfiddle.net/allisonc/yoq4Lotx/1/
Try to change the last line to:
$('#matte_designs_strip_wrapper').append($('<span class="matte_design_image_name"/>').append(thumb_img));
Otherwise you're using addEventListener to an element that will never appear
You reference an Image object, not the actual HTML element you expect. Once you appended and added the HTML dynamically you want to run
$('#cid_' + cid).on('click', function(e) {
// Your code here
});
Then your event listener will target the proper HTML, not just any object :)
var cid = 1721;
var alt = "4x6_" + cid;
var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce";
var mattes_selected_type = "182";
var i = 0;
function common_get_site_url()
{
return "https://jsfiddle.net/img/logo.png";
}
//
var thumb_img = new Image();
thumb_img.id = 'cid_' + cid;
thumb_img.alt = alt;
thumb_img.src = "";
thumb_img.addEventListener('load', function() {
alert("LOAD");
}, false);
thumb_img.addEventListener('click', function() {
alert("CLICK");
}, false);
thumb_img.src = common_get_site_url();
var span = $('<span class="matte_design_image_name"></span>')
span.append(thumb_img)
$('#matte_designs_strip_wrapper').append(span);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="matte_designs_strip_wrapper"></div>
var descriptionInput;
var tbl = $(document.getElementById('21.125-mrss-cont-none-content'));
tbl.find('tr').each(function () {
$(this).find("input[name$='6#if']").keypress(function (e) {
if (e.which == 13) {
descriptionInput = $(this).val();
$(this).val(descriptionInput);
$(document.getElementById('__AGIM0:U:1:4:2:1:1::0:14')).val(descriptionInput);
}
console.log(descriptionInput);
});
});
});
The function above gets an input value from a field in a set of rows using jQuery .val()
var table = document.getElementById('DYN_6000-LISTSAPLMEGUI-tab');
var t = table.rows.length;
//getting current blank cell ID and upping the blank cell ID to the new last cell
var new_cell_id = table.rows.item(t-1).id;
var old_cell_id = "DYN_6000-LISTSAPLMEGUI-key-" + t;
table.rows.item(t - 1).id = old_cell_id;
table.rows.item(t - 1).onmouseover = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onmouseout = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onclick = function () { showItemDetailDropDown_click(old_cell_id); };
//create new row and table
var drop_down_height = document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height;
document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height = (parseInt(drop_down_height.replace("px", "")) + 18) + "px";
var new_row = table.insertRow(t-1);
var new_cell = new_row.insertCell(0);
new_row.insertCell(1);
//set new row and cell properties
new_row.id = new_cell_id;
new_row.classList.add('urNoUserSelect');
new_row.style.width = "100%";
new_row.style.height = "18px";
new_row.onmouseover = function () { showItemDetailDropDown_hover(new_cell_id); };
new_row.onmouseout = function () {showItemDetailDropDown_hover(new_cell_id); };
new_row.onclick = function () {showItemDetailDropDown_click(new_cell_id);};
new_cell.classList.add('urIlb2I');
new_cell.classList.add('urColorTxtStandard');
var new_item = t;
new_cell.innerHTML = "[ " + new_item + " ]";
var zyx = "grid#21.125#" + row + ",2#if";
document.getElementById(zyx).value = new_item;
document.getElementById('__AGIM0:U:1:4:2:1:1::0:14').value = new_cell.innerHTML;
checkButton('keyboard');
This JS function is part of an if else statement that checks if there is a new value in each row and adds a sequential number to a dropdown item menu below the table. My question is: How do I append or concatenate the first value (description) into the dropdown menu after the number? For example,
[ 1 ] descriptionInput (the value)
Everything works I just don't know how to pass the jQuery function back to JS or append each value.
I have a textarea where I paste a block of HTML code. When I hit submit, I want to extract all CSS classes and ID's from that block and throw them into an array.
So far I have the submit working as well as the regular expression, but i don't know how to filter through the whole block and extract all instances where text matches my regular expression.
index.html
<body>
<textarea id="codeInput"></textarea>
<button id="submitCode">submit</button>
<script src="functions.js"></script>
</body>
function.js
$(function() {
$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
console.log(codeInput);
});
});
$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
var codeHTML = $('<div>', { html: codeInput }); // Parse the input as HTML
var allIds = [];
var allClasses = [];
codeHTML.find('[id]').each(function() {
allIds.push(this.id);
});
codeHTML.find('[class]').each(function() {
allClasses = allClasses.concat(this.className.split(' '));
});
console.log("IDs: " + allIds.join(', '));
console.log("Classes: " + allClasses.join(', '));
});
Make your function.js something like this:
$(function() {
$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
var $input = $(codeInput);
var attrs: {
'class': [],
'id': []
};
$input.find('*').each(function() {
attrs.class.push($(this).attr('class'));
attrs.id.push($(this).attr('id'));
});
attrs.class.push($input.attr('class'));
attrs.id.push($input.attr('id'));
});
});
That goes through each element in the input code, and removes their class and id attributes, by first going through all the children of the container element in the input, and then afterwards doing the same for the container element in the input.
Personally I like Barmar's solution the best, but this works (jsfiddle):
$('#submitCode').click(function() {
var codeInput = $('#codeInput').val();
var ids = codeInput.match(/id="(.*?)"/);
var classes = codeInput.match(/class="(.*?)"/);
var output = classes[1].split(" ");
output.push( ids[1] );
console.log(output);
});
$(function() {
$('#submitCode').click(function() {
var ids = [], classes = [];
$("[id],[class]").each(function(i, el) {
var id, c;
if (id = $(this).attr('id')) {
ids.push(id);
}
if (c = $(el).attr('class')) {
classes.push(c);
}
});
console.log(ids, classes);
});
});
<textarea id="codeInput">
<div id="hello"><div class="w"></div></div>
<div id="world"></div>
<div class="my-class"></div>
</textarea>
<button id="submitCode">submit</button>
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement( 'div' );
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if(node.id.length > 0) {
CSS_IDS.push(node.id);
}
if(node.className.length > 0) {
CSS_CLASSES.push(node.className);
}
}
console.log(CSS_CLASSES);
console.log(CSS_IDS);
});
});
http://jsfiddle.net/zeZ93/6/
I had this very same challenge and modified the code by #Ryan to extract all (unique) classes and IDs, including when multiple classes are applied to the same element. It's very useful and works for any URL.
See http://jsfiddle.net/pixelfast/4uftwbm0/57/
Thank you.
<!-- HTML -->
<textarea id="codeInput" cols=50 rows=10></textarea>
<button id="submitCode">submit</button>
<!-- jQuery -->
var remoteURL = "https://getbootstrap.com";
function url_content(url) {
return $.get(url);
}
url_content(remoteURL).success(function(data) {
$('#codeInput').val(data);
});
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement('div');
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.id.length > 0) {
CSS_IDS.push(node.id);
}
if (node.className.length > 0) {
var x = node.className.split(" ")
$.each(x, function(index, val) {
if (val != '') {
CSS_CLASSES.push(val);
}
});
}
}
console.log("CLASSES FOUND: ", unique(CSS_CLASSES));
console.log("IDs FOUND: ", unique(CSS_IDS));
});
});
function unique(list) {
var result = [];
$.each(list, function(i, e) {
if ($.inArray(e, result) == -1) result.push(e);
});
return result;
}
What I have is a single textbox. If the user hits the maxlength of it, I want to create a new textbox and then change focus to it so they can continue typing.
To accomplish this, I am trying to dynamically create textboxes that have an onkeyup event tied to them. To do this I am using document.createElement and the creation of the element works. The problem is that I can't get the parameters (the id of the current textbox and the id of the one to be created) to pass correctly and they are simply variables. Before I pass them I can test them and they are fine, but in the method they are null.
Here is my code:
<script type="text/javascript">
var i = 2;
function CreateTextbox() {
var box = document.getElementById(divCreateTextbox);
var curr = 'txt' + i;
var next = 'txt' + (i + 1);
var inp = document.createElement('input')
inp.type = 'text';
inp.name = 'textfield';
inp.maxlength = '10';
inp.id = curr;
inp.setAttribute('onkeyup', 'moveOnMax(inp.id, next)');
inp.onkeyup = function() { moveOnMax(inp.id, next); };
box.appendChild(inp);
box.innerHTML += "<br />";
i++;
return next;
}
function moveOnMax(field, nextFieldID) {
if (field.value.length >= field.maxLength) {
if (document.getElementById(nextFieldID) == null) {
var id = CreateTextbox();
if (document.getElementById(id) != null) {
document.getElementById(id).focus();
}
else
alert("problem...");
}
}
}
</script>
<div id="divCreateTextbox">
I am pretty new to Javascript, so if this is completely fubar'd, I apologize.
Any help is appreciated.
<script type="text/javascript">
getId = function(){
var id = 1;
return function(){
id++;
}
}();
function CreateTextbox() {
var box = document.getElementById("divCreateTextbox");
var curr = 'txt' + getId();
var inp = document.createElement('input');
inp.type = 'text';
inp.name = 'textfield';
inp.setAttribute("maxlength",'10');
inp.setAttribute("id",curr);
box.appendChild(inp);
inp.setAttribute('onkeyup','moveOnMax(this)');
box.appendChild(document.createElement("br"));
inp.focus();
}
function moveOnMax(s){
if(s.value.length >= parseInt(s.getAttribute("maxlength"))-1){
s.blur();
CreateTextbox();
}
}
</script>
<div id="divCreateTextbox"></div>
<script>
window.onload = function(){
CreateTextbox()
}
</script>
</html>
The problem you have is related to the scope of inp. When you use the var keyword you scoped it to that block.
Try this code:
inp.onkeyup = function() {
var local_inp_id = inp.id;
var local_next = next;
return function(){
moveOnMax(inp_id, next);
}
}();