I'm trying to display modal right after submitting a form.
Here's my code inside php tag (checks if user checked a box and if so, it is supposed to display the values of the row checked in a modal- but my modal isn't working..it only works if I make another button outside the button to display it.. ):
if(isset($_REQUEST["submit"])) {
if(isset( $_REQUEST["userSelection"])) {
$check= $_REQUEST["userSelection"];
}
if($check==0) {
echo "walay sulod";
// var_dump($check);
} else
$a = implode(",",$check);
$_SESSION["userSelection"] = $a;
// var_dump($_SESSION["userSelection"]);
?>
<script type="text/javascript">
$(document).ready(function(){
$('#exampleModalCenter').modal('show');
});
</script>
<?php
}
?>
Here's my table containing a checkbox in each row:
<form method="REQUEST" action="" id="formID" name="userCheck">
<div class="margin_table">
<table class="table table-bordered table-hover">
<thead>
<th>School name</th>
<th>Location</th>
<th>Population</th>
<th>Cost</th>
<th>TNotchers</th>
<th>Rating</th>
<th><input type="submit" name="submit" value="submit" class="btn btn-primary render" data-toggle="modal" data-target="#exampleModalCenter"></th>
<!-- <th><input type="submit" name="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"></input></th> -->
</thead>
<tbody>
<?php foreach ($school as $s) {
echo '<tr>';
echo '<td>'.$s['school_name'].'</td>';
echo '<td>'.$s['location'].'</td>';
echo '<td>'.$s['population'].'</td>';
echo '<td>'.$s['cost'].'</td>';
echo '<td>'.$s['topnotchers'].'</td>';
echo '<td>'.$s['rating'].'</td>';
echo '<td><input type="checkbox" name="userSelection[]" id="mymod" onclick="userSelection()" value="'.$s['school_id'].'"</td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
</form>
Here's my modal:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php var_dump($_SESSION["userSelection"]); ?>
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I hope you could help me out. Thank you.
If you just want to show the modal once a checkbox is checked use:
echo '<td><input type="checkbox" name="userSelection[]" id="mymod" onclick="$(\'#exampleModalCenter .modal-body\').html(\''. $s['school_id'] .'\');userSelection();" data-toggle="modal" data-target="#exampleModalCenter" value="'.$s['school_id'].'"</td>';
Or even fittier add $('#exampleModalCenter').modal('show'); in the function userSelection()
If yo want to submit the form at checkbox click add this $("[name=submit]").click() in your onclick() method.
This would show checked value from the backend side, which is safer.
You may also add arguments to a custom function added at onsubmit() to tell the server if the form is sumbitted or not yet.
Related
Guys I am stack for two days, I have two bootstrap models the first one is showing with outside button called submit, the other which the button is inside the table is not showing. Probably the problem could be the inclusion js library I am not sure and I don't have a lot of experience with that so i need your help below is my code! thanks in advance.
[![<div class="modal fade" id="editmodel" tabindex="-1" role="dialog" aria-labelledby="editmodell" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cdsViewformLabel">Informaçao do assunto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group col-lg-12">
<label for="exampleFormControlInput1">ID</label>
<input type="email" class="form-control" id="idedit" placeholder="name#example.com">
</div>
<!-- removed some code to show the textfields just to save space-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
below my table data and button
?>
<tbody class="ttdody">
<tr>
<td><?php echo $row\['ID'\];?></td>
<td><?php echo $row\['valor'\];?></td>
<td>
<button class="btn btn-success btn-xs-view"><i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-xs-edit"><i class="fa fa-pencil"></i></button>
<button class="btn btn-danger btn-xs-delete"><i class="fa fa-trash-o "></i></button>
</td>
</tr>
</tbody>
<?php
below is my js to display the modal
<script>
$(document).ready(function () {
$('.btn-xs-edit').on('click', function () {
$('#editmodel').modal('show');
});
});
</script>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/jquery-ui-1.9.2.custom.min.js"></script>
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script class="include" type="text/javascript" src="lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="lib/jquery.scrollTo.min.js"></script>
<script src="lib/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="lib/common-scripts.js"></script>][1]][1]
I got bug when I use JQuery data-id in jQuery Datatables. For the first 10 (Ten) record working well. But when I click navigation table to enter to the second page, the data-id value not shown. Please see my code below :
<i class="icon-plus2 pr-2"></i> Tambah Data
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
And this is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
on the first 10 recode its work well, but when I click button to go to the second page of datatable navigation the data-id dosen't work... I dont know where is the problem... sory about my English...
As per the comments above here is the answer...
The below only listens to click events that are rendered before the code is executed.
$('.bthapus').on('click', function() { ... });
Replacing that with the below listens to the click event on the entire document, so dynamically created elements (such as your table pagination) will be included.
$(document).on('click', '.btedit', function() {
Hi When I use boostrap modal box ; Than php code takes only the first item of my table..;
$sonuc['proje_ismi'] is working normal in button and change everyline as database:
But when I put it on bootstarp modal box, it only takes the first item. Why is that?
And how can I solve it with a simple way?
Thanks for advices.
<td>
<button type="button" id="view_files" name="view_files" data-name="'.$proje_ismi.'" data-toggle="modal" data-target="#myModal" class="view_files btn btn-default btn-sm"><font size="2" >
<?php echo $sonuc['proje_ismi'] ?></font></button>
<div class="modal fade" id="myModal" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proje Dosyaları</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<th>Dosya İsimleri </th>
</tr>
<tr>
<th>
<div class="modal-body" id="file_list">
<?php
$projeler = $sonuc['proje_ismi'] ;
echo $projeler;
$folder = array_filter(glob(''.$projeler.'/*.*'));
print_r($folder);
?>
</th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
For information:
I couldnt solve the problem with bootsrap but I solved problem with lightbox css...
I download lightbox2-2.11.1 css documant and did the following at the web site below:
https://lokeshdhakar.com/projects/lightbox2/#help
I have a simple HTML table that I generated from a PHP call to my database:
<?php
foreach($records as $record){
$staffName = $availability->getField('fullName') ;
$staffMobile = $availability->getField('cell') ;
}
I then display the table with a link on the name to a Bootstrap modal:
<tr>
<td><a href="#" data-toggle="modal" data-target="#myModal"><?php echo $staffName; ?></td>
<td><?php echo $staffMobile ;?>Mobile Number</td>
</tr>
I would like the modal that appears to have a button to be able to call and SMS the staff member in the list. My modal at the moment appears:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Contact Staff</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal">Call</button>
<button type="button" class="btn btn-default" data-dismiss="modal">SMS</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I would like the Call and SMS buttons to reference using this format:
tel:<?php echo $staffMobile ;?>
sms:<?php echo $staffMobile ;?>
but I can't work out a way to link each individual $staffMobile value to the modal which only has one instance.
Have been struggling for this for a few hours now and not making any progress - not even sure if this is possible
I am trying to submit a form via a simple modal with a yes or no button. However, when I click the button in the view the event_id is not updating and only passes the first event_id. I am assuming I need to somehow update the event_id that is passed to the modal; as it appears to already be loaded. How do I go about this? I was thinking maybe a onclick function that sets eventId but, I am very new to coding and don't know how to go about. Hopefully this makes sense.
Here is my controller:
function skatersuccess(){
if (!$this->ion_auth->is_admin())
{
$this->session->set_flashdata('message', '<div class="alert alert-info" role="alert">You must be an admin to view this page</div>');
redirect('/');
}
$event_id = $this->input->post('event_id');
$user_id = $this->input->post('user_id');
$user_data = array(
'id' => 'null',
'user_id' => $user_id,
'event_id' => $event_id,
'is_paid' => 1
);
$this->user_event_model->registerskater($user_data);
redirect('/dashboard/','refresh');
}
Here is my model:
public function registerskater($user_data) {
$this->load->database('hockey');
$this->db->insert('users_events', $user_data);
}
Here is the mainview button code(this loads the popup modal:
<?php if (($e->user_registered == 1)) : ?>
<?php $this->load->view('admin/partial/skater_cancel', $e) ?>
<?php elseif (($e->capacity == $e->registered)): ?>
<button type="button" class="btn btn-danger btn-block">FULL</button>
<?php else: ?>
<?php $this->load->view('admin/partial/skater', $e) ?>
<?php endif; ?>
and here is the popup modal view:
<form action="dashboard/skatersuccess" name="" id="login-form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<button type="button" class="btn btn-primary btn-block" data-title="add_skater" data-toggle="modal" data-target="#add_skater" >SIGN UP AS SKATER</button>
<!--Pop Up Dialog-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"> </span></button>
<h4 class="modal-title custom_align" id="Heading">Signup for Game?</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>Are you sure you want to sign up for game?</div>
</div>
<div class="modal-footer ">
<button type="button" id="btnYES" href="#" name="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<input id="event_id" type="hidden" class="form-control" name="event_id" value="<?php echo $id; ?>" placeholder="event_id">
<input id="user_id" type="hidden" class="form-control" name="user_id" value="<?php echo $this->session->userdata('user_id'); ?>" placeholder="user_id">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</form>
I got it with this,
<script>
$(document).on("click", ".add_skater", function (e) {
e.preventDefault();
var _self = $(this);
var myEventId = _self.data('id');
$("#EventId").val(myEventId);
$(_self.attr('href')).modal('show');
});
</script>