I need to display information from json in HTML modal window. I have 12 buttons and when user clicks on it I want to show data of this month from json file.
let myJson;
$(`button`).on(`click`, function() {
let id_popup = this.attributes[`data-id`].value;
$.getJSON(`content/js/monthjson.json`, function(months) {
let month = Object.values(months).filter(function(data) {
return data.id === id_popup;
});
$(`.modal-title`).text(month.georgiamonth);
$(`.modal-body`).html(month.description);
});
});
myJson = {
"months": [{
"id": 1,
"georgiamonth": "Jan",
"description": "description Jan month",
"suggestmonths": ""
},
{
"id": 2,
"georgiamonth": "Feb",
"description": "description Feb month",
"suggestmonths": ""
},
{
"id": 3,
"georgiamonth": "Mar",
"description": "description mar month",
"suggestmonths": ""
},
{
"id": 4,
"georgiamonth": "April",
"description": "",
"suggestmonths": "description April month"
},
{
"id": 5,
"georgiamonth": "May",
"description": "description May month",
"suggestmonths": ""
},
{
"id": 6,
"georgiamonth": "June",
"description": "description June month",
"suggestmonths": ""
},
{
"id": 7,
"georgiamonth": "July",
"description": "description July month",
"suggestmonths": ""
},
{
"id": 8,
"georgiamonth": "Aug",
"description": "description Aug month",
"suggestmonths": ""
},
{
"id": 9,
"georgiamonth": "Sept",
"description": "description Sept month",
"suggestmonths": ""
},
{
"id": 10,
"georgiamonth": "Oct",
"description": "description Oct month",
"suggestmonths": ""
},
{
"id": 11,
"georgiamonth": "Nov",
"description": "description Nov month",
"suggestmonths": ""
},
{
"id": 12,
"georgiamonth": "Dec",
"description": "description Dec month",
"suggestmonths": ""
}
]
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block get-month-id" data-toggle="modal" data-target="#modelId" data-id="1">Show id 1</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="2">Show id 2</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="3">Show id 3</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="4">Show id 4</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="5">Show id 5</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="6">Show id 6</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="7">Show id 7</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="8">Show id 8</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="9">Show id 9</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="10">Show id 10</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="11">Show id 11</button>
<button type="button" id="btn" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-id="12" data-target="#modelId">Show id 12</button>
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> month title here </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
description here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
First, you seem to be using backticks instead of apostrophes in your jQuery selectors and elsewhere. That's not standard, and while it may work I recommend against it if only for reasons of convention. I've made the conversion here.
Then, rather than adding a click handler we'll just use Bootstrap's modal show event, getting the ID from the relatedTarget on the event.
Finally, we'll use the find() method to get the corresponding data object from the array.
Bonus tip: Get your data just once on page load instead of every time a button is clicked. That is, if you don't expect the data to change frequently.
let myJson;
$('#modelId').on('show.bs.modal', function(event) {
const id_popup = event.relatedTarget.getAttribute('data-id');
// $.getJSON('content/js/monthjson.json', function(months) {
const month = myJson.months.find(el => el.id == id_popup);
$('.modal-title').text(month.georgiamonth);
$('.modal-body').html(month.description);
// });
});
myJson = {
"months": [{
"id": 1,
"georgiamonth": "Jan",
"description": "description Jan month",
"suggestmonths": ""
},
{
"id": 2,
"georgiamonth": "Feb",
"description": "description Feb month",
"suggestmonths": ""
},
{
"id": 3,
"georgiamonth": "Mar",
"description": "description mar month",
"suggestmonths": ""
},
{
"id": 4,
"georgiamonth": "April",
"description": "",
"suggestmonths": "description April month"
},
{
"id": 5,
"georgiamonth": "May",
"description": "description May month",
"suggestmonths": ""
},
{
"id": 6,
"georgiamonth": "June",
"description": "description June month",
"suggestmonths": ""
},
{
"id": 7,
"georgiamonth": "July",
"description": "description July month",
"suggestmonths": ""
},
{
"id": 8,
"georgiamonth": "Aug",
"description": "description Aug month",
"suggestmonths": ""
},
{
"id": 9,
"georgiamonth": "Sept",
"description": "description Sept month",
"suggestmonths": ""
},
{
"id": 10,
"georgiamonth": "Oct",
"description": "description Oct month",
"suggestmonths": ""
},
{
"id": 11,
"georgiamonth": "Nov",
"description": "description Nov month",
"suggestmonths": ""
},
{
"id": 12,
"georgiamonth": "Dec",
"description": "description Dec month",
"suggestmonths": ""
}
]
};
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block get-month-id" data-toggle="modal" data-target="#modelId" data-id="1">Show id 1</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="2">Show id 2</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="3">Show id 3</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="4">Show id 4</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="5">Show id 5</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="6">Show id 6</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="7">Show id 7</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="8">Show id 8</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="9">Show id 9</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="10">Show id 10</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="11">Show id 11</button>
<button type="button" id="btn" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-id="12" data-target="#modelId">Show id 12</button>
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> month title here </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
description here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Related
I build a custom timepicker with jQuery and bootstrap.
It's almost finished, but 1 "nice to have detail" is missing and I'm stucked getting to the result.
It should follow this rules:
Select the time on click
Only related times are possible to select.
Only 1 time range at once is possible (e.g. 09:00-11:00 works but can't pick another time range)
Disabled times are not possible to pick and if they are between a possible time range, only the range before or after disabled are allowed.
It should be possible to click the start time and the end time and if there are no obstacles in between, the times between should be selected as well.
1-4 are working but I'm stucked on point 5.
So what I want to achieve is that if I click on 13:00-14:00 and 15:00-16:00, 14:00-15:00 should be selected automatically if allowed by above rules.
$('.time-cal .time-btn').on('click',function(){
if($('.time-cal .time-btn.btn-success').length == 0)
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}else{
if($(this).hasClass('btn-light'))
{
if($(this).next().hasClass('btn-success') || $(this).prev().hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}else{
let next = $(this).next();
let prev = $(this).prev();
if(!next.hasClass('btn-success') || ! prev.hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-edit altered behaviour based on the comments.
At startup each time'button' is divided into a specific timeblock so buttons in the same timeblock can be quickly handled together (there might be some additional/other behavioral requirements when reselecting)
const
disabledClass = 'btn-danger',
selectedClass = 'btn-success',
notselectedClass = 'btn-light',
timeButtons = $('.time-cal .time-btn'),
enabledButtons = timeButtons.not('.' + disabledClass ),
timeBlocks = [];
timeButtons.each((index,btn)=>{btn.enabled=!$(btn).hasClass(disabledClass);
if(btn.enabled){
if(index===0 || !timeButtons[index-1].enabled){
timeBlocks.push([]); //new timeblock
}
btn.timeBlock = timeBlocks[timeBlocks.length-1];
btn.timeBlock.push(btn);
}
prevEnabled = btn.enabled;
btn.index = index;btn.selected=false;
btn.setSelected = sel => {if(btn.selected===sel)return; btn.selected=sel;
$(btn).toggleClass(notselectedClass,!sel).toggleClass(selectedClass,sel);}
});
enabledButtons.click(function(){
if(this.selected){
//deselect and make sure times in this block after this button are deselected too
this.timeBlock.filter(btn=>btn.index >= this.index && btn.selected).forEach(btn=>btn.setSelected(false));
return;
}
//deselect other timeblocks
enabledButtons.toArray().filter(b=>b.timeBlock !== this.timeBlock).forEach(b=>b.setSelected(false));
//check if there are other selected
const selected = this.timeBlock.filter(b=>b.selected);
if(selected.length === 0)
this.setSelected(true); //no other buttons selected, simply select
else{
//select range withint the timeblock
let from = selected[0].index, to = this.index;
if(from > to)
[from,to] = [to,from];
for(let i = from;i<=to;i++)
timeButtons[i].setSelected(true);
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
How do I coding overflow-y: visible with overflow-x: scroll?
The number of buttons can vary and when there are too many of them, they scroll horizontally. If I clicked Dropdown button, then I want to make overflow-y: visible in div. But now, dropdown lists are hidden in div.
How do I change?
My Code part
html
<div class="container-fluid fill-height">
<div class="navbar navbar-expand scroll" role="group">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="testDropdown">
<a class="dropdown-item" href="#">Menu</a>
</div>
</div>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
</div>
</div>
css
.scroll {
overflow-x: scroll;
overflow-y: visible;
}
Codepen live sample here
One last thing:
From the bootstrap official doc (http://getbootstrap.com/components/#dropdowns-alignment):
May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
https://github.com/davidstutz/bootstrap-multiselect/issues/411
https://www.bootply.com/YvePJTDzI0
I have a PHP loop that creates a series of buttons with unique data attributes. When these buttons are clicked they open a modal which collects the values of the data attributes on the button, and uses them to prepopulate the form. Can be seen here: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
The modal opens, but doesn't display the data I'm trying to collect. I also cannot get core functions such as alert(); to work.. and I'm lost.
I have tried using jQuery's data() and the relevant data attributes, but when they also didn't work I stuck to using attr().
Can anyone help?
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
alert();
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
)}
});
</script>
It seems you have an error in your code. Try this:
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.
I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka
I am trying to do jQuery sortable with items to be moved from tab contents to another div. It it working mostly fine, but the problem I am having is that I would like the item to be back to tab from which it was taken.
So let say that I have got tabs:
Shipping Address with items:
Street 1
Street 2
City
Country
Attributes with items:
Industry
Types
Full Name
The tab content is taking 50% of width on left and 50% of width on right is the div block to were I want to drop the items. If I would like to remove the item from div block, it should come back to the related tab, so e.g. Industry cannot go back to Shipping Addres , it needs to go to Attributes.
JSFiddle: http://jsfiddle.net/epxp5L48/
The screen how it looks like
My HTML code:
<div class="row">
<div class="col-xs-6">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Attributes</li>
<li>InvoiceAddress</li>
<li>ShippingAddress</li>
</ul>
<div id="fields-draggable" class="tab-content">
<div class="tab-pane connectedSortable ui-sortable active" id="Attributes">
<button id="field_industry" class="btn btn-primary btn-lg btn-block ui-sortable-handle">industry</button>
<button id="field_types" class="btn btn-primary btn-lg btn-block ui-sortable-handle">types</button>
<button id="field_full_name" class="btn btn-primary btn-lg btn-block ui-sortable-handle">full_name</button>
</div>
<div class="tab-pane connectedSortable ui-sortable" id="InvoiceAddress">
<button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
<button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
<button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
<button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
<button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
<button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
<button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
<button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
</div>
<div class="tab-pane connectedSortable ui-sortable" id="ShippingAddress">
<button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
<button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
<button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
<button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
<button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
<button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
<button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
<button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
</div>
</div>
</div>
<div class="col-xs-6">
<div id="fields-sortable" class="connectedSortable well ui-sortable" style="min-height: 40px;">
</div>
</div>
</div>
and jQuery UI code:
$("#fields-sortable, #Attributes" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$("#fields-sortable, #InvoiceAddress" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$("#fields-sortable, #ShippingAddress" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$( "#fields-sortable" ).sortable({
update: function (event, ui) {
var data = $(this).sortable( "serialize");
console.log(data);
}
});
I have managed to do it by adding the data-tab-id attribute to the buttons and adding over event to the sortable
over: function(event, ui) {
var overId = $(this).attr('id');
var elementId = $(event.toElement).data('tab-id');
if(overId != "fields-sortable" && overId != elementId) {
var aClick = $("#nav-types").find('a[href="#' + elementId + '"]');
aClick.click();
}
}