DataTables - Disable Smart Search - r

I searched the documentation, but when applying it to my api it didn't work... I need to disable DataTables smart search. Insert "smart": false at startup as below:
var table = $('table#tbitens').DataTable({
"ajax" : "/api/v1/get/itens/dtItem?baixado=" + baixado,
"deferRender": true,
"processing": true,
"serverSide" : true,
"destroy": false,
"scrollX": "100%",
"scrollY": "50vh",
"scrollCollapse": true,
"stateSave": true,
select: {
style: 'single'
},
"search": {
"smart": false
},
Imagem do sistema de busca
In the search button I tried these two ways, the one commented on and the one on the top line, but without success. If anyone can help, I appreciate it, I'm new in the area and I'm still in the learning process. Trying to solve this task since Monday.
//Botão pesquisar
$('#btnPesquisarItem').on('click', function(){
var otable = $('#tbitens').DataTable();
var collection = $("input.column_filter");
collection.each(function() {
if ($(this).val().trim() != ''){
otable.columns($(this).parents('tr').attr('data-column')).search("^" + $(this).val() + "$", true, false, true).draw();
// original: otable.columns($(this).parents('tr').attr('data-column')).search($(this).val().trim());
}
});
HTML
<div class="tab-content" id="tabConteudo">
<!-- FILTROS -->
<div class="tab-pane fade" id="pesquisar" role="tabpanel" aria-labelledby="pesquisar-tab">
<div class="table-responsive p-2">
<div class="row">
<form id="formitens" class="form-horizontal" method="POST" style="margin: 10px">
<div class="col-sm-4">
<table style="width: 67%; margin: 0 auto 2em auto;">
<tbody>
<tr id="filter_col0" data-column="1">
<td>Empresa</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
</tr>
<tr id="filter_col1" data-column="2">
<td>Filial</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
</tr>
<tr id="filter_col2" data-column="3">
<td>Item</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
</tr>
<tr id="filter_col3" data-column="4">
<td>Agregado</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
</tr>
<tr id="filter_col4" data-column="5">
<td>Chapa</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
</tr>
<tr id="filter_col5" data-column="6">
<td>Descrição</td>
<td align="center"><input type="text" class="column_filter" id="col6_filter"></td>
</tr>
<tr id="filter_col6" data-column="7">
<td>Conta</td>
<td align="center"><input type="text" class="column_filter" id="col7_filter"></td>
</tr>
<tr id="filter_col7" data-column="8">
<td>Classe</td>
<td align="center"><input type="text" class="column_filter" id="col8_filter"></td>
</tr>
<tr id="filter_col8" data-column="9">
<td>Centro</td>
<td align="center"><input type="text" class="column_filter" id="col9_filter"></td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="col-sm-4">
<button type="submit" id="btnPesquisarItem" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Pesquisar
</button>
<button type="button" id="btnLimparPesquisa" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span> Limpar pesquisa
</button>
</div>
</div>
</div>
</div>
<!-- ITENS -->
<div class="tab-pane fade show active" id="itens" role="tabpanel" aria-labelledby="itens-tab">
<div class="table-responsive p-2">
<div class="panel-header p-1">
<div class="row">
<div class="col-sm-1">
<a class="tip btn btn-sm btn-success" data-container="body" data-toggle="popover" data-content="Insere um novo item" th:href="#{/itens/add/}"
sec:authorize="hasAnyAuthority('Administrador', 'Aquisições')">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="col-sm-4" sec:authorize="hasAnyAuthority('Administrador', 'Movimentações')">
<select id="movimentacoes" autofocus="autofocus">
<option value="" disabled selected>Selecione um item para movimentar</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="verBaixados">
<label class="form-check-label" for="exampleCheck1">Exibir Itens Baixados</label>
</div>
</div>
</div>
</div>
<table id="tbitens" class="table table-sm table-hover table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Empresa</th>
<th>Filial</th>
<th>Item</th>
<th>Agregado</th>
<th>Chapa</th>
<th>Descrição</th>
<th>Conta</th>
<th>Classe</th>
<th>Centro</th>
<th:block th:each="area : ${areasConts}">
<th th:text="#{general.cost} + ' ' + ${area.descricao}">Custo</th>
<th th:text="#{general.depreciation} + ' ' + ${area.descricao}">Depreciação</th>
</th:block>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Related

How to insert multiple checkbox values into firebase using vue js

I've a form that contains a textarea and a table with a list of many members (from a collection named Members). Each table's contain two checboxes: one to mark the presence of the member and the second one to mark his payment. After clicking on the submit button I'd like to have in my firebase database something like this:
Meeting collection:
associationId,
textareaValue,
createdAd
Presence collection:
memberId,
meetingId,
present: true or false,
createAt
Payment collection:
memberId,
meetingId,
payment: true or false,
createAt
<form #submit.prevent="handleSubmitNewMeeting">
<!-- step one -->
<div class="card" v-if="showFormPart1">
<div class="card-header">
<h4>Entrer le sujet principal de la réunion</h4>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" v-model="subjects" required rows="3"></textarea>
</div>
<p></p>
<div class="row">
<div class="col-sm-6">
<button #click="showForm=false" class="btn btn-danger" style="width: 100%">
Annuler
</button>
</div>
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=true;
showFormPart1=false;">
Suivant
</button>
</div>
</div>
</div>
</div>
<p></p>
<!-- step two -->
<div class="card" v-if="showFormPart2">
<div v-if="members">
<div class="card-header">
<h4>Cocher les présences et payements</h4>
</div>
<div class="card-block p-0">
<table class="table table-bordered">
<thead class="">
<tr align="center">
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Téléphone</th>
<th scope="col">Présence</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" align="center">
<td>{{ member.memberFirstname }}</td>
<td>{{ member.memberLastname }}</td>
<td>{{ member.memberPhoneNumber }}</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="present">
<span class="slider round"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="payment">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
<p></p>
<div class="row">
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=false;
showFormPart1=true;">
Précédent
</button>
</div>
<div class="col-sm-6">
<button class="btn btn-secondary"> Valider </button>
</div>
</div>
</div>
</div>
</div>
<p></p>
</form>
How to do these with firebase using Vue Js please ? thanks !

Form Validation with font awesome icons inside ng-repeat

Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached:
Cart OnLoad
Last Address Changed
Any help and I would be grateful
Found the solution here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>

table modal won't read any other rows reactjs

I have a problem it only reads the first row item, i dont know why it does that.. how can i use foreach loop for this... or any kind of code so it will work because it doesn't read any other row besides the first one im so confused because I haven't done reactjs before
PS: the data came from an api from asp.net...
you can check the image here
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address}</td>
<td><center>
<button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
constructor() {
super();
this.state = { jsonReturnedValue: [] }
}
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}`
I think something like this should work
import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
let index = -1;
constructor() {
super();
this.state = { jsonReturnedValue: [] ,
name: '',
address: ''
}
}
renderItem(d, i) {
debugger
index++;
let name = d.Employee_Name;
let address = d.Address;
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={this.state.jsonReturnedValue[index].Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={this.state.jsonReturnedValue[index].Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}

Accordion-toggle not working on IE 11 (bootstrap 3)

Below Pasted Code is working great on Chrome and Firefox but latest IE versions are not showing accordion-toggle collapse.
Chrome and FF Screenshot : https://drive.google.com/file/d/0BwCdx1TYINUsQjIwdnlhVDN5eGM/view?usp=sharing
How it appears on IE:
https://drive.google.com/file/d/0BwCdx1TYINUsajE5eExicmlaejg/view?usp=sharing
<div class="panel-collapse" collapse="!client.isDaySelected">
<div class="panel-body container-fluid">
<div class="col-lg-12">
<div class="panel panel-default" >
<div class="panel-heading">Select Goal/Allowable services for Data Collection</div>
<div class="panel-body">
<div class="pull-right">
<button type="button" class="btn btn-default btn-md" ng-click="">Absences</button>
<button type="button" class="btn btn-default btn-md" ng-click="hospitialization()">Hospitialization</button>
</div>
<br />
<div style="overflow-x:scroll;width:100%;">
<table class="table table-condensed table-responsive" style="border-collapse: collapse;">
<thead>
<tr>
--table headers
</tr>
</thead>
<tbody ng-repeat="service in serviceDetails">
<tr>
<td>
<button data-toggle="collapse" data-target="#tr_{{service.ResHabOutId}}" class="accordion-toggle btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
-- some more tds
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="tr_{{service.ResHabOutId}}" ng-if="service.lstDataCollectionSummary.length">
<table class="table table-striped" style="outline: 1px solid black;">
<thead>
--some rows
</thead>
<tbody>
--some rows
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
If you notice I have ng-repeat on tbody ( for Simplicity) because I want to display data on per goal basis.
If needed I can paste in the links and js references for your review.
Any help ?

Multiple Modal same page

i've this page http://steam-to-rent.ch/mietdampfanlagen2.html with Bootstrap collapse and modal. The problem is that when you click on "Anfrage" (The yellow button) the modal appears and works correctly, but when you try to close it i can't interact with the page anymore. How can i solve it? this is the code:
<div class="col-lg-12 table1">
<div id="printableArea">
<img class="logo_print logo1" src="img/logo.png" alt="" height="90" width="130" />
<p class="stampa stampa_ipad">Gewerbe Bölli<br>Böllistrasse 18<br>CH - 5072 Oeschgen<br>Tel 062 866 16 88<br>Fax 062 866 16 99<br>info#z-ag.ch</p>
<button class="btn" data-parent="tableParent" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Mietdampfanlage 21 kg/h 10 bar</button>
<div id="table1" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th style="text-align: center;">Kriterium</th>
<th style="text-align: center;">Einheit</th>
<th style="text-align: center;">Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>21</td>
</tr>
<tr>
<td>Abmessungen (L x B x H)</td>
<td>mm</td>
<td>1020 x 600 x 1370</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>140</td>
</tr>
<tr class="">
<td>Medium</td>
<td>–</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>6,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 – 5,0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>5,0</td>
</tr>
<td>Fabr. Nr. </td>
<td>–</td>
<td>21.301.112 / 05-09</td>
</tr>
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 15 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>–</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>–</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>–</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>–</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Dampfanschluss</td>
<td>Zoll</td>
<td>3/4" / IG</td>
</tr>
</tbody>
<input class="printer" type="button" onclick="printDiv('printableArea')" value="Drucken" />
</table>
<button id="modal_1" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target=".bs-example-modal-sm" data-keyboard="true" data-backdrop="static" >Anfrage</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="row">
<div class="col-sm-12 form">
<div class="modal-header">
<h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>
<form class="form-modal" role="form" method="post" action="index.php">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You made small mistakes.
You gave both modal same class (bs-example-modal-sm) name and calling them by the button by same name. That is why you facing the problem
You rather use ID instead of class to call it. For example - id="modal-1" and "modal-2".
And change replace the name on button
<button id="modal_2" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target="#modal-1">Anfrage</button>
See the change is 'data-target'. I replaced the ID on class name you used.
Above is right and in addition to this also you can able to provide close sign in the header on click of that modal get closed.
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true"
id="close" align="right">x</button>
<h4 class="modal-title" id="myModalLabel">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>

Resources