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.
Related
I am using a DevExtreme Popup that will show whenever a user selects an option from a SelectBox. The Popup will identify placeholder values inside the selected value and present the user options to replace them with.
When the SelectBox value changes, I look for placeholders and append a dxSelectBox for each placeholder to a div valuesList inside the popup.
var matches = selectedValue.match(templateRegex);
if (matches.length > 0) {
matches.forEach(function (m) {
var newDiv = $("<div/>");
newDiv.dxSelectBox();
newDiv.appendTo("#valuesList");
});
$("#myPopup").dxPopup("instance").show();
}
The problem is the first time this runs, it doesn't append anything to the Popup content. Using the debugger I confirm that the code does run, but nothing gets added. The popup shows with no content. However, if I select the value again in the SelectBox, it runs and the popup gets new content appended to it as it should, as well as all subsequent changes. It's only the first time that doesn't work.
I confirmed this by adding this to the JavaScript:
$(document).ready(function () {
$("#myValuePopup").dxPopup("instance").show();
$("#myValuePopup").dxPopup("instance").hide();
});
With that added, content is correctly appending the first time I select a new value from the SelectBox, confirming that it only works if the Popup has already been shown. This seems to be a sloppy solution though, and it requires adding a bunch of checks to the onHidden event handler for the Popup since some variables it uses aren't initialized yet, so I'd rather not have to resort to it.
Is there another way to pre-initialize the dxPopup? I couldn't find anything going through the documentation. And the Popup's _initialized property is true even before being shown the first time.
Update:
The dxPopup is created using Razor inside my View:
#(Html.DevExtreme().Popup()
.ID("myPopup")
.OnHidden("myPopupClosed")
.ContentTemplate(
#<text>
<div id="valuesList">
</div>
</text>
)
)
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
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.
I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...
I want to show Row #1 on default and then when you press the "load more" button, load another row each time. I already have the content in the rows (no need for AJAX) but I just want to be able to show it when the button's pressed.
See this jsFiddle example.
The JavaScript part, with jQuery:
$('#loadmore').click(function(){
$('tr.hide').first().removeClass('hide').addClass('show');
});
Use display: none; by default on all rows (except row #1).
Then on each click, use .show() on the given row or :
$('BUTTON_SELECTOR').click(function(){
$('ROWS_CONTAINER_SELECTOR:hidden:first').show();
});
If you already have the data then you can simply set the container div to overflow: hidden and resize it to display an extra row with each click.
$("#button").click(function(){
$("#container").css("height","+=150");
});