I'm customizing OpenCart 3.
By clicking a button in front-page footer, a modal panel opens which includes an iframe, like this:
<footer>
<div class="container">
<div class="content">
<i class="fa fa-plus-circle" aria-hidden="true" data-toggle="modal" data-target="#myModal"></i>
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
<iframe width="100%" height="{{ img_h }}" src="{{ addnewpro }}"></iframe>
</div>
</div>
</div>
</div>
</div>
iframe contains a php page for entering a new product which locates in admin panel.
So far everything is OK! The problem is I can't find a way to close the opened modal (#myModal) after entering the new product and saving it. I tried many different approaches including session, etc.
I Created Session after adding product in php page:
$this->session->data['newprosaved'] = 'saved';
I checked session in footer's php page:
if (isset($this->session->data['newprosaved'])) {
$data['saved'] = $this->session->data['newprosaved'];
unset($this->session->data['newprosaved']);
}
Then tried to access it in footer.twig:
<script type="text/javascript"><!--
$(document).ready(function() {
if ('{{ saved }}' == 'saved' && $('#myModal').hasClass('in')) {
$('#myModal').modal('hide');
$('#myModal').remove();
}
});
</script>
But it doesn't work!
Is there any other method to do it?
Unfortunately the answer was easy, although it wasted some few hours of my time.
I created a session after saving the item:
$this->session->data['newprosaved'] = 'saved';
Then revoked it on php page load (inside iframe):
if (isset($this->session->data['newprosaved'])) {
$data['newprosaved'] = $this->session->data['newprosaved'];
unset($this->session->data['newprosaved']);
}
I added a javascript code to iframe:
if ('{{ newprosaved }}' == 'saved') {
window.parent.closeModal();
}
Then javascript closeModal funtion to parent page:
window.closeModal = function(){
$('#myModal').modal('hide');
};
Related
I've a problem with my code. I want to pass a PHP variable to bootstrap modal.
Here's my code :
My link to open modal :
<td><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modal-user" href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?></a></td>
My modal code :
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<?php
include('userDetails.php');
?>
</div>
</div>
And the userDetails.php code :
<?php
require 'connect.php';
if (isset($_GET['id_user']) && !empty($_GET['id_user'])) {
$idUser = $_GET['id_user'];
}
$sql = "SELECT * FROM users WHERE id_user=" .$bdd->quote($idUser);
$query = $bdd->query($sql);
$userDetails = $query->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Infos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
foreach($userDetails as $details) {
?>
<p><?= $details['name'] ?></p>
<p><?= $details['firstname'] ?></p>
<?php
}
?>
</div>
</div>
Also, I've this jQuery code :
<script>
$( document ).ready(function() {
$('#modal-user').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
</script>
I've looking other posts and normaly, everything must be ok but I've an error and I still don't know why...
Notice: Undefined variable: idUser in /Applications/MAMP/htdocs/directory/userDetails.php on line 10
Can you help me please ?
Bootstrap modal href is not calling your page when you click. Your page is already loaded when you include userDetails.php. So you can define the get before the include or pass the user id through GET variable.
So:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<?php
$_GET['id_user'] = $rel['id_user'];
include('userDetails.php');
?>
</div>
</div>
In a LOOP
If you have a loop and want to do it dynamically through the jQuery you can do the following:
Remove the bootstrap calls from your link, and add a trigger class modal-btn and make it like:
<a
class="btn btn-primary modal-btn btn-xs"
href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?>
</a>
Update your modal structure and remove the include():
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
The jQuery should get the href property of the link and call the bootstrap modal function load and also force the modal to show
$(".modal-btn").on('click',function(e){ //trigger when link clicked
e.preventDefault();
$('#modal-user').modal('show'); //force modal to show
$('.modal-content').load( $(this).attr('href')); //load content from link's href
});
So your page userDetails.php will be loaded inside the modal, and you will need to remove the <div class="modal-content">...</div> from it to avoid duplication...
I have a Modal Window. It is working good with javascript. I tried something myself but I can't show any information of Customer in Modal Window. When clicking on the info button, I want to show the Customer's information. How can I show any customer information in Modal Window?
Controller:
public function index()
{
$viewData['countries'] = $this->db->get("country")->row();
$viewData['customers'] = $this->customer_model->get_all();
$this->lang->load('content', $this->session->userdata('people_lang'));
$this->load->view('customers', $viewData);
}
public function getInfo(){
$cusId = $this->input->post('cusId');
$viewData['customers'] = $this->db->where("cusId", $cusId)->get("customer")->row();
$this->load->view('customers/getInfo', $viewData);
}
This Ajax Code:
<script type="text/javascript">
function showCustomers(str){
$.ajax({
type: "POST",
data: { cusId: str },
url: "<?=base_url('customers/getInfo');?>",
success: function(data) {
$('#divInfo').html(data);
}
});
}
</script>
This Modal:
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Tittle</h4>
</div>
<div class="modal-body">
<div id="divInfo"></div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> Confirm</button>
</div>
</div>
</div>
</div>
<!-- modal -->
This View:
<a data-toggle="modal" href="#myModal3"><button class="btn btn-primary btn-xs" onclick="showCustomers(this.id);" id="<?php echo $customers->cusId; ?>"><i class="fa fa-eye"></i></button>
But This is not working. Where is I do mistake?
I think you can do this by adding a couple of lines.
Note* Code is not tested, i can practically painting the idea to solve this.
In the index function of your controller
public function index(){
$viewData['countries'] = $this->db->get("country")->row();
$viewData['customers'] = $this->customer_model->get_all();
//**new line
// Assuming you already have method in your Model to get customer by id
// Check if there's a GET request of 'customerID' then assign to the $viewDataByID array the data from the model, else nothing.
$viewDataByID['customersById'] = (isset($_GET['cusomterID'])) ? $this->customer_model->get_by_id($id) : '';
//Then you'll have to update the variable sent to the view by storing both in one array
$allData['viewData']= $viewData;
$allData['viewDataByID'] = $viewDataByID;
$this->lang->load('content', $this->session->userdata('people_lang'));
$this->load->view('customers', $allData);// $allData get sent to the view
}
In your modal you can sent the request
Please update the variables in the view. You can do a print_r($allData) or var_dump($allData) to clearly see the data tree and how you can make use of them.
Alternatively if you do not want to use your index for this, you can create another function within your controller to handle the customer by id, json_encode the result and then use jQuery to get the data.
Hope this helps.
Here's one way you could do it:
<!--modify button to include an onclick element, pass a value to it-->
<button class="btn btn-primary btn-xs" id="info_modal" onclick="show_modal('<?=$customer_name;?>')"><i class="fa fa-eye"></i></button>
You could modify your modal to have some id's in anticipation of your data:
<div class="modal fade" id="info_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
....
<div class="modal-body">
View File List According to Customer ID.
<div id="customer_name"></div>
</div>
Then in your script (if using jquery):
//add passed string to the modal and then display it
function show_modal(customer_name){
$("#customer_name").html(customer_name);
$("#info_modal").modal('show');
}
I answered myself this question.
<td data-title="Edit" align="center"><button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button> <a data-toggle="modal" href="#<?php echo $customer->cusId; ?>"><button class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></button></a></td>
I edit a href like that href="#<?php echo $customer->cusId; ?>
Afterthat I just write this code on modal top:
<?php foreach ($customers as $get) { ?>
<div class="modal fade" id="<?php echo $get->cusId; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<?php } ?>
I edit id like that id="#<?php echo $get->cusId; ?>
It works better now!
I wanted to add a bootstrap modal on my page, and I have included jQuery script in the head of the document. Here is the modal
<!-- Modal -->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Delete {{$title}}?
</div>
<div class="modal-body">
Are you sure you want to delete {{$body}}?
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-ok">Yes</a>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
I get an error on page load saying:
[Vue warn]: Error compiling template:
...
...
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)
And I don't know what is wrong since I used the same modal in my other project also and it worked as it should.
Just get rid of all the <script> tags in the template, put them outside of the template.
In this case you are using body as the template and you are putting scripts inside your template (body), and make sure you have a closing tag on your root element.
<table id="result">
<a href='#' class='pop'><span class='fa fa-eye'><img src='image link here' style='display:none'></a>
</table>
The above href is used to open the image in modal.
Modal For Image Preview:
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position:absolute">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
The below jquery (part1+part2) works in parent page but whenever the table content is loaded using ajax the preview is not working.
jQuery for modal show:
part1 : $(function() {
$('.pop').on('click', function(e) {
e.preventDefault();
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
part1 works in parent page.
Part2 :$("#results").on("click",".pop", function(){
//alert("hello");
e.preventDefault();
$('.imagepreview1').attr('src', $(this).find('img').attr('src'));
$('#imagemodal1').modal('show');
});
part2 is also showing alert on click but image preview is not working.
Any help would be appreciated.
Could part of the problem be the class and id references in part 2? The class imagepreview1 and ID imagemodal1 don't exist in your examples. Should they be imagepreview and imagemodal?
What is going wrong? I gather that Part 2 isn't showing the image preview, but do you also have a problem with Part 1? If ajax is breaking your part 1, can you give a sample of your ajax loading?
In Laravel I have a table that contains an edit link on every row like the following;
<a data-toggle="modal" href="{{ route('myrow.edit', ['id' => $value['id']]) }}" data-target="#myModal">
<i class="fa fa-btn fa-pencil"></i>
</a>
The modal screen was defined as follows;
<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>
</div>
</div>
When the previously mentioned button is clicked the edit.blade.php included looks like this;
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal title</h4>
</div>
{!! Form::model($myrow, array('route' => array('mycontroller.update', $myrow->id), 'method' => 'PUT')) !!}
<div class="modal-body">
<!-- All kinds of fields -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-success" type="submit">Save</button>
</div>
{!! Form::close() !!}
The mycontroller.update that was invoked looks like this;
public function update(Request $request, $id) {
$mymodel = MyModel::find($id);
$mymodel->user = $request->user()->id;
$mymodel->field = $request->field;
if (!$mymodel->save()) {
$errors = $mymodel->getErrors();
return redirect()
->action('MyController#index')
->with('errors', $errors)
->withInput();
}
return redirect()
->action('MyController#index')
->with('message', $mymodel->field . ' was added');
}
When I fill in data in my modal screen and submit it all works very well. The problem starts when I either press Cancel, press the "x" that closes the modal or simply click outside of the modal. In those situations the modal will obviously close but when I click an edit link in whatever other row it will always open the modal screen for the previously unsaved row until I refresh the screen.
Apparently I need some processing after the modal window was closed in any way but how should I do that. Does someone have a good strategy for this?
Update: it also doesn't perform a second GET request. The first time I click the edit link it retrieves the correct data with
GET https://example.com/mylaravelapp/mymodel/1/edit
The second (and any subsequent) time no request is made at all.
You'll need to use JavaScript to clear the form fields and repopulate them depending on the row you clicked. The modal still exists in the Dom after being closed that's why you're seeing the previously entered values
The problem there is with Bootstrap Modal's referencing. You are creating one unique Modal. The button that toggles a Modal uses the data-target="#myModal" attribute to reference the html that will popup when you click the button. That part of html is identified by id="myModal".
So, if you want to create multiple Modals you will need something like this:
Change data-target attribute's value
<a data-toggle="modal" href="{{ route('myrow.edit', ['id' => $value['id']]) }}" data-target="#myModal_{{$value['id']}}">
<i class="fa fa-btn fa-pencil"></i>
</a>
Then edit the Modal's html definition
<div class="modal fade" id="myModal_{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
However, you should not create multiples Modals; you must just create only one Modal, and use Javascript to update the Modals content and form's action attribute.