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.
Related
Below is my main blade file that I want to load into modal.
#extends('layouts.app')
#section('title', trans('pages.jobs.show.header_title') ?: trans('pages.jobs.show.title'))
#section('navigation')
#endsection
#section('content')
<div class="container">
<div class="page-dashboard">
{{ all teh content loaded: such as SVG grapgh using JS }}
</div>
</div>
<nav class="container-fluid nav-bottom" data-js="nav-bottom">
<div class="nav-bottom__overlay"></div>
</nav>
#push('scripts')
<script src=""></script>
#endpush
#endsection
I have tried using bootstarp.js modal but the modal is not loading, it loads in the main page.
Is it possible to load an entire blade with its own CSS and js included?
Kindly provide me any example. Maybe, I have to use ajax:
$('#modellink').click(function(){
$.ajax({
type : 'GET',
url : $(this).data('path'),
success: function(result, url) {
$('.modal-body').html(result);
$('#myModal').modal('show');
$('.modal-container').load($(this).data('path'),function(result){
$('#myModal').modal({show:true});
});
}
});
});
If you have a file call modal.blade.php, which has all the HTML, CSS and JS for that modal, you can include it on any page with #include("modal"). For example:
modal.blade.php
<style>...</style>
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">...</script>
Then, in your main file:
main.blade.php
#extends("layout")
#section("content")
#include("modal")
<div>...</div>
Return the HTML string
// SomeController::getModal()
return view('layouts.someview', $data_array)->render();
Load it into the modal
$.ajax(
// blah,
// blah,
success: function(response) {
$('#modal').html(response)
}
)
In short - yes.
Im not sure how you're loading your modal - as you don't provide much information, but, if you can load an external page into your modal, then simply point to the laravel route that displays your blade view.
Alternatively, use an #include('modal.name.blade') and have that as part of the page which uses the modal with the correct html/css of course for your relevant modal script.
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');
};
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel"><?= 'Some kind of title' ?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm using bootstrap - how can I make this auto-open? Instead of having the href="#Register" initiation can I make it auto-load if the if statement is true? Thanks.
<?php
require 'header.php';
require 'center.php';
require 'footer.php';
if(!isset($_SESSION['pay_address'])) {
?>
<li><a data-toggle="modal" href="#Register">Register</a></li>
<!--- Register Modal -->
<div class="modal fade" id="Register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Deposit Funds</h4>
</div>
<div class="modal-body">
<p>Your unique deposit address for GigaDice is: <strong>1HXtoMuv6xU1rLGfn6C9z9H6REHEtAs1gW</strong></p>
<p> If you have cookies disabled or clear them regularly, be sure to save your account ID and password.
</p>
<p>Alternatively, pay with Coinbase. Coinbase allows for instant deposits!</p>
<a class="coinbase-button" data-code="08409eb5d732affc131087bd72c48724" data-button-style="custom_small" href="https://coinbase.com/checkouts/08409eb5d732affc131087bd72c48724">Pay With Bitcoin</a><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<p>Alternatively, pay with Inputs.io. Inputs.io allows for instant deposits!</p>
<script src='https://inputs.io/js/buttons.js'></script>
<a href='https://inputs.io/pay?to=Loker' class='inputsio' data-success='You may need to refresh the page.' data-to='Loker' >Fund Account</a>
<br /><br /><p>If your deposit does not go through, e-mail deposits#gigadice.com.</p>
<p>Remember to click your balance to see if it has updated!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!--- End Register Modal -->
<?php
}
?>
After modal code, you can add this:
<script type="text/javascript">
$(function(){
//instantiate your content as modal
$('#Register').modal({
//modal options here, like keyboard: false for e.g.
});
//show the modal when dom is ready
$('#Register').modal('show');
});
</script>
Will open modal as soon the DOM is ready. Put inside the php if so it only shows when modal html shows.
More info at: http://getbootstrap.com/javascript/#modals
If you add data-show=true to the markup, it should fire it straight up.
I have problem with bootstrap modal , i cant define a id on that modal to show some informations.
test
Other code
<div id="likes" class="modal hide fade" 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">x</button>
<h3 id="myModalLabel">People who like this</h3>
</div>
<div class="modal-body">
<?php
$quelike = mysql_fetch_array(mysql_query("SELECT * FROM likes WHERE statusid='$statusid'"));
echo " <div class=\"modal-content\"> ".$quelike['firstname']." </a><br /> </div> <div class=\"spacelikes\"></div>";
?>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
I just need to set informations who liked post for for every post.
Sorry for my bad english.
First off there may be an issue in your anchor:
test
Should be:
<a data-target="#likes" data-toggle="modal">test</a>
If you intend it to launch your modal.
As to actually passing in the statusId this depends. If statusId is the same over the course of a page then what you have should work (although as others have mentioned there is SQL injection vulnerabilities in your code and the mysql_ functions should no longer be used).
If status id can change during the course of the page (i.e. it can be set by javascript) then you probably should place the logic to grab the details in a new page and use this page in the modal:
test
Which will load that page in the modal and show the info you require.