i want do script can use more than textarea with tinymce
this :
and don't have any problem with add button
But the problem when I delete the last line
Then I do add new line disappears tinymce in textarea
I tried to do I solve this problem but using hide() function instead of remove()
However, many problems occur number IDs
and this all code for this
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
$('#addHereItem .trLines:last').remove();
tinyMCE.execCommand('mceAddControl', false, $("#addHereItem tbody textarea"));
}else
{
return false;
}
})
tinymce.init({
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
i found the answer for this question
add this line when remove item
tinymce.execCommand('mceRemoveEditor', true, id_text_area_without#);
and add this line when add a new item
tinyMCE.execCommand('mceAddControl', true, id_text_area_without#);
and this all solv thuisa problem
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
var realId = Number(numItemsLiens - 1);
// console.log(realId);
$('#addHereItem .trLines:last').remove();
tinymce.execCommand('mceRemoveEditor', true, "details_"+realId);
}else
{
return false;
}
})
tinymce.init({
mode : "exact",
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
mode : "exact",
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
tinyMCE.execCommand('mceAddControl', true, "details_"+xtable);
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Related
This question already has answers here:
What is DOM Event delegation?
(10 answers)
Closed 4 years ago.
I have a table in which an input control calls a java script event
oninput="this.value=this.value.replace(/[^0-9]/g,'');
By Clicking on Add Row new Row is being inserted but i want to call this event on new row as well . This event is to stop except positive whole numbers
using the following code.
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
Try the following syntax to add event handler to newly created element:
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
I have created this simple form
<html>
<head>
<title>Datatable</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../jquery/Jobseeker/EditDatatable.js"></script>
</head>
<body>
<form>
<table id="example">
<tr>
<td>
<label>Ab Va</label>
</td>
<td>
<input type="text" value="99"/>
</td>
</tr>
<tr>
<td>
<label>Sa Va</label>
</td>
<td>
<input type="text" value="9986"/>
</td>
</tr>
</table>
<button id="btn">Edit</button>
</form>
</body>
</html>
The jquery code to edit the input textbox of this table is
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
var data = table.$('input, select').serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
);
return false;
} );
} );
The problem what I am facing is the input textbox field id editable without click of the button "Edit".
But I want it to be editable only when the user clicks on the Edit button.
Please let me know how can i do this
Use this
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$("input[type=text]").attr("readonly", false);
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n"+);
return false;
});
});
And change your input type="text" tags with readonly attribute as below
<input type="text" value="99" readonly />
you can add disabled attribute to input and then remove it on btn click.
<input type="text" value="99" disabled/>
<input type="text" value="9986" disabled/>
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$('input').removeAttr('disabled');
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n");
return false;
} );
} );
Below I am trying to make a datepicker element to an input field by clicking on a button. As all the datepickers have same class name, clicking on button is changing all the them to input field. But I want to change only that datapicker which is in the row of that button.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="custom.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div>
<div class="row">
<div class="input-field col s6 offset-s2">
<input id="contact" type="text" class="validate">
<label for="Contact">Enter contact name.</label>
</div>
<div class="md col s4">
<a class="bt waves-effect waves-light btn">Search</a>
</div>
</div>
<div class="table-margin">
<table id="mytable">
<thead>
<tr>
<th data-field="id">Contact Name</th>
<th data-field="phone">Phone</th>
<th data-field="Data"> Data</th>
<th data-field="Action"> Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="script.js"></script>
<script src="new.js"></script>
</body>
</html>
JS1
$(document).ready(function() {
var status = [
{
"id": 1,
"name": "sourabh",
"phone": "811880",
"email":"sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
}];
var len = status.length;
var x= '<input type="date" class="dt datepicker">';
var y= '<button class="make waves-effect waves-light btn" type="button">Update</button>';
data = "";
if(len > 0){
for (var i = 0; i < len; i++){
data = data + "<tr><td>"+status[i].name+"</td><td>"+status[i].phone+"</td><td>"+x+"</td><td>"+y+"</td><tr>";
}
}
$("#mytable tbody").append(data)
});
Js2.
$(document).ready(function() {
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
$('.make').click(function(){
var x = this.rowIndex;
console.log(x);
$('.dt').replaceWith($('<input type="text" value="Input box">'));
});});
Use $(this).closest("tr").find(".dt") instead of $(".dt") so it only selects the datepicker in the same row as the element you clicked on.
My radio button in my _form.gsp is coded as
<table>
<thead>
...
</thead>
<tbody>
<g:each in="${locationList}" status="i" var="location">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
...
<td><g:radio name="location" value="${location.id}" onclick="showLocInfo(this)" checked="${false}" /></td>
</tr>
</g:each>
</tbody>
</table>
and my hidden div is
<div id="locationTable" style="display: none">
<table style="width: 100%;">
<tr>
<td>HERES LOCATION INFORMATION</td>
</tr>
</table>
</div>
My create.gsp contains some javascript in the head which currently isn't working
<head>
...
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(function() {
$(".datepicker").datepicker();
});
jQuery.noConflict();
function showLocInfo(elem){
if (elem.checked == "true") {
document.getElementById('locationTable').style.display = "block";
}
if (elem.checked == "false") {
document.getElementById('locationTable').style.display = "none";
}
}
</script>
</head>
The datepicker works, but the show location info function does not. What am I doing wrong?
In your showLocInfo, elem.checked is a boolean, not a string. Since you are using 2 if statements, rather than an if/else, neither block is executed, resulting in no behavior.
Try using instead:
if (elem.checked === true) {
// ..
I apply FineUploader to an element, then clone it. The new element will open the file upload dialog, but won't upload a file. How can this be accomplished?
http://jsfiddle.net/o4z7mtrd/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mytable').find('tr div.upload').each(function(i,v){
console.log(this)
new qq.FineUploaderBasic({
button: this,
request: {
endpoint: 'update.php'
},
});
});
$('#add').click(function(){
$('#clone').clone(true).removeAttr('id').appendTo('#mytable');
});
});
</script>
<style type="text/css">
#clone {display:none;}
</style>
</head>
<body>
<table id="mytable">
<tr id="clone">
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
<tr>
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
</body>
</html>
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example.
HTML
<table id="mytable">
<tr class="row">
<td class="proposal-td">
<div class="upload" title="Upload">Upload</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
JS
function bindUploader($element) {
new qq.FineUploaderBasic({
button: $element[0],
request: {
endpoint: '/echo/json/'
},
callbacks: {
onUpload: function (id, name) {
alert('uploaded');
}
}
});
return $element;
}
$(function () {
bindUploader($('#mytable').find('.upload'));
var $row = $('#mytable .row').clone(true);
$('#add').click(function () {
var $clone = $row.clone(true);
bindUploader($clone.find('.upload'));
$clone.appendTo('#mytable');
});
});
http://jsfiddle.net/moogs/o4z7mtrd/5/