I working on laravel project and I have many modals that I will using in my project so I decided to put modals code in another folder .
my view code is
<button type="button" class="btn btn-success" data-toggle="modal" data-
target="#AddUserMoodal"><i class="fa fa-edit" aria-hidden="true"></i>
when I pressing on this button I want to open AddModal which is in modals folder
this is code of /modals/addmodal.blade.php
<div id="addModal" 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"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title_add" autofocus>
<small>Min: 2, Max: 32, only text</small>
<p class="errorTitle text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="content">Content:</label>
<div class="col-sm-10">
<textarea class="form-control" id="content_add" cols="40" rows="5"></textarea>
<small>Min: 2, Max: 128, only text</small>
<p class="errorContent text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-success add" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-check'></span> Add
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
but I don't know how to do that .what is the route will be for it
suppose you are in home page : home.blade.php , use include
<body>
#include('models/addmodal')
</body>
If your modal is dynamic , and you want to pass data to modal :
<body>
#include('models/addmodal',['title'=>$title,'data'=>$data])
</body>
and in your addmodal
<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
{{$title}}
</div>
</div>
</div>
</div>
Take a look at the #include directive.
Side note:
Just for reference, back in the old of Laravel you could solve it like this:
// routes.php (which is web.php now)
Route::get('view-component/{name}', function ($name) {
return view($name);
});
// In your view
{{ route('view-component/user-form') }}
You just need to include your blade file with
#include('path.to.your.blade')
You can have your HTML structure in parts and just include them as above.
Check Laravel documentation for blade: https://laravel.com/docs/5.6/blade#including-sub-views
Related
I want to make my modal apper, but I can not to do it.
This is my code:
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="text-center my-5">
<img src="img/logo-branca.png" alt="logo" width="100">
</div>
<div class="card shadow-lg">
<div class="card-body p-5">
<h1 class="fs-4 card-title fw-bold mb-4">CEP</h1>
<form method="POST" action = "autenticar.php">
<div class="mb-3">
<input id="cep" type="number" class="form-control" name="cep" value="" required="required">
</div>
<button type="submit" class="btn btn-primary ms-auto">
Pesquisar
</button>
</div>
</form>
</div>
<div class="card-footer py-3 border-0">
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
BUTTON TO OPEN THE MODAL
</button>
</div>
</div>
</div>
<div class="text-center mt-5 text-muted">
Copyright © 2021 — Rodrigo Franco
</div>
</div>
</div>
</div>
And this my modal:
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
If you need to see my project compleatly, just go to this link or if you want to make download the project, just go here
You are not loading Bootstrap's javascript files, simply add:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
To the head of your document and the modal works.
Resources: https://getbootstrap.com/docs/5.0/components/modal/
I have a problem: I used a foreach to list a database collection with a button to open a modal in each one. The button works correctly, but the ID that passes into the modal does not. If the modal code is inside the foreach, in all options the first id always appears, if it is outside the foreach the last ID always appears.
<div class="row">
#if ($trainingphases == null)
<p>null</p>
#else
<div class="col-md-6">
<div class="card mt-1">
<div class="card-body">
<!-- right control icon -->
#foreach ($trainingphases as $trainingphase)
<div class="accordion" id="accordionRightIcon">
<div class="card ">
<div class="card-header header-elements-inline">
<h6 class="card-title ul-collapse__icon--size ul-collapse__right-icon mb-0">
<a data-toggle="collapse" class="text-default collapsed" href="#accordion-item-icon-right-{!!$trainingphase->id_trainingphases!!}"
aria-expanded="false">{!! $trainingphase->title !!}</a>
</h6>
</div>
<div id="accordion-item-icon-right-{!!$trainingphase->id_trainingphases!!}" class="collapse" data-parent="#accordionRightIcon" style="">
<div class="card-body">
<textarea class="ckeditor form-control" placeholder="teste" name="description">{{ $trainingphase->description }}</textarea>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">editar {!! $trainingphase->title !!}</button>
</div>
</div>
</div>
#endforeach
<!-- /right control icon -->
</div>
</div>
</div>
#endif
</div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<form method="POST" action="{{ route('create.trainingphase', array('id_trainings'=>$training->id_trainings)) }}">
#csrf
<h5 class="modal-title" id="exampleModalCenterTitle"><input type="text" class="form-control form-control-rounded" id="title" placeholder="{!! $trainingphase->title !!}" name="title"></h5>
</div>
<div class="modal-body">
<label for="descriptiom">Descrição</label>
<textarea class="ckeditor form-control" placeholder="teste" name="description">{{ $trainingphase->description }}</textarea>
</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>
</form>
</div>
</div>
</div>
Explaination
This is the expected behaviour of a loop within PHP.
So your code will evaluate from top to bottom and within your #foreach loop you are essentially re-assigning the value of $trainingphase within the scope of the script.
Once the loop is finished, the value of $trainingphase is not unset so it will be whatever the last value was in the object you had just looped through.
Solution
Keep the modal code outside of the loop and try using data properties on the buttons you are using to open the modal to pass values into the modal itself.
Documentaion on this can be found here:
https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
I have this template
<template>
<div class="main">
<div class="container-fluid" style="padding-top: 2.5%">
<h4 class="page-title"><i class="lnr lnr-funnel"> </i> Infusionsoft Accounts
<button #click="addInfusionsoft" class="btn btn-xs btn-success" ><i class="lnr lnr-plus-circle"> </i> New </button>
</h4>
<div class="row">
<div class="col-md-12">
<table class="table table-responsive table-bordered table-striped">
<tr>
<th>ID</th>
<th>App Name</th>
<th>Auth Key</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
<th width="300px">Action</th>
</tr>
</table>
</div>
</div>
<div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form method="POST" action="" id="addInfsAccount"/>
<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">Infusionsoft Account</h4>
</div>
<div class="modal-body">
<p class="small">Fill up the form to add a new Infusionsoft Account.</p>
<br/>
<div class="form-group row">
<div class="col-md-8 col-md-offset-2">
<input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
</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">Add Account</button>
</div>
</div>
</form>
</div>
</div>
<app-legend/>
</div>
</div>
</template>
<script>
import Legend from "./Legend";
import NavBar from "../layouts/NavBar";
import SideBar from "../layouts/SideBar";
export default {
data() {
return {
infsModal: false,
}
},
created() {
},
components: {
'app-legend': Legend,
'nav-bar': NavBar,
'side-bar': SideBar,
},
methods: {
addInfusionsoft() {
$('#modalAddAccount').modal('show');
}
},
}
</script>
I'm using this template for the project https://www.themeineed.com/downloads/klorofil-free-bootstrap-admin-template/, I kept everything as default and didn't have any major modifications with the bootstrap classes. If I use jquery function to call the modal it will show correctly, however moving the modal to another template and calling is by using v-model and v-if, nothing really happens. Please see sample below
parent template
<template>
<div class="main">
<div class="container-fluid" style="padding-top: 2.5%">
<h4 class="page-title"><i class="lnr lnr-funnel"> </i> Infusionsoft Accounts
<button #click="infsModal = true" class="btn btn-xs btn-success" ><i class="lnr lnr-plus-circle"> </i> New </button>
</h4>
<div class="row">
<div class="col-md-12">
<table class="table table-responsive table-bordered table-striped">
<tr>
<th>ID</th>
<th>App Name</th>
<th>Auth Key</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
<th width="300px">Action</th>
</tr>
</table>
</div>
</div>
<div v-if="infsModal">
<div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form method="POST" action="" id="addInfsAccount"/>
<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">Infusionsoft Account</h4>
</div>
<div class="modal-body">
<p class="small">Fill up the form to add a new Infusionsoft Account.</p>
<br/>
<div class="form-group row">
<div class="col-md-8 col-md-offset-2">
<input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
<span v-if="false" span class="invalid-feedback">
<strong>Error</strong>
</span>
</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">Add Account</button>
</div>
</div>
</form>
</div>
</div>
</div>
<app-legend/>
</div>
</div>
</template>
<script>
import Legend from "./Legend";
import NavBar from "../layouts/NavBar";
import SideBar from "../layouts/SideBar";
import InfusionsoftAdd from "../infusionsoft/InfusionsoftAdd";
export default {
data() {
return {
infsModal: false,
}
},
created() {
},
components: {
'app-legend': Legend,
'nav-bar': NavBar,
'side-bar': SideBar,
'infs-modal': InfusionsoftAdd,
},
methods: {
addInfusionsoft() {
//this.$router.push('/infusionsoft')
}
},
}
</script>
this is the modal:
<template>
<div v-if="dialog">
<transition name="modal">
<div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form method="POST" action="" id="addInfsAccount"/>
<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">Infusionsoft Account</h4>
</div>
<div class="modal-body">
<p class="small">Fill up the form to add a new Infusionsoft Account.</p>
<br/>
<div class="form-group row">
<div class="col-md-8 col-md-offset-2">
<input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
<span v-if="false" span class="invalid-feedback">
<strong>Error</strong>
</span>
</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">Add Account</button>
</div>
</div>
</form>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
dialog: true
}
},
methods: {
back() {
//this.$router.back();
}
}
}
</script>
Is there anything I'm doing wrong?
When you set infsModal to true, all that's happening is that you're including the modal code but you're still not displaying the modal. You can still use jQuery here if you'd like, no reason not to. You can remove the infsModal variable since it's not needed (the modal won't display even if that's set to true... you still need to tell Bootstrap to actually show the modal). If you want to get away from jQuery, a solid option is Bootstrap-Vue https://bootstrap-vue.org/docs/components/modal ... let me know if that helps!
I'm using modal from bootstrap. The modal opens but it doesn't close either with the cross or close button.
This is what I have on my index.php file:
<div id="editar" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
</div>
And this is the modal which is in a separated .php file:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal" id="cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
I have to keep them in two files.
If you noticed my comment, I have told you its headache to use two different pages. Also it is not recommended way.
I have created a button for you and on the button click the modal shows up with cancel button that goes away when you click it. It is the way exactly you wanted afterwards.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click Me
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.
I think it is better to make use of JQuery so that you can have more control over what happens (e.g: clear fields, etc) on the modal on close.
$(document).on('click','#button_id',function(e){
e.preventDefault();
//you can clear fields first if you need to
$('#accion').val('');
$('#modal_id').hide(); //close modal
});
Please remember to include the file into the index.php. Keeping modal in separate file will help you reuse the same somewhere in your code, that is if you keep your modal code dynamic enough.
In my header provide a link for adding new client. When click the add client link display a popup window that contain a textbox and a submit button.When i click the link display popup window fully fade in(shaded) and not display the label
Whats wrong here?
header
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle" href="#addClientPop" <?php if($home_index== 1) { ?> class="active" <?php } ?>></span>
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
This is your solution i have worked well
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addClientPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal fade" tabindex="-1" 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>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
In your code what i have noticed that you have closed </span> tag in <a> and if($home_index==1) then class attribute is going to be add two times.
It should be like:
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle <?php if($home_index== 1) { echo 'active';}?>" href="#addClientPop">Add Client <span class="fa fa-arrow-down"></span> </a>
<li>
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addPop" class="modal fade" tabindex="-1" 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>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="market_price" name="market_price" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_price();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
</li>