I want to make my table row editable when i will select edit option from dropdown box. Previously it was woring fine but that time i used Edit button inside all row. But now i have made edit button by putting into dropdown. but now it is not working. I am not able to find any error in my code but still it is not working.
my html table is
<div class="table-responsive">
<table class="table table-hover" id="myTable" >
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johncarter#mail.com</td>
<td>John</td>
<td>Carter</td>
<td></td>
</tr>
<tr>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td></td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
<li><a tabindex="-1" class="btn btn-mini btnEdit" >Edit</a></li>
</ul>
<script type="text/javascript">
(function ($, window) {
$.fn.contextMenu = function (settings) {
return this.each(function () {
// Open context menu
$(this).on("contextmenu", function (e) {
//open menu
$(settings.menuSelector)
.data("invokedOn", $(e.target))
.show()
.css({
position: "absolute",
left: getLeftLocation(e),
top: getTopLocation(e)
})
.off('click')
.on('click', function (e) {
$(this).hide();
var $invokedOn = $(this).data("invokedOn");
var $selectedMenu = $(e.target);
settings.menuSelected.call(this, $invokedOn, $selectedMenu);
});
return false;
});
//make sure menu closes on any click
$(document).click(function () {
$(settings.menuSelector).hide();
});
});
function getLeftLocation(e) {
var mouseWidth = e.pageX;
var pageWidth = $(window).width();
var menuWidth = $(settings.menuSelector).width();
// opening menu would pass the side of the page
if (mouseWidth + menuWidth > pageWidth &&
menuWidth < mouseWidth) {
return mouseWidth - menuWidth;
}
return mouseWidth;
}
function getTopLocation(e) {
var mouseHeight = e.pageY;
var pageHeight = $(window).height();
var menuHeight = $(settings.menuSelector).height();
// opening menu would pass the bottom of the page
if (mouseHeight + menuHeight > pageHeight &&
menuHeight < mouseHeight) {
return mouseHeight - menuHeight;
}
return mouseHeight;
}
};
})(jQuery, window);
$("#myTable td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.text() + "'";
}
});
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdPhone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Edit() {
var par = $(this).parent().parent();
var tdParameterName = par.children("td:nth-child(1)");
var tdParameterValues = par.children("td:nth-child(2)");
var tdRemarks = par.children("td:nth-child(3)");
var tdButtons="";
tdParameterName.html("<input type='text' id='txtName' value='" + tdParameterName.html()
+ "'/>");
tdParameterValues.html("<input type='text' id='txtPhone' value='" + tdParameterValues.html()
+ "'/>");
tdRemarks.html("<input type='text' id='txtEmail' value='" + tdRemarks.html()
+ "'/>");
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
};
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
});
</script>
Basically i am enabling right click menu. After clicking right dropdown box will open. whne i will click edit button then my row will become editable. I have added jquery for contextMenu and for edit button. Sorry for making code very dirty but currently i am practicing and also i am new in this.
Look at the output that the console gives you. Clicking edit results in TypeError: tdButtons.html is not a function which results from the two lines:
var tdButtons="";
and
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
So you are creating an empty string and trying to use it as if it was a jQuery object. You will need to change theses lines to get it to work again.
Related
I want multiple textarea(ck editor) where user can input multiple data in it , i tried various function and methods of jquery like clone() and appendTo but the problem is they are cloning the textarea but ckeditor is not working, after cloning the textarea i am unable to wrote anything in it
Please help me with it.
This is what i tried
test1
http://jsfiddle.net/FADxv/793/
test2
http://jsfiddle.net/kbqjnecx/3/
Thanks
Add an id to each new textarea and manually initialize the editor using
CKEditor.replace(id [,config])
Something like:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var editorId = 'editor_' + x;
$(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea>Remove</div>'); //add input box
CKEDITOR.replace(editorId, { height: 200 });
}
});
DEMO
Check this for cloning ckeditor.
Check this fiddle : http://jsfiddle.net/manektech/47htysb5/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
</head>
<body>
<div class="row hide_mail_id_domain">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
</td>
<td></td>
</tr>
</tbody>
</table>
Add More
</div>
</div>
<script>
var REMOVE = '';
var i=1;
$(document).ready(function () {
$('.add_more').click(function () {
var oneplus=i+1;
var tr_object = $('tbody').find('tr:first').clone();
// getting and renaming existing textarea by name.
$(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
$(tr_object).find('input').val('');
$(tr_object).find('td:last').html('Remove');
$('tbody').append(tr_object);
//replace code
CKEDITOR.replace("question_option_"+oneplus+"");
// when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
// included below code
$('#cke_question_option_1').each(function() {
var $ids = $('[id=' + this.id + ']');
if ($ids.length > 1) {
$ids.not(':first').remove();
}
});
i=i+1;
oneplus++;
});
$(document).on('click', '.remove_more', function () {
var id = $(this).closest('tr').find('.id').val();
if (id != '') {
if (REMOVE != '') {
REMOVE = REMOVE + ',' + id;
} else {
REMOVE = id;
}
$('#id').val(REMOVE);
}
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
I don't understand why the check() function doesn't want to fire, I know that if I set this function to setInterval(check, 1000) or to function $("#btn-click") it will work but why it doesn't work now? I would appreciate if you explain me
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
if ($("table tbody").has("tr")) {
$("table tbody tr td").on("click", function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span></p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
The function fires, but there's no td element to attach events to.
If you want to bind events to elements that will be dynamically generated, you do not need a check function, just use $(body').on(evtType,selector,handler)
Check below for an example. every td you'll add dynamically will still be bound to the event listener, because it's attached to 'body'.
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
console.log('firing')
}
$('body').on('click', 'table tbody tr td', function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span>
</p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
check() is firing. It's just not doing anything because of your if logic, which had bad selectors pointing to elements (tbody, td) that you don't have.
You won't get a td element in your table until AFTER you click btn-save because that click event handler creates the td elements. Your code wants to run check before that button gets clicked.
I've removed the reference to tbody and changed your td reference to th and now it works:
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" +name+"</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
console.log("HELLO FROM CHECK!");
if ($("table").has("tr")) {
$("table tr th").on("click", function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span></p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I'm binding a dynamic table in angularjs using following script:
$http.get('../Services/ReportServ.asmx/GetSelectedIndex', {
params: {InterviewId: InterviewId, EmpId: EmpId, ClientId: ClientId, Itype: '6'}
}).success(function (data) {
var myjson = JSON.parse(data);
$scope.ReportReviews = JSON.parse(myjson);
});
HTML:
<table id="tableReport" class="reportGrid">
<tr>
<th>
<input type="checkbox" ng-model="ReportReviews.allReviewed" ng-change="selectAllInivited()"/></th>
<th>Name</th>
<th ng-repeat="Header in Headers">{{Header.QUESTIONName}}
</th>
<th>OverAll</th>
</tr>
<tr ng-repeat="ReportReview in ReportReviews" ng-class="{selected: ReportReview.isReviewChecked}">
<td>
<input type="checkbox" ng-model="ReportReview.isReviewChecked" ng-change="selectInivited(ReportReview)"/>
</td>
<td>{{ReportReview.Name}}</td>
<td ng-repeat="Header in Headers">
<%--
<a runat="server" id="a1" ng-show="HideResult(interview)"
ng-class="{'checkedClass': (interview.R=='1' || interview.I=='1') , 'uncheckedClass': interview.I !='1'}">
<img class="imgResult" src="../Lib/img/Result.png" height="55px"/></a>
--%>
<input type="image" id="imgResult{{$index}}" ng-src="{{GetFolderPath(ReportReview,Header)}}" prevent-default
ng-click="imgResultClick(ReportReview,Header)" height="20px"/>
</td>
<td>
<input type="image" class="imgOverall" ng-src="{{GetOverallPath(ReportReview)}}" height="10px"/>
</td>
</tr>
</table>
I have used this script to bind imagebutton src. Now, I want to change the src of specific Image Button on click. I have tried the following method,
$scope.imgResultClick = function (fieldReport, fieldHeader) {
var id = event.target.id;
var imgPath = $('#' + id).attr('src');
$('#' + id).attr('src', ImgPath);
var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
$('#' + id).attr('src', output + '_selected.png');
}
However, it has lot of issues. Example:
Can't reset the image path again on click back.
clicking on the same button agian will append the 'selected.png' string to the image path.
Can anyone guide me? Please let me know, if I need to provide further details.
Basically u should swap DOM-Manipulation into a Directive. In the directive you cna use the link Function to access the specific DOM-Element.But to solve your problem, you have just to use $scope.$apply it "forces" the manipulation
$scope.imgResultClick = function (fieldReport, fieldHeader) {
var id = event.target.id;
var imgPath = $('#' + id).attr('src');
$scope.$apply($('#' + id).attr('src', ImgPath));
var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
$scope.$apply($('#' + id).attr('src', output+'_selected.png'));
}
If u want to toggle the Image, u have to set a flag and get the specific image. A tip u should work with directives' link function. Then u can get all the specific images. And handle them easily. A directive looks like:
app.directive('test', function() {
return {
restrict: 'AE',
link: function(scope, elem, attrs, event) {
elem.bind('click', function() {
//your logic to the image
var id = event.target.id;
var imgPath = $('#' + id).attr('src');
$scope.$apply($('#' + id).attr('src', ImgPath));
var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
$scope.$apply($('#' + id).attr('src', output+'_selected.png'));
});
}}});
Thanks For viewing this post.i am facing a jquery issue .After a successful AJAX call, I want to update an element on page. However, it is not being updated.
what am i doing i am opening a text box on click of span then add text and and on focus out event i am making Ajax call but cant update new text to same span when that i clicked before please help me
here is my js code
$(document).on('click', '.td-edit', (function (e0) {
var thisObj = $(this);
var olddata = thisObj.html();
var newDom = '<input type="text" value="' + olddata + '" class="new-value" style="border:#bbb 1px solid;padding-left:5px;width:75%;"/ >';
thisObj.parent('td').html(newDom);
}));
$(document).on('focusout', '.new-value', (function (e1) {
var thisObj = $(this);
var type = thisObj.parent('td').attr('class');
var newData = thisObj.val();
var santanceId = thisObj.parent('td').parent('tr').attr('id');
santanceId = parseInt(santanceId.replace('tr', ''));
thisObj.parent('td').html('\'<img src="uploads/loading.gif">\'');
if (type === 'sentnc') {
$.ajax({
type: "POST",
url: "operations.php",
data: {
santanceId: santanceId,
sentnc: newData
},
success: function () {
var newDom = '<span class="td-edit">' + newData + '</span>';
thisObj.parent('td').html(newDom);
}
});
}
}));
HTML:
<div class="chat-space nano nscroller">
<div id="table-row">
<table id="rep-data">
<tbody>
<tr>
<th align="left">Sentences</th>
<th align="left" colspan="3">Reps</th>
</tr>
<tr id="tr1" rowspan="2">
<td class="sentnc"><span class="td-edit">Rana is working</span></td>
<td colspan="3" class="senrep"><span class="td-edit">p1.ref = I, p1.name = julie</span><br>
<br>
<span style="color:#000;">Guess Rep1: </span><span id="1gr1">p1.ref = I, p1.has = name1, p1.name.made_from = rana</span><br>
<span style="color:#000;">Guess Rep2: </span><span id="2gr1">p1.ref = I, p1.name = rana</span><br>
<span><a style="color:#3399FF !important;" alt="1" rel="1 " class="updateGuess" id="upd1" href="javascript:void(0);">Update Guess Rep</a></span><br>
<br></td>
</tr>
</tbody>
</table>
</div>
Your success handler should be:
success: function (data) {
var newDom = '<span class="td-edit">' + data + '</span>';
thisObj.parent('td').html(newDom);
}
Here, the data is the data returned by your server, after the ajax Call
I have a code like this...
<html>
<head>
<title>test</title>
<script type="text/javascript">
var counter = 2;
var idCounter= 3;
function addNew() {
if(counter<=5){
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
newDiv.id='divs'+counter;
// Create a new text input
var newText = document.createElement('input');
var newText1 = document.createElement('input');
newText.type = "input";
newText.id="ans"+(idCounter);
idCounter++;
newText1.type = "input";
newText1.id="ans"+(idCounter);
idCounter++;
// newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Remove";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
counter--;
}
}
else{
alert('Only 5 rows are allowed');
}}sss
function removeRow(divId){
mainContainer.removeChild(divId);
counter--;
}
</script>
</head>
<body >
<div id="mainContainer">
<div><input type="button" value="Add New Row" onClick="addNew()"></div>
<div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div>
</div>
</body>
</html>
I want to achieve the same using jQuery.I also need the values entered in each of these textboxes.Please help.
Okay, because I had nothing better to do, and, to be honest, I was curious, I put this together. As implied in my comment, above, I didn't particularly like the way you had it laid out, so I used the following (x)html:
<form action="#" method="post">
<fieldset id="rows">
<ul>
<li>
<input type="text" id="ans1" name="ans1" />
<input type="text" id="ans2" name="ans2" />
</li>
</ul>
</fieldset>
<fieldset id="controls">
<button id="addRow">add</button>
<button id="removeRow" disabled>remove</button>
</fieldset>
</form>
With the following jQuery (although I've clearly not optimised, or refined it, but it should meet your requirements):
$(document).ready(
function(){
$('#addRow').click(
function() {
var curMaxInput = $('input:text').length;
$('#rows li:first')
.clone()
.insertAfter($('#rows li:last'))
.find('input:text:eq(0)')
.attr({'id': 'ans' + (curMaxInput + 1),
'name': 'ans' + (curMaxInput + 1)
})
.parent()
.find('input:text:eq(1)')
.attr({
'id': 'ans' + (curMaxInput + 2),
'name': 'ans' + (curMaxInput + 2)
});
$('#removeRow')
.removeAttr('disabled');
if ($('#rows li').length >= 5) {
$('#addRow')
.attr('disabled',true);
}
return false;
});
$('#removeRow').click(
function() {
if ($('#rows li').length > 1) {
$('#rows li:last')
.remove();
}
if ($('#rows li').length <= 1) {
$('#removeRow')
.attr('disabled', true);
}
else if ($('#rows li').length < 5) {
$('#addRow')
.removeAttr('disabled');
}
return false;
});
});
JS Fiddle demo of the above
I'm not, however, sure what you mean by:
I also need the values entered in each of these textboxes.
If you can explain what that means, or how you want them to be available (and, ideally, why they're not already available to you) I'll do my best to help.
I have a solution which will help you use here is the code
<script type="text/javascript" src="js/jquery.js"></script>
<script type = 'text/javascript'>
var newRowNum = 1;
var project_id ;
$(function() {
$('#addnew').click(function()
{
newRowNum++; // This is counter
//var i = 0;
///////// <a> <td> <tr>
var addRow = $(this).parent().parent();
///////// In the line below <tr> is created
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html();
$('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>');
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
newRow.children().children().first('input').attr('id', newID).attr('name', newID);
newRow.children().children().eq(1).attr('id', add).attr('name', add);
$('#table').find('tr:last').after(newRow);
$('a.remove', newRow).click(function()
{
newRowNum--;
$('#table').find('tr:last').remove();
return false;
});
return false;
});
});
</script>
<table width="75%" border="0" align = "center" id = 'table'>
<tr>
<td align = "center">Project </td>
<td align = "center">Description</td>
<td align = "center">Add Row</td>
</tr>
<tr>
<td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td>
<td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td>
<td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td>
</tr>
</table>
You can also give each text box unique name if you change code like this and changing these two variables
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
if you use the first method i shown here it will be easy to post data using array. That's all.