I have two modal in one page. One is for edit and the other is for create. In both modal contain select2 option. And the option I get from my database. I want to use the data for both of modal. But I get error in modal create and no error for modal edit. In modal create, it can't display the data in select option. Can anyone help me?
I try this
public function detail_produk(){
$data['item']=$this->admin_model->get_all_detail_produk();
$data['ukuran'] = $this->admin_model->get_ukuran();
$data['sidebar'] = $this->load->view('sidebar','',TRUE);
$data['header'] = $this->load->view('header','',TRUE);
$this->load->view('detail_produk', $data);
}
The View
<div class="modal fade" role="dialog" id="detail_user">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Ukuran</label>
<div class="col-sm-10">
<select class="form-control select2" style="width: 100%;" id="ukuran">
<option selected="true" disabled="disabled">Pilih Ukuran</option>
<?php foreach ($ukuran as $ukuran) { ?>
<option value="<?php echo $ukuran['id'];?>"><?php echo $ukuran['size'];?></option>
<?php } ?>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="button-simpan" class="btn btn-primary mr-auto" >Simpan</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="tambah">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="form1">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Ukuran</label>
<div class="col-sm-10">
<select class="form-control select2" style="width: 100%;" id="ukuran_id">
<option selected="true" disabled="disabled">Pilih Ukuran</option>
<?php foreach ($ukuran as $ukuran) { ?>
<option value="<?php echo $ukuran['id'];?>"><?php echo $ukuran['size'];?></option>
<?php } ?>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="button-tambah" class="btn btn-primary mr-auto" >Tambah</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
</div>
</div>
Thank You :)
foreach ($ukuran as $ukuran)
You can not use same variable. Do something like follows
foreach ($ukuran as $value){
//now you can
echo $value['id'];
}
Related
I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach
I have this bootstrap modal view:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form method = "POST" action = "<?php echo base_url('Monitor/myfct') ?>">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add missed Tara or Harvest Product</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="font-noraml">
Select event type
</label>
<div class="input-group">
<select data-placeholder="Select" class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="Tara">
Tara Machine
</option>
<option value="Harvest">
Harvest Product Machine
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="font-noraml">
Product list
</label>
<div class="input-group">
<select id ="harvestAjaxData" data-placeholder="Select" class="form-control chosen-select" style="width:350px;" tabindex="2">
</select>
</div>
</div>
<div class="form-group">
<label class="font-noraml">
Machine list
</label>
<div class="input-group">
<select id ="machineAjaxData" data-placeholder="Select" class="form-control chosen-select" style="width:350px;" tabindex="2">
</select>
</div>
<div class="form-group">
<label for="inputimpurities">Impurities</label>
<input type="text" class="form-control" id="inputimpurities" placeholder="Impurities" style="width:350px;">
</div>
<div class="form-group">
<label for="inputhumidity">Humidity</label>
<input type="text" class="form-control" id="inputhumidity" placeholder="Humidity" style="width:350px;">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Except first one, fields are completed on ajax call with dynamic data (coming from mysql tables) and 2 user input fields, and the controller function where I send that form is this one Monitor/myfct:
public function myfct() {
$data= $this->input->post();
print_r($data);
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>';
}
I use it to test my form submit, I get the javascript alert(so the call was successful), but the print $data comes with a empty Array, also tried to print $_POST, same output. What is wrong in my modal view? Should I put the name="" for the options?
ps. I should add how the options from ajax look like:
for(var i = 0; i< data.length;i++){
$('#harvestAjaxData').append('<option value="'+data[i]['name']+'">'+data[i]['name']+'</option>');
}
Try giving name attributes to selects
This is Bootstrap popup (fade) form, and i have list of all members and the button next to them, and when you click, you can edit the profile of specified user (id). Everything works fine except <div class="modal fade" id="myModal6" role="dialog"> if i remove that, then i can edit each user, but with that, it only update first user.
$query = $handler->query('SELECT * FROM users');
<?php while($r = $query->fetch()) { ?>
<div class="modal fade" id="myModal6" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Izmeni</h4>
</div>
<div class="modal-body">
<p>
<form action="admin.php?update_id=<?php echo $r['id']; ?>" method="post">
<div class="field">
<center><input type="text" name="updatename" class="form-control" required="" placeholder="<?php echo $r['id']; ?>"></center><br>
<center><input type="text" name="updatesurname" class="form-control" required="" placeholder="Prezime"></center><br>
<center><button name="submit" type="submit" class="btn btn-block btn-success"><span class="glyphicon glyphicon-ok"></span> Izmeni</button></center>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
<?php } ?>
So, if i remove <div class="modal fade" id="myModal6" role="dialog"> it will work, but then my form will be screwd like this.
ID across the page needs to be unique if it needs to be executed correctly. Or esle it will be clubbed and it will produce unforced results.
List page:
<a type="button" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>" class="btn btn-xs btn-info" href="#"><i class="glyphicon glyphicon-edit"></i></a>
This will create Seperate ID for all the Popups and you can use it.
Modified Code:
$query = $handler->query('SELECT * FROM users');
<?php while($r = $query->fetch()) { ?>
<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Izmeni</h4>
</div>
<div class="modal-body">
<p>
<form action="admin.php?update_id=<?php echo $r['id']; ?>" method="post">
<div class="field">
<center><input type="text" name="updatename" class="form-control" required="" placeholder="<?php echo $r['id']; ?>"></center><br>
<center><input type="text" name="updatesurname" class="form-control" required="" placeholder="Prezime"></center><br>
<center><button name="submit" type="submit" class="btn btn-block btn-success"><span class="glyphicon glyphicon-ok"></span> Izmeni</button></center>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
<?php } ?>
Instead of <div class="modal fade" id="myModal6" role="dialog"> use
<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
Id of the element should be unique across the whole page.
I have this form that lets you choose or add an option to a dropdown field, the problem is when you click the add option, it calls down the modal but it also submits the whole form, but i put a required tag on an input field so it doesn't really pass the form unless completed
Here's the form:
<div class="col-lg-12">
<form action="<?php echo base_url(); ?>products/purchase" role="form" accept-charset="utf-8" method="post">
<div class="form-group">
<div class="col-lg-12">
<label class="control-label">Name</label>
<input type="text" name="name" class="form-control inline" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<label class="control-label">Class</label>
<div class="input-group">
<select name="class_ID" class="form-control" required>
<option value="">Select Class</option>
<?php if(!empty($cls)){
if (is_array($cls)){
foreach ($cls as $row) {?>
<option value="<?php echo $row['class_id']?>"><?php echo $row['class_Name']; ?></option>
<?php }
}
}
else{ ?>
<option value=""></option>
<?php }?>
</select>
<span class="input-group-btn">
<button class="btn btn-theme" data-toggle="modal" data-target="#addClass"><i class="fa fa-plus"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 pull-right">
<input type="submit" class="btn btn-success pull-right" value="Order" style="margin-left:5px;">
</form>
Back
</div>
</div>
</div>
And the Modal:
<div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add New Product Classification</h4>
</div>
<div class="modal-body">
<form action="<?php echo base_url(); ?>products/add_class" method="post" accept-charset="utf-8" role="form">
<div class="form-group">
<div class="col-lg-6">
<label for="class_Name">Classification Name</label>
<input type="text" name="class_Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label for="is_active">Enabled</label>
<select name="is_active" class="form-control">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-success" value="ADD">
</form>
</div>
</div>
</div>
</div>
</div>
Possibly due to using class btn-success twice, You hit it when opening the modal and its triggered at the bottom of the model footer
balance your html tags
i.e. for every opened tag, there must exist a closed tag and in the same order too.
in your modal, youre opening your form tag inside a div that is closed before the form tag is closed. some browsers may automatically close this tag, and therefore the click on your submit button will propagate to the main form.
change to
<div>
<form>
</form>
</div>
open your form before .modal-dialog
change
<button> to <a> or you can tell <button type="button"> that it's button and should only do what button supposed to do which is not to submit the form
w3schools.com/tags/att_button_type.asp
– Shehary
I am using Twitter Bootstrap for both tabs and modals. I have two tabs that use identical code. In the first tab the modals work perfectly, but in the second tab the screen will darken but the modal does not appear.
here is my code for calling the modal (same code used in both tabs) in list.php:
<a type="button" href="edit.php?id='.$id.'" data-target="#edit_modal" data-toggle="modal">Edit</a>
here is my modal in list.php
<div class="modal hide fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Edit Testimonials</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
and here is edit.php where the true body of the modal is
<div id="edit_modal">
<div class="modal-body">
<?php echo ($name_error != "") ? $name_error : ""; ?>
<form class="form-horizontal" action="edit.php?id=<?php echo $id; ?>" method="post">
<div class="control-group">
<label class="control-label">Testimonial</label>
<div class="controls">
<textarea class="input-xlarge" name="body" cols=100 rows=5><?php echo $testimonial['body']?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Author</label>
<div class="controls">
<textarea class="input-xlarge" name="author" cols=100 rows=5><?php echo $testimonial['author']?></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Update Testimonial" name="submit-form" />
Close
</div>
</form>
</div>