How can I remove my table row onClick event?
var count = 0,
optionsTable = new HtmlTable({
properties: {id: 'optionstable', border: 0, cellspacing: 0, width: "100%"},
headers: ['Name', 'Value', 'Price', 'Action']
}).inject(container);
optionsTable.push(['<input type="text" name="option[0][name]" class="w70">',
'<input type="text" name="option[0][value]" class="w50">',
'<input type="text" name="option[0][price]" class="w50">',
'Add'
]);
$$('.add_option').addEvent('click', function(){
count ++;
optionsTable.push(['<input type="text" name="option['+count+'][name]" class="w70">',
'<input type="text" name="option['+count+'][value]" class="w50">',
'<input type="text" name="option['+count+'][price]" class="w50">',
'Remove'
]);
});
$$('.product_remove_option').addEvent('click', function(){
/*What should be here to remove selected table row?*/
});
First of all, you should make sure to always add events to newly created elements (or use event delegation).
To answer your question: The HtmlTable.push method returns an object containing the added table row and table cells. You can simply call destroy on the table row to remove it.
Here's how the code should look:
var count = 0,
optionsTable = new HtmlTable({
properties: {id: 'optionstable', border: 0, cellspacing: 0, width: "100%"},
headers: ['Name', 'Value', 'Price', 'Action']
}).inject(container);
var firstRow = optionsTable.push(['<input type="text" name="option[0][name]" class="w70">',
'<input type="text" name="option[0][value]" class="w50">',
'<input type="text" name="option[0][price]" class="w50">',
'Add'
]);
firstRow.tr.getElement('.add_option').addEvent('click', function(){
count ++;
var newRow = optionsTable.push(['<input type="text" name="option['+count+'][name]" class="w70">',
'<input type="text" name="option['+count+'][value]" class="w50">',
'<input type="text" name="option['+count+'][price]" class="w50">',
'Remove'
]);
newRow.tr.getElement('.product_remove_option').addEvent('click', function(){
newRow.tr.destroy();
});
});
This should do what you want:
$('optionstable').getElements('tr').addEvent('click',function(){
this.destroy();
});
Related
I have a datatable in which I add rows dynamically after user clicks on add button. Now my requirement is I dynamically add 2 textboxes and a save button. Once the user clicks on Save button the value entered in the textboxes needs to be save as a label, and the Save button text turned to edit.
If the user clicks edit button, the label needs to be changed to textboxes again and edit button text changed to Save.
Following is my code so far:
function addNewRow() {
$('#addRow').on('click', function () {
t.row.add([
'<input type="text" class="form-control">',
'<input type="text" class="form-control">',
'<button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">Save</button>'
]).draw();
});
}
var t;
$(document).ready(function () {
t = $('#datatable').DataTable();
});
Any suggestions on the same. Actually the fields are going to be lot more then this, but just want guidance and what should be the approach for this?.
Thanks In Advance!!!.
You can do like this to solve your issue:
$(document).ready(function () {
t = $('#datatable').DataTable();
$('#addRow').on('click', function () {
t.row.add([
'<input type="text" class="form-control text1">',
'<input type="text" class="form-control text2">',
'<button type="button" class="btn green btn-xs select-row save_btn" data-id="7" data-includeTax="N">Save</button>'
]).draw();
});
$('body').on('click', '.save_btn', function (e) {
e.preventDafault();
var _this = $(this);
$.ajax({
type: 'post',
url: 'your url',
data: { 'text1' : $(this).closest('tr').find('.text1').val(), 'text2' : $(this).closest('tr').find('.text2').val() },
dataType : 'json',
})
.done(function (data) {
_this.text('Edit');
_this.addClass('edit_btn');
_this.removeClass('save_btn');
});
return false;
});
$('body').on('click', '.edit_btn', function () {
_this.text('Save');
_this.addClass('save_btn');
_this.removeClass('edit_btn');
});
});
This is my code right now: https://jsfiddle.net/5phq111c/5/
Html Part
<tbody v-for="row in rows" :key="row.product_id">
<tr>
<td>
<select #change="selected" v-model="row.product_id" class="form-control" name="product_id" id="product_id">
<option value="">Select Product</option>
<option v-for="item in items" :value="item.id" v-text="item.product_name"></option>
</select>
</td>
<td>
<textarea type="text" v-model="product.product_details" name="product_details" id="product_details" class="form-control" rows="1" placeholder="Product Details">
</textarea>
</td>
<td>
<input v-model.number="product.product_sellPrice" type="number" step="any" class="form-control" name="rate" id="rate" placeholder="Rate">
</td>
</tr>
</tbody>
Vue JS Part
export default {
data() {
return {
rows: [{
product_id: '',
product_details: '',
product_sellPrice: '',
}],
}
},
methods: {
addrow: function (event) {
event.preventDefault();
this.rows.push({
product_id: '',
product_details: '',
product_sellPrice: '',
});
},
selected(e) {
var id = this.row.product_id;
console.log(id);
axios.get('/estimate/product/' + id)
.then((response)=>{
this.product = '';
this.product = response.data;
})
.catch((error) => {
console.log(error);
});
}
}
I want to get the selected product_id and send an axios request to get the values of the the selected product. I have bind the product_id with the row. I am getting the selected value in the rows object but when I am sending the request by row.product_id i am getting the error can't read property 'product_id' of undefined. Where is the problem?
You don't define a row data property, but a rows data property array. Calling the selected method from inside a v-for loop will not automatically assign this.row a value.
If you want the product_id of the selected row in the selected method, pass it in the template via #change="selected(row.product_id)".
Then just reference that parameter in your selected method:
selected(id){
console.log(id);
axios.get('/estimate/product/' + id)
...
}
You seem to declare rows as an array with exactly one object in it:
data() {
return {
rows: [{
product_id: '',
product_details: '',
product_sellPrice: '',
}],
But you try to access it just like a regular object:
var id = this.row.product_id;
In addition, you declare it as rows, but access it as row (missing plural s).
To get it running, first decide whether you want to name it rows or row and adapt the usage accordingly. Second, decide if rows must be an array (should it hold multiple objects?) or not.
If it should be an array, you probably want to access it like this:
var id = this.rows[0].product_id;
If it should not be an array, declare it like this:
data() {
return {
rows: {
product_id: '',
product_details: '',
product_sellPrice: '',
},
Trying to make a search plugin using Vue and I'm having a problem with adding a starting/default value to the list of options. If I comment out the pair or template lines involving the start prop the rest of it works fine, but nothing renders if I leave them in.
Component Code:
Vue.component('search', {
props: {
type: String,
hidein: String,
start: {
type: Object,
default: null
}
},
//props: ['type', 'hidein', 'start'],
data: function () {
return {
search: "",
select: "",
results: [],
};
},
template: '<div #load="loaded"><input :id="hidein" type="text" v-model="search" #keyup="updateList">'+
'<input type="hidden" :name="hidein" v-model="select" class="form-control">'+
'<div v-if="start">Current: <span #click="select=start.id" :class="{\'label label-success\':(select==start.id)}>'+
'+ {{start.name}}</span></div>'+
'<div v-if="results.length">Do you mean:<ul>'+
'<li v-for="result in results" :key="result.id"><span #click="select=result.id" :class="{\'label label-success\':(select==result.id)}">'+
'+ {{result.name}}</span></li>'+
'</ul></div></div>',
methods: {
updateList: function(e) {
var response = [];
console.log("search: "+this.search);
$.ajax({
method: "GET",
url: "/api/search/"+this.type,
data: { key: this.search }
}).done(function( msg ) {
this.results = msg;
console.log(this.results);
}.bind(this));
},
loaded: function () {
this.select=!!this.start ? this.start.id : null;
}
},
});
Component Call:
<search type="ships" hidein="ship_id" ></search>
Can anyone tell me what I'm doing wrong? (Besides the hacked together template, that's hopefully a completely separate issue with the pipeline I'm having)
There is a missing " here
:class="{\'label label-success\':(select==start.id)}
But also, please, use a template literal to make your life easier.
`<div #load="loaded"><input :id="hidein" type="text" v-model="search" #keyup="updateList">
<input type="hidden" :name="hidein" v-model="select" class="form-control">
<div v-if="start">
Current:
<span #click="select=start.id" :class="{'label label-success':(select==start.id)}">
{{start.name}}
</span>
</div>
<div v-if="results.length">
Do you mean:
<ul>
<li v-for="result in results" :key="result.id">
<span #click="select=result.id" :class="{'label label-success':(select==result.id)}">
{{result.name}}
</span>
</li>
</ul>
</div>
</div>`
x-editable + maskedinput returning underscores from maskedinput on enter but it does not when I click. Any ideas on how to fix this?
JSFiddle:
http://jsfiddle.net/xBB5x/10654/
jQuery Library's:
https://github.com/digitalBush/jquery.maskedinput
https://vitalets.github.io/x-editable/index.html
HTML:
1
JS:
$('a').editable({
type: 'text',
name: 'username',
tpl: '<input type="text" id ="zipiddemo" class="mask form-control input-sm dd" style="padding-right: 24px;">'
});
$(document).on("focus", ".mask", function () {
$(this).mask("?999");
});
JSFiddle:
http://jsfiddle.net/xBB5x/10655/
HTML:
1
JS:
$('a').editable({
type: 'text',
name: 'username',
tpl: '<input type="text" id ="zipiddemo" class="mask form-control input-sm dd" style="padding-right: 24px;">',
display: function(value, response) {
return false;
},
success: function(response, newValue) {
$(this).html(newValue.replace(/_/g, ''));
},
});
$(document).on("focus", ".mask", function() {
$(this).mask("?999");
});
I have a checkboxlist, I am trying to implement SelectAll/DeselectAll functionality.The items of the checkboxlist are being bound from the database.
This is how my checkboxlist looks
<div class="options"
data-bind="foreach: Factor,visible: true" style="display: none;">
<label>
<input type="checkbox" class='roles' name='roles'
data-bind="attr: { value: Id },
checked:MyViewModel.MyData.MyCheckedValues" />
<span data-bind="text: Name"></span>
</label>
</div>
MyCheckedValues and Factor are observable arrays here.
This is how MyData looks
MyData: function () {
var currentObject = this;
currentObject.MyCheckedValues= ko.observableArray()
}
selectAll: function()
{
ko.utils.arrayForEach();
return true;
}
In the internet articles I found, a separate function is used where they declare an attribute called IsSelected and set it to false initially etc and then loop through it.
But I dont have any separate function related to this.
Can you help me implementing select/deselect all?
You can also use ko.computed for selectAll and Deselect.
html:-
<span data-bind="text: selectAll()?'Deselect All':'Select All'"></span><input type="checkbox" data-bind="checked: selectAll" />
<div class="options" data-bind="foreach: Factor,visible: true" style="display: none;">
<label>
<input type="checkbox" class='roles' name='roles' data-bind="attr: { value: id },checked:isSelected" /> <span data-bind="text: name"></span>
</label>
</div>
ViewModel:-
function Factor(id, name) {
this.id = id;
this.name = name;
this.isSelected = ko.observable(false);
}
function viewModel() {
var currentObject = this;
currentObject.Factor = ko.observableArray([new Factor(1, "Jack"), new Factor(2, "John")]);
currentObject.selectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(currentObject.Factor(), function (i) {
return !i.isSelected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(currentObject.Factor(), function (i) {
i.isSelected(value);
});
}
});
}
ko.applyBindings(new viewModel());
Working Fiddle
Since I can't see your full model and am a bit confused by your bindings, I've made a quick example for you that you should be able to modify for your use.
Markup:
<button data-bind="click: selectAllCheckboxes">Select all</button>
<button data-bind="click: deselectAllCheckboxes">Deselect all</button>
<ul data-bind="foreach: data">
<li>
<label>
<input type="checkbox" data-bind="value: Id, checked: $parent.selectedCheckboxes">
<span data-bind="text: Name"></span>
</label>
</li>
</ul>
And the JS:
var myViewModel = function () {
this.data = ko.observableArray( [
{ Id: 1, Name: 'Example 1' },
{ Id: 2, Name: 'Example 2' },
{ Id: 3, Name: 'Example 3' },
{ Id: 4, Name: 'Example 4' },
{ Id: 5, Name: 'Example 5' }
] );
this.selectedCheckboxes = ko.observableArray();
this.selectAllCheckboxes = function () {
var selectedCheckboxesArray = this.selectedCheckboxes();
selectedCheckboxesArray.length = 0;
ko.utils.arrayForEach( this.data(), function ( data ) {
selectedCheckboxesArray.push( '' + data.Id );
} );
this.selectedCheckboxes.valueHasMutated();
};
this.deselectAllCheckboxes = function () {
this.selectedCheckboxes().length = 0;
this.selectedCheckboxes.valueHasMutated();
};
};
ko.applyBindings( new myViewModel() );
And here's a fiddle: http://jsfiddle.net/4VGGd/