Adding to x-editable select source with button click - javascript

I have using BootstrapTable with X-editable. I have a select box, that I would like to update the source data with a button click. Ideally, I like to get the source from the column, push a value to it and reload it without changing any edits to that column by the user.
Full code:
http://jsfiddle.net/rp4nkb46/1/
relevant code:
$('#addoption').click(function () {
names.push({value: 5, text: 'Bob'})
$('#table').bootstrapTable('OnRefresh', {});
});

Use a function to return the names array rather than specifying the array directly in your table setup:
$(function () {
$('#table').bootstrapTable({
columns: [{field: 'Contact',
title: 'Contact',
editable: {
type: 'select',
source: function() { return names; }
}
}],
data: data
});
});
It seems that the X-Editable will bind a supplied array once upon creation of the control but will call the function each time.

Related

How to eliminate the empty rows from the jTable jQuery?

I have two jTables in my web page, which loads data from a database. The first jTable fetches the data directly from the database and the second table loads its data according to the selected data in the first table.
The problem now I am facing is, in-case if there are no data to be fetched for the second table, from the particular selected row, the rows are displaying empty.
For example, I have selected a data in the table 1, but since there is no data related to the selected data, the second table is displaying empty rows.
How to hide or not to fetch if the rows were completely empty at the same time if the row has even a single entry I wanted to display that row.
I am using python in the back end to fetch the data. So, do I need to make changes in my python code or do I need to make a change in the front end jQuery or CSS.
I have tried to use the jQuery, it is not working as expected.
My first jTable code is:
$('#SelectCode').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
codes: {
title: 'Code',
},
name:{
title: 'Name',
},
},
selectionChanged: function () {
var $selectedRows = $('#SelectCode').jtable('selectedRows');
if ($selectedRows.length > 0) {
$selectedRows.each(function () {
var record = $(this).data('record');
Code = record.event_codes;
$('#System').jtable('load',{code:(SelectedCode)});
});
},
});
My second jTable code is:
$('#System').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
date:{
title:'Date',
},
Time:{
title:'Time'
},
},
});
So, can someone, please help me how can I achieve in eliminating the empty rows from the table.
Thanks,
I have achieved it by adding the following line of codes in my jTable fields:
display: function(data) {
if (data.record.date == null) {
$("#System tr").each(function() {
var cellText = $.trim($(this).text());
if (cellText.length == 0) {
$(this).hide();
}
});
}
return data.record.date;
},

Kendo UI Grid change row detail values from command function without detail collapse

I have a kendo grid with a detail template, which I wish to clear if the user clicks on the clear command in the parent row.
I managed to get this to work, but as soon as I set the value on the dataItem, the row detail collapses, which causes the user to loose his place.
function clearDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
dataItem.set("City",""); // causes row detail collapse
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "Country",
width: 150
}, { command: { text: "Clear", click: clearDetails }, title: " ", width: "180px" }],
detailTemplate: kendo.template($("#myRowDetailTemplate").html())
})
});
Working example:
https://jsbin.com/xuwakol/edit?html,js,output
Is there a way I can still clear the values in the row detail, without it collapsing.
I had the same issue I got around it by using the dataBinding function within the kendo grid.
Basically it checks for an item change event and will cancel the default action to close the grid. This allowed me to continue to use the set method.
Example:
$("#grid").kendoGrid({
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
}
I managed to get this right by not using the set method on the dataItem. http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set
I just changed the value on the dataItem, dataItem.City =""; and with the help of jquery selectors cleared the value of the textarea.
function clearDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
dataItem.City ="";
$(e.currentTarget).closest(".k-master-row").next().find("textarea[name='City']").val("");
}

Adding multiple buttons in TinyMce in a loop doesn't work

I have a config list for buttons like this:
var config = [{
name: 'first',
insertionConfig: {
title: 'first button',
onsubmit: function(){
// do sth
}
}
},{
name: 'second',
insertionConfig: {
title: 'second button',
onsubmit: function(){
// do sth
}
}
}
]
and in my TinyMce plugin I want to add all buttons according to their config. So it would end up like this:
tinymce.PluginManager.add('myPlugin', function(editor, url) {
for (var i in config) {
item = config[i];
editor.addButton(item.name, {
text: item.name,
onclick: function() {
editor.windowManager.open({
title: item.insertionConfig.title,
onsubmit: item.insertionConfig.onsubmit
}
};
}
});
but when I click on first button, it shows the second button's title. all configs of buttons refer to last added button. I know problem is something about the 'item' in the loop (all buttons refer to same item object which is the last one) but I don't know how to fix it.
Try creating a locally scoped variable for item inside the onclick function:
The issue you are running into is how variables are managed in JavaScript at the time the function is actually run. The click function is not actually run until you click an item and at that time item is pointing to the last item in the array.
EDIT: Check out this TinyMCE Fiddle for how this may happen: http://fiddle.tinymce.com/REfaab/1

How to make fuelux datagrid's(generated by backbone collection) each row editable using dialog

New StaticDataSource will construct datasource for fuelux grid. The formatter will set the property to generate editable button in datagrid cell. The code is as follows:
app.PlayersView = Backbone.View.extend({
template: _.template( $("#players-template").html() ),
events: {
"click #addUser" : "addUser",
},
initialize: function () {
if(this.collection){
this.collection.fetch();
}
this.listenTo(this.collection, 'all', this.render);
},
render: function () {
this.$el.html( this.template );
var dataSource = new StaticDataSource({
columns: [
{
property: 'username',
label: 'Username',
sortable: true
},
{
property: 'group',
label: 'Groups',
sortable: true
},
{
property: 'edit',
label: 'Edit',
sortable: true
}
],
formatter: function (items) {
$.each(items, function (index, item) {
item.edit = '<div class="btn-group"><a id="editGroup" class="btn">Edit</a></div>';
});
},
data: this.collection.toJSON(),
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource,
stretchHeight: true
});
});
The app.Playerview object is created somewhere in bakcbone router as follows:
new app.PlayersView({
collection : new app.UsersCollection
}));
Here, column are username, groups and edit. The edit column for each row contains edit button. When I click the edit button in any row, I want to pass the particular row modal or row data to any other backbone view. How can we do that?
Actualy I will open the dialog that will allow to edit that particular row. I want modal to be pre-populated by that row value.
Thanks in advance
From a Backbone point of view you have no control whatsoever on your grid. So basically, at the moment, your rows don't represent any model.
As things are now, if you only want to pre-populate your modal, I guess you could do it easily with jQuery.
However I'll assume you also want your models to be changed at the same time. I don't know Fuel UX so I don't know exactly how you could do this but (but I'm still pretty sure you can, and should if you want your models to be updated): wait until the grid is created, bind your models to the grid by creating a view which element would be the row for each, and inside this view listen to clicks on your button. Here you would have direct access to your model, and therefore your data.
If you'd post some more code (the definition of your model for example) and the HTML of the grid (or a simplified version as I'm sure it's full of custom classes and so on), I could help if you wish so.
If your players have unique identifiers you can change your edit buttons as follows, to include a player ID:
Before:
<a id="editGroup" class="btn">Edit</a>
After:
<a id="editGroup" data-id="3" class="btn">Edit</a>
Of course, you would plug in the correct ID inside your existing formatter function. You would then have access to this ID from the click event in order to populate your dialog and choose the correct model to update.

Performing action a button click event, button being placed inside dojox.grid.DataGrid.

I have a dojox.grid.DataGrid. In this a set of values are being displayed along with last 2 columns being filled up with buttons which are created dynamically according to data being retrieved from database using formatter property in gridStruture. Now i am getting the my grid fine. Buttons are also coming up fine. What i need to do now is when i click on a particular button on that button click event i redirect it to a new URL with a particular value(A) being passes as a query string parameter in that URL. And i don't want my page to be refreshed. Its like when a button is clicked it performs action on some other JSP page and displays message alert("Action is being performed").
My java script code where i have coded for my data grid ::
<script type="text/javascript">
function getInfoFromServer(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
success:postToPage(result),
alert('Load was performed.');
},"json");
}
function postToPage(data){
alert(data);
var storedata = {
identifier:"ActID",
items: data
};
alert(storedata);
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
var gridStructure =[[
{ field: "ActID",
name: "Activity ID",
classes:"firstName"
},
{
field: "Assigned To",
name: "Assigned To",
classes: "firstName"
},
{ field: "Activity Type",
name: "Activity Type",
classes:"firstName"
},
{
field: "Status",
name: "Status",
classes: "firstName"
},
{
field: "Assigned Date",
name: "Assigned Date",
classes: "firstName"
},
{
field: "Assigned Time",
name: "Assigned Time",
classes: "firstName"
},
{
field: "Email",
name: "Send Mail",
formatter: sendmail,
classes: "firstName"
},
{
field: "ActID",
name: "Delete",
formatter: deleteact,
classes: "firstName"
}
]
];
//var grid = dijit.byId("gridDiv");
//grid.setStore(store1);
var grid = new dojox.grid.DataGrid({
store: store1,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true
},'gridDiv');
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(){
var items = grid.selection.getSelected();
dojo.forEach(items, function(item){
var v = grid.store.getValue(item, "ActID");
getdetailsfordialog(v);
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
showDialog();
}, grid);
});
}
function sendmail(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'\">Send Mail</button>";
}
function deleteact(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\">Delete</button>";
}
</script>
I am getting grid data using $.get call. In the above code field Email and ActID are actually buttons being created when each time function sendmail and deleteact are being called up in formatter. Grid is displayed. Also the value of alert(item) in both functions are coming up right that is there respective values. Like for alert(item) in Delete i am getting ActID and alert(item) in sendmail getting "shan#gmail.com" Now i want that on a particular button click(button in Sendmail column) my page
http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'
and button click in Delete column this page
http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\"
opens up with value of items being retrieved from database. I have applied a rowClick event also which is also causing problem as when i click u button my Rowclick event fires instead of button click event. How to do this. I thought of applying click event to each button on grid. But there ID i don't know. Please help me on this one. Thanks..
I think, what you need is adjusting your server-side code to handle ajax post requests for sending mail and use dojo.xhrPost method when user clicks button. Your JS code may look like this:
function sendMailHandler(evt, item) {
dojo.xhrPost({
url: "/2_8_2012/jsp/SendMailReminder.jsp",
content: {
'SendMail': item
},
error: function() {
alert("Sent failure");
},
load: function(result) {
alert("Email sent with result: " + result);
}
});
dojo.stopEvent(evt);
}
function sendmail(item) {
return "<button onclick='sendMailHandler(arguments[0], \"" + item + "\")'>Send Mail</button>";
}
Note that dojo.stopEvent(evt); in sendMailHandler is used to stop event bubbling and prevents RowClick raising.
There is also dojo.xhrGet with similar syntax to perform ajax GET requests, which you can use instead of jQuery's $.get. You can also use dojo.xhrGet instead of dojo.xhrPost in my example, because there is chance that it will work with your back-end without tweaking, but POST (or ajax form submission) would be more semantically correct.
And about "Tried to register an id="something", you should adjust your code to avoid IDs duplication. Or show your code causing errors.

Categories