call bootstrap modal from a function
Question
I'm trying to get a modal working but i don't seem to get the right direction
This the function
function operateFormatter(value, row, index) {
return [
'<a class="info btn btn-warning btn-xs" title="Editar" id="bt" data-unique-id="',row.id,'" data-toggle="myModal" data-target="#myModal',row.id,'">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
''<a href="#myModal" class="danger btn btn-danger btn-xs" title="Remover" id="bt" data-unique-id="',row.id,'" data-toggle="myModal" data-target="#myModal',row.id,'">', '<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
And i want to cal my modal from that function
function removeItem(index, row){
var id_itens = JSON.stringify(row.id_itens);
$('#myModal').modal('show');
}
But nothing shows....any help?
UPDATE All contente of this page
<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
include_once 'dbconfig.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Itens Registados</title>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap/css/style_no_image.css" type="text/css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-editable.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.6.min.js"></script>
<style>
#bt {
margin-left: 20px;
}
th.alinhado{
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<div class="left">
<label><a href="http://www.esmaior.pt/agrupamento/">ESMAIOR- Gestão Biblioteca</a></label>
</div>
<div class="right">
<label><a href="logout.php?logout=true"><i class="glyphicon glyphicon-log-out"></i> Sair</a></label>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<?php include 'menu_admin.php'; ?>
</div>
</div>
</div>
<div class="container-fluid">
<h3>Visualização e Edição de Registos</h3>
<table id="table" class="table table-bordered table-striped"
data-toggle="table"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar"
data-url='pdoGetItens.php'>
<thead>
<tr>
<th data-field="id_itens" class="hidden">ID</th>
<th data-field="nome" data-editable="true" class="alinhado">Nome</th>
<th data-field="descricao" data-editable="true" class="alinhado">Descrição</th>
<th data-field="tipo" data-editable="true" class="alinhado" data-align="center">Tipo</th>
<th data-field="estado" data-editable="true" class="alinhado" data-align="center">Estado</th>
<th data-field="data" data-editable="true" class="alinhado" data-align="center">Data</th>
<th data-field="quantidade" data-editable="true" class="alinhado" data-align="center">Quantidade</th>
<th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" class="alinhado" data-align="center">Opções</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="myModal" 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>
<h3 class="modal-title" id="myModalLabel">Atenção!</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Sim</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
</div>
</div>
</div>
</div>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-pt-PT.js"></script>
<script>
function operateFormatter(value, row, index) {
return [
"<a class='info btn btn-warning btn-xs' title='Editar' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"'>",
"<i class='glyphicon glyphicon-edit'></i>",
"</a>",
"<a href='#myModal' class='danger btn btn-danger btn-xs' title='Remover' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal'"+row.id+"'>",
"<i class='glyphicon glyphicon-remove'></i>",
"</a>"
].join('');
}
function removeItem(row){
var id_itens = JSON.stringify(row.id_itens);
$('#myModal').modal('show');
}
</script>
</body>
</html>
UPDATE 2
<script>
function operateFormatter(value, row, index) {
return [
"<a class='info btn btn-warning btn-xs' title='Editar' id='bt'>",
"<i class='glyphicon glyphicon-edit'></i>",
"</a>",
'<a class="remove btn btn-danger btn-xs" href="#myModal" title="Remover">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join(' ');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
$('#myModal').modal('show').find('.modal-body #nome').val(JSON.stringify(row.nome));
$('#myModal').modal('show').find('.modal-body #id_itens').val(JSON.stringify(row.id_itens));
}
}
eo meu modal devia chamar a função
<form onsubmit="submitForm('#myForm'); return false;" id='myForm'>
Function
function submitForm(formId) {
var user_id = $('input[id="id_itens"]').val();
console.log(user_id);}
mas nada acontece
1 answers
solution1
0 ACCPTED 2015-11-03 12:14:53
Write your code more clearly so we can understand better.
For now I can tell you have several errors in the construction of return.
i think its work better
function operateFormatter(value, row, index) {
return [
"<a class='info btn btn-warning btn-xs' title='Editar' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"''>",
"<i class='glyphicon glyphicon-edit'></i>",
"</a>",
"<a href='#myModal' class='danger btn btn-danger btn-xs' title='Remover' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"'>",
"<i class='glyphicon glyphicon-remove'></i>",
"</a>"
].join('');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Call a bootstrap modal from js function
call a function from ui bootstrap modal controller
JavaScript: How to call Bootstrap Modal from inside function?
Call action from modal bootstrap
Call a PHP function on a Bootstrap Modal using AJAX
Javascript modal window call function - bootstrap UI
Call Jquery function when bootstrap modal is open
call bootstrap modal dialog through script function
Call JS function on click of a button in a Bootstrap modal
Call function defined in modal on ui-bootstrap modal dismiss
Related Tags