In my app, I used jQuery Data Table to show the results of a query made by form. I have now a new task: I must add, in this table, a column where for each row I have a button (or a link, no matter which of this 2).
The focal point is that when a user click this button or link, a popup must be open to allow the operator to modify some value in the db (so it's for this that I need a button for each row; every row may have a value to modify, or not).
The question is: how can I add this button/link and how can I force, after click, the popup opening?
You can do this like:
$('#data_table').DataTable( {
data: data
});
$(document).on('click', '#data_table tbody tr', function(){
// alert('hello');
$('#dialog').dialog();
});
Working Fiddle
Note: In this example I am using jquery ui dialog, you can use Bootstrap modal as well
Use bootstrap Modal. Bootstrap modal will allow you to do the operation you want
Related
This is my first time asking a question here so if you need more information just let me know.
I’m using JavaScript with the handlebars framework.
I have a bootstrap modal which has a form in it. I have 3 buttons on this form (‘cancel’, ‘save’, and ‘save and add another’)
I need the ‘save and add another’ button to submit the form (Which adds the item to the DB), refresh the page behind it so that the list on the page shows the newly added item, and finally keep the modal open so that another item can be added.
I think I have a solution. This snippet is called on the form submit and as the callback of the DB function. I didn't need to refresh the view, just the list that I was changing.
modalPopup.on("hidden.bs.modal", function() {
if (addAnother) {
modalPopup.modal("show");
addAnother = false;
}
})
itemTable.bootstrapTable('refresh');
modalPopup.modal("hide");
I have a bootstrap modal which contains a textarea element. I also have a dynamic table where you can add a column. My problem is, when I click the note/comment button icon, then input some text and when I click save, then all the textareas inside the modal fill up.
This is some of my code
function save_modal(){
data = {};
$("#save").on("click", function(e){
e.preventDefault(); // prevent de default action, which is to submit
$('#Mymodal').modal('toggle'); //or $('#IDModal').modal('hide');
return false;
});
}
What I am trying to achieve is that what you inputted should stay there in the textarea even if you're adding a new column.
Please see the demo
JSFIDDLE
You are using the single popup layout for all instances. You should clean up popup content (.html('')) after saving or always cloning (.clone()) popup layout before openning.
Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header
Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});
Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/
I use kenod UI to create my Web UI. I have a column template like below
var template = "<input id='details-button' type='image' src='images/detail_button.png' ng-click='showDetals(this.dataItem)'/>#: Contact #";
I want to popup a window every time I click the details button, and the popup's position should be at the bottom right of the button which I click. Here's what I do currently
var popup = $("#detailsPopup");
popup.kendoPopup({
anchor: "#details-button",
origin: "bottom right",
});
But it doesn't work. Every time, the popup display at the bottom right of the button in the first row, not the bottom right of the button which I click.
Checking the generated html, all of the buttons' id are same(details-button). So the popup always display related to the first details-button.
Updated:
This is my changed solution, but still doesn't work.
function popupDetails(item) {
detailsGrid.kendoGrid({
columns: ...,
dataSource: item.Details
});
var anchor = "#details-button" + item.id;
var popup = $("#details-popup");
popupp.kendoPopup({
anchor: anchor,
origin: "bottom right",
});
popup.data("kendoPopup").open();
}
Anyone can help?
Using a static ID in a column template will naturally repeat it for each row, so this is not a viable option. You can concatenate the static ID part ("details-button") with the ID value of the Grid dataItem and in this way you will have truly unique detail button IDs.
template: "<input id='details-button#: MyGridItemID #' />"
Then, change the Kendo UI Popup initialization code to use the generated button ID.
Update
The Kendo UI Popup initialization statement cannot use a binding expression (#: ... #), because it is placed outside the Kendo UI column template. Use the dataItem object that is passed to the showDetails function and retrieve and concatenate myId again for the anchor setting.
Update 2
It appears that you are creating a new Kendo UI Popup instance from the same element over and over agan. I recommend you to destroy the old instance (which will also remove its DOM), then append a new <div> to the page and create a new Popup from it.
I am not sure about the popupp part, it may be a copy-paste error or you should be getting a JS error there.
Update 3
On a side note, a similar behavior can be achieved with a single Kendo UI Tooltip instance that is configured in the following way:
the tooltip widget element is the Grid table
there is an appropriate filter set, that points to the detail buttons, e.g. via a CSS class of theirs
showOn is set to "click"
use the content function to set the tooltip content, depending on the current target.
http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip
I have a Custom Command button in a Kendo Grid, however its functionality is linked to the row itself. Is there any way to only show the custom command button AFTER an insert?
The grid is currently in inline edit mode, so when you click insert the custom command is shown all the time, and clicking on it produces an error since the data does not yet exist (the user hasn't clicked the update button)
See image for example :-
I'm trying to have the Edit Teams, Export and Set Active button only visible after the data has been entered into the DB (ie after the update button is clicked).
You can handle onEdit event and disable the custom command button using jquery code.
please post your code in order to get it working.
I've found a way to do this using CSS only - Kendo applies the k-grid-edit-row class to any grid row thats in the editable state, Using that I can do :-
/* Hide the buttons on an edit row */
.k-grid-edit-row .k-grid-EditTeams,
.k-grid-edit-row .k-grid-Export,
.k-grid-edit-row .k-grid-SetActive {
visibility: hidden;
}
Where k-grid-EditTeams, Export and SetActive are my button classes.