I've this code in my datatable:
$(document).ready(function () {
$('#LogsTable').DataTable({
"order": [[3, 'desc']],
paging: false,
//"scrollY": false,
//"scrollX": true,
searching: false,
"bInfo": false,
"columnDefs": [
{ "width": "20%", "targets": 4 }
]
});
});
my problem is how to put right the datable inside my modal bootstrap?
insert a scroll in X maybe. Dont know.
Thanks
add model-lg class with modal-dialog
<div class="modal" id="email" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog model-lg">
<div class="modal-content">
</div>
</div>
</div>
You can try add "table-responsive" class to your table. Bootstrap 4 have it for sure, but dunno about lower versions.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Related
I've read all the documentation and stackoverflow I can find, but still am having issues with this.
I'm building a Trello clone with Vue and Rails.
I have many draggable lists.
Each list has draggable cards.
When I drag a card from one list to a second list, how do I persist this to my ajax rails endpoint?
I've tried using the #end method and the :move prop, but have had zero luck.
#app.vue
<template>
<draggable v-model="lists" group='lists' class="row dragArea" #end="listMoved">
<div v-for="(list, index) in lists" class="col-3">
<h6>{{ list.name }}</h6>
<hr />
<draggable v-model="list.cards" group='cards' class="dragArea" :move="cardMoved">
<div v-for="(card, index) in list.cards" class="card card-body mb-3">
{{ card.name }}
</div>
</draggable>
<div class="card card-body">
<input v-model="messages[list.id]" class="form-control" ></input>
<button v-on:click="submitMessages(list.id)" class="btn btn-secondary">Add</button>
</div>
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
props: ["original_lists"],
data: function() {
return {
messages: {},
lists: this.original_lists
}
},
methods: {
cardMoved: function(event) {
console.log(event)
var data = new FormData
data.append("card[list_id]", WHERE_DO_I_FIND_THIS_ID)
data.append("card[position]", event.draggedContext.element.id)
Rails.ajax({
url: `/cards/${event.draggedContext.element.id}/move`,
type: "PATCH",
data: data,
datatype: "json"
})
},
}
}
</script>
Use the change event that contains all the dnd information you need and is called only once the drag operation is ended.
As suggested by #sovalina you need to pass extra infomation linked to the list:
:change="changed(list.id, $event)"
Also your div should be keyed:
<div v-for="(card, index) in list.cards" :key="card.name" class="card card-body mb-3">
I meet an error on class reactivity and dot not find solution despite a lot of tests.
I modify data with local methods and it work but, application on this DOM (reactivity), does not exceed one. After one modification, the DOM is figed.
I use an Vue extend, i use $set to define value of attribute (because the extend of vue use an return object) or direct access, but the result always the same.
Do you have an idea ?
Thanks in advance.
Jérémy
It's an exemple of code (i use webpack to build my vue app, javascript script separate to html).
<div id="modalMemberEdit" class="modal fade modalmember" v-bind:class="{ 'in':showmodal }" role="dialog" v-bind:style="{'display':displaymodal,'border':bordermodal}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" v-on:click="hideModal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-rouge" v-on:click="hideModal" ></button>
</div>
</div>
</div>
</div>
const modalMemberEdit = Vue.extend({
name: "modalMember",
data: function () {
return {
displaymodal: "none",
bordermodal: "15px solid white",
showmodal: false,
}
},
methods: {
showEditModal: function( id ) {
this.$set(this._data,"showmodal",true);
this.$set(this._data,"displaymodal","block");
},
hideModal: function() {
this.$set(this._data,"showmodal",false);
this.$set(this._data,"displaymodal","none");
}
},
mounted: function() {
this.$set(this._data,"showmodal",true);
this.$set(this._data,"displaymodal","block");
}
});
I'm trying to use bootstrap-datetimepicker from datetimepicker, but when the date picker is displayed, this covers the input.
The code that I use is something like this:
<div class="col-md-6" >
#Html.LabelFor(model => model.BeginDate)
<div class="form-group" id="">
#Html.TextBoxFor(model => model.BeginDate, new { #class = "form-control" , #id="datetimepicker"} )
</div>
#Html.ValidationMessageFor(model => model.BeginDate)
</div>
I initialize the Datetimepicker like this:
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker({
defaultDate: '',
showTodayButton: true,
format: 'dd-mm-yyyy',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15,
autoclose: true,
startView:3,
minView: 2,
language: 'es'
});
});
Bootstrap v3.0.2
ASP MVC 5
I believe your issue is because you are missing a div wrapping your control the class “input-group”. This gives it a relative position which is required as the picker is positioned absolute.
The docs have the following example
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar</span>
</span>
</div>
</div>
https://eonasdan.github.io/bootstrap-datetimepicker/
I'm trying to display a modal dialog when data is submitted on my create view. I need the modal to force the submit to wait for user confirmation on the modal dialog. Then the data needs to be submitted. Below is my create view code using bootstrap 3.0 modal-dialog:
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="col-md-offset-2 col-md-10">
<input id="create" type="submit" value="Create" class="btn btn-default"/>
</div>
</div>
<div id="modalBox" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h1>Confirmation</h1>
</div>
<div class="modal-body">
<h6>Click YES to confirm</h6>
</div>
<div class="modal-footer">
<button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">No Thanks</button>
<button id="yesPost" class="btn btn-primary" name="postConfirm" value="true" data-dismiss="modal">YES</button>
</div>
</div>
</div>
#section scripts{
<scripts>
$(function () {
var modalBox = function (e) {
e.preventDefault();
$("#modalBox").modal({ show: true });
};
$("#create").click(modalBox);
});
<scripts>
}
This does interrupt the submit function and brings up the modal dialog but I don't know how to submit the data back to the controller once a selection is made on the dialog. I have also tried using the jquery ui modal dialog with the script below:
<script>
$("#create").click(function (e) {
e.preventDefault();
$("#postModal").dialog("open");
});
$("#postModal").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"No Thanks": function (data) {
$("#create").submit();
$(this).dialog("close");
},
"YES": function () {
$("#create").submit();
$(this).dialog("close");
}
}
});
</script>
This does bring up the modal dialog but I still can't get it to submit the model data back to the controller. Any help would be appreciated.
UPDATE
By inspecting the produced html I discovered my input fields resided within a form that I didn't put there. I suspect this is due to me using the #Html.ValidationSummary(true) or something built into MVC. So instead of using:
$("#create").submit();
I used:
$("form:first").submit();
To submit the first, and only form, on the page and it worked!
Change your create button type to type=button, and make it to just open modal view. And make your yespost button in modal div holder to type submit . Also you can try to put whole modal div holder inside your form-group div. Here you are making post before openning modal view. It s because your button have 2 logic task, separate those task and this should work.
example is very simple.
select the two search condition and return a table with pagination, the whole page will not refresh.
so i use the grails formRemote to submit the form, and the control return the gender with template and it work well. However, the pagination i want to use Jquery, but i cant pass the formRemote params to the remoteFunction using onSuccess method in formRemote.
Here it is the code:
<div class="formSep col-md-12">
<g:formRemote update="searchResult" class="form-inline" role="form" name="form"
url="[controller: 'autoRateRecord', action: 'search']" onSuccess="initPagination(data)">
<div class="form-group col-lg-2">
<g:select class="form-control" name="notified" from="${['done', 'undone']}"
noSelection="${['null': 'Oops']}">
</g:select>
</div>
<div class="form-group col-lg-2 pull-right">
<button type="submit" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span> search
</button>
</div>
</g:formRemote>
</div>
<div id="searchResult">
<g:render template="searchList"/>
</div>
<script type='text/javascript'>
function initPagination(data) {
console.log("------> " + data)
$("#Pagination").pagination(10, {
callback: getRecordList(1),
prev_text: "prev",
next_text: "next",
items_per_page: 15,
num_edge_entries: 1
});
}
**!!!!!!! need formRemote data !!!!!!!**
function getRecordList(page_index) {
<g:remoteFunction controller="autoRateRecord" action="search" update="searchResult" params="'page='+page_index"/>
}
// On load, style typical form elements
$(function () {
});
</script>
the controller code is:
def search = {
log.info(ToStringBuilder.reflectionToString(params))
// logic .....
render(template: "searchList", model: [
autoRateRecords: result,
total : result.totalCount
])
}
I would change the pagination script to something like
$("#pageHiddenFieldId").val(pageNo);
$("#myForm").submit();