I'm coding a single crud application, and i need to use two controllers in one view, but i dont know how.
When the user press the "Add Colaborador" button, the application needs to search the "Função" registers, and show in a select(Html function). (One "Colaborador" have one "Funcao").
Here's my code:
http://pastebin.com/uUzE5K28
For use the , i need to change the controller to "funcoesController", then come back to "colaboradoresController".
Sorry for bad english!
Angular can nest controllers. So you can embed one controller in another controller. Within the nested controller, you can access either controller.
<!DOCTYPE html>
<html lang="pt-br" ng-app="registrosGerais">
<head>
<title>Sistema Pronatec</title>
<!-- Load Bootstrap CSS -->
<link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
<h2>Gerenciamento de Colaboradores</h2>
<div ng-controller="colaboradoresController">
<!-- Nest second controller -->
<div ng-controller="funcoesController">
<button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Novo Colaborador</button>
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Função</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="clb in tbcolaborador">
<td>{{clb.id}} </td>
<td>{{ clb.nome }}</td>
<td>{{ clb.funcao_id}}</td>
<td>
<button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', clb.id)">Editar</button>
<button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(clb.id)">Remover</button>
<button class="btn btn-info btn-xs btn-detail" ng-click="addConta(clb.id)">Adicionar Conta Banco</button>
</td>
</tr>
</tbody>
</table>
<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 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">{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="frmColaboradores" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputNome" class="col-sm-3 control-label">Nome</label>
<div class="col-sm-9">
<input type="text" class="form-control has-error" id="nome" name="nome" placeholder="Nome completo" value="{{nome}}" ng-model="colaborador.nome" ng-required="true">
<span class="help-inline" ng-show="frmColaboradores.nome.$invalid && frmColaboradores.nome.$touched">Nome é obrigatório</span>
</div>
</div>
<div class="form-group error">
<label for="inputFuncao" class="col-sm-3 control-label">Função</label>
<div class="col-sm-9">
<select>
<option ng-repeat = "clb in tbfuncao" value "{{ clb.id }}"> {{ clb.nome }} </option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" ng-click="saveColaborador(modalstate, id)" ng-disabled="frmColaboradores.$invalid">Salvar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('app/lib/angular/angular.js') ?>"></script>
<script src="<?= asset('js/jquery.min.js') ?>"></script>
<script src="<?= asset('js/bootstrap.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/colaboradores.js') ?>"></script>
</body>
You should not access two controllers from the same view. This kind of cross dependency will most likely drive you crazy when one change things in one controller and start noticing crashes in unexpected places.
Your Laravel controller can pass all needed data to your view, including the lookup data as an additional array variable. That's the simplest way.
Laravel has many different ways to pass additional data to your views. Besides direct variable references, you can create View Composers or inject service providers into your views with Service Injection (in Laravel 5.2). You would want to choose this kind of solutions if you need the same reference data in multiple places to keep the code DRY.
Related
This question already has answers here:
Bootstrap Element 100% Width
(14 answers)
Closed 1 year ago.
how to make my program can follow resolution my screen, or any idea to make my program make better.
I guess my bootstrap is problem because program display is not fit screen, I hope it can fit on my screen.
and here is my index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Import Excel Ke Database Dengan Laravel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<center>
<h2>Import Excel Ke Database Dengan Laravel</h2>
<h3><a target="_blank" href="https://www.malasngoding.com/">www.malasngoding.com</a></h3>
</center>
{{-- notifikasi form validasi --}}
#if ($errors->has('file'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('file') }}</strong>
</span>
#endif
{{-- notifikasi sukses --}}
#if ($sukses = Session::get('sukses'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $sukses }}</strong>
</div>
#endif
<button type="button" class="btn btn-primary mr-5" data-toggle="modal" data-target="#importExcel">
IMPORT EXCEL
</button>
<!-- Import Excel -->
<div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form method="post" action="/transaksi/import_excel" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Import Excel</h3>
</div>
<div class="modal-body">
{{ csrf_field() }}
<label>Pilih file excel</label>
<div class="form-group">
<input type="file" name="file" required="required">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Import</button>
</div>
</div>
</form>
</div>
</div>
I'm using laravel 8.6 and php.
There is my table code, I was tried add container-fluid but still didn't work
<table class='table table-bordered'>
<thead>
<tr>
<th>No</th>
<th>id_subdist</th>
<th>id_toko</th>
<th>id_dso</th>
<th>id_rso</th>
<th>id_channel</th>
<th>id_outlet</th>
<th>id_produk</th>
<th>qty_pcs</th>
<th>harga</th>
<th>nama_promo</th>
<th>free_goods</th>
<th>total_qty_include_free_goods</th>
<th>disc_total</th>
<th>jumlah</th>
<th>tgl_posting</th>
<th>tgl_faktur</th>
<th>created_date</th>
<th>modified_by</th>
<th>modified_date</th>
<th>status</th>
</tr>
</thead>
<tbody>
#php $i=1 #endphp
#foreach($transaksi as $s)
<tr>
<td>{{ $i++ }}</td>
<td>{{$s->id_subdist}}</td>
<td>{{$s->id_toko}}</td>
<td>{{$s->id_dso}}</td>
<td>{{$s->id_rso}}</td>
<td>{{$s->id_channel}}</td>
<td>{{$s->id_outlet}}</td>
<td>{{$s->id_produk}}</td>
<td>{{$s->qty_pcs}}</td>
<td>{{$s->harga}}</td>
<td>{{$s->nama_promo}}</td>
<td>{{$s->free_goods}}</td>
<td>{{$s->total_qty_include_free_goods}}</td>
<td>{{$s->disc_total}}</td>
<td>{{$s->jumlah}}</td>
<td>{{$s->tgl_posting}}</td>
<td>{{$s->tgl_faktur}}</td>
<td>{{$s->created_date}}</td>
<td>{{$s->modified_by}}</td>
<td>{{$s->modified_date}}</td>
<td>{{$s->status}}</td>
</tr>
#endforeach
</tbody>
</table>
Use container-fluid class instead of container class if you want full-screen layout.
Your Code:
<div class="container">
...
</div>
Change it to:
<div class="container-fluid">
...
</div>
The container class is a fixed width container, meaning its max-width changes at each breakpoint. And .container-fluid is a full width container, spanning full screen of the viewport. Read more at Bootstrap Docs
Dears,
I am trying to pass a column value in a row to a modal when I click on edit, but that is not working. I am not sure how to do that honestly.
When I click on edit, a modal should open. My goal is to display the current image name in a disabled field and let the admin enter the new name to rename it.
My admin template source => https://startbootstrap.com/theme/sb-admin-2
datatable code :
<tbody>
<?php
foreach ($imagesPath as $imageId=>$imagePath) {
echo "<tr>";
echo " <td> <img src=".$imagePath." border='0' height=200px width=200px /> </td>";
echo " <td name='imageName'>".substr($imagePath, 59)."</td>";
echo " <td>
<a href='#' class='btn btn-info btn-circle' data-toggle='modal' data-target='#editModal' data-val=".$imagesPath[$imageId].">
<i class='fas fa-edit'></i>
</a>
<a href='#' class='btn btn-danger btn-circle'>
<i class='fas fa-trash'></i>
</a>
</td>";
echo "</tr>";
}
?>
</tbody>
Modal Code:
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Image</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldImageName">Old Image Name</label>
<input id="oldImageName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newImageName">New Image Name</label>
<input id="newImageName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
js code:
<script>
$('#editModal').on('show.bs.modal', function(e) {
var oldImageValue = $(event.relatedTarget).data('val');
$(e.currentTarget).find('input[id="oldImageName"]').val(oldImageValue);
});
</script>
What I tried to implement is a solution mentioned in Passing data to a bootstrap modal . But it did not work. Can you please assist with the above?
In your HTML, you are using the following attribute:
data-val=".$imagesPath[$imageId]."
And then you appear to be trying to access it in your JavaScript using:
var oldImageValue = $(event.relatedTarget).data('val');
There are 3 problems with this:
(1) it's an attribute, not data
(2) its name is data-val not val
(3) your function refers to the event as e, not as event.
Therefore you need to use:
var oldImageValue = $(e.relatedTarget).attr('data-val');
After that, I suspect you will have some additional issues...
The above change will cause the value from .$imagesPath[$imageId]. to be populated in the modal - and I assume that is not what you want.
How you fix this depends on information outside of your question, but you could, for example, change your HTML to include additional attributes - for example, something like this:
data-image-id=".$imagesPath[$imageId]."
data-image-name=".$imagesPath[$imageName]."
... and whatever else you may need...
The above is just a suggestion - you may need to adapt it to your needs.
A demo using the above changes:
$(document).ready(function() {
var table = $('#example').DataTable();
$('#editModal').on('show.bs.modal', function(e) {
var oldPersonValue = $(e.relatedTarget).attr('data-name');
$(e.currentTarget).find('input[id="oldPersonName"]').val(oldPersonValue);
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-val="123"
data-name="Tiger Nixon">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>234</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="234"
data-name="Garrett Winters">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>345</td>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="345"
data-name="Ashton Cox">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
</tbody>
</table>
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Person</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldPersonName">Old Person Name</label>
<input id="oldPersonName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newPersonName">New Person Name</label>
<input id="newPersonName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After that, a further problem may be that you want to actually save your changes and re-display the saved data. If that is the case, then that probably needs a new question where you can show the relevant code/attempt.
Edited to include proper format for more readable and understandable code. Also fixed to where the proper placement for ideal performance with the Javascript files are added to the ending of the <html> tag opposed to the <head> tag
<!DOCTYPE html>
<html>
<head>
<title>ROWLANDS SHOP</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no">
</head>
<body>
<div class="modal fade details-1" id="details-modal" tabindex="-1"
role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" class="text-center"><?=
$product['title'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block"></div>
<img src="<?= $product['image'];?>" alt="<?
=$product['title'];?>" class="details img-responsive">
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?= $product['description'];?></p>
<hr>
<p>price: $<?= $product['price'];?></p>
<p>Brand:<?= $brand['brand']; ?></p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quaantity:</label>
<input type="text" class="form-control" id="quantity"
name="quantity">
</div>
</div>
<div class="form-group">
<label for="size">Size:</label>
<select name="size" id="size" class="form-control">
</select>
<option vaue=""></option>
<?php foreach($size_array as $string){
$string_array = explode(':', $string);
$size = $string_array[0];
$quantity = $string_array[1];
echo '<option
vaue="'.$size.'">'.$size.'('.$quantity' Avaliable)</option>';
} ?>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default"
onclick="close_modal();">Close</button>
<button class="btn btn-warning" type="submit"
class="glyphicon glyphicon-shopping-cart"><span>Add to Cart</span></button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</html>
Is other styles from Bootstrap Working? And could you please give more information such as where you are including the Javascript and Popper.js? I'm sorry but there is so much little information that is given that it could simply just be it's not loading Bootstrap into the project. Please revise and add some more information that can possibly help us debug this for you.
Here is the boilerplate for a modal in bootstrap and a trigger with a button. Take this and see if this works for you and then you can re-add the other components you had to it. If this doesn't open up a modal then it might just be a loading problem with Bootstrap.js.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</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>
Here is the link to the official Bootstrap Documentation. https://getbootstrap.com/docs/4.4/components/modal/
Also Please note that the code you have provided is missing the required Popper.js file. Please Add this code above the ending <html> tag.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If you simply don't want to use the online versions of the Bootstrap.js, Jquery.js, or Popper.js Here are the websites where you can find them and download them to easily extract to your project.
Jquery Code Uncompressed: https://code.jquery.com/jquery-3.4.1.js - Just save this into a file called jquery.js and include it with a script tag
Bootstrap.js: Can be downloaded from the official Bootstrap Website - https://www.getbootstrap.com
Popper.js: https://popper.js.org/ - Can be downloaded here
Also please read the StackOverflow Guide to asking a good question you can find here at: https://stackoverflow.com/help/how-to-ask
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.
My use case for the WordPress plugin is quite simple. I want to provide a plugin that sets up a custom sidebar widget that a user can activate then place where ever they please (or where ever the sidebar widgets areas allow them).
The plugin provides a search functionality that does a bunch of stuff. The "search" functionality is built completely in HTML/JS.
I have gone through creating a WordPress plugin boilerplate using Alessandro Castellani youtube series called "Wordpress Plugins Development Tutorials".
My folder structure more or less looks like the tutorial code that goes with the series (at least the more widget specify files). Found Here
Despite the complexity of the structure used in the tutorial and the simplistic nature of my particular use case, I like the extensibility/scalability the plugin architecture used provides. I digress.
I've created and called the proper WP_Widget class methods; widget, form, and update.
The plugin successfully instantiated the custom sidebar widget on the admin side and is able "drag and drop" as I please.
For the rendering of the front-side content, I am using file_get_contents() to retrieve the contents of the HTML file inside the widget() method. Then I echo out the contents BEFORE the $args['after_widget'] declaration.
This is the code snippet of the widget method code.
public function widget( $args, $instance ) {
$searchHTML = file_get_contents(PLUGIN_URL . '/api-search.html', __FILE__);
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
//$searchHTML = file_get_contents(plugins_url('api-search.html', __FILE__));
//echo $searchHTML;
echo $args['after_widget'];
}
When I check the front side, the HTML "search" functionality loads properly, as well as the adjoining JS files enqueued. It works as intended.
The issue is despite the widget loading the files like I want it to, it seems to break the other widgets.
This is how it looks like before echoing the HTML content.
This is how it looks like after echoing the HTML content.
If there are portions of my code I should provide to troubleshoot this, let me know and I will happily do so. At the moment, can't think of any other methods used would be the issue.
EDIT: Portions of my SO edits are not saving!
EDIT: Adding the entire code of "api-search.html". I should mention that this code is strickly prototype and has not been cleaned up... obviously lol.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MBE AUTOCOMPLETE</title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/purecss#1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/mbe-style.css" />
<script src="https://unpkg.com/ionicons#4.5.0/dist/ionicons.js"></script>
<script
type="text/javascript"
src="/assets/scripts/mbe-api-functions.js"
></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Thasadith');
</style>
<script type="text/javascript"> function hideSelectSubModal() {
$("#selectSubcategory").modal("hide");
}
//$("#modal").on("load", createRadioButtonFromArray(subList));
function getCategory() {
let output = autocomplete();
$(function() {
$("#industry").autocomplete({
source: output
});
});
$("#industry").on("autocompleteselect", function(event, ui) {
getSubList();
});
}
function getSubList() {
$("#industry").autocomplete({
select: populateModal()
});
}</script>
</head>
<body class="mbe-plugin">
<div class="ui-widget">
<form role="form">
<label for="industry">Search For Professional: </label>
<input
type="text"
name="param"
id="industry"
oninput="getCategory()"
size="30"
/>
<td colspan="2" align="center">
<button
type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#selectSubcategory"
onclick="populateModal()"
>
Find
</button>
<!-- <input type="submit" value="Submit" /> -->
</td>
</form>
</div>
<!-- First Modal: selectSubcategory -->
<div
class="modal fade"
id="selectSubcategory"
tabindex="-1"
role="dialog"
aria-labelledby="selectSubcategoryLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="selectSubcategoryLabel"></h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="select_subcategory" onclick="getCheckBox()"></form>
<!--
<input class="form-control" type="radio" id="subcategory_list"> </select>
-->
</div>
</div>
</div>
</div>
<!-- Inbetween -->
<div
class="modal fade"
id="inBetween"
tabindex="-1"
role="dialog"
aria-labelledby="inBetweenLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="inBetweenLabel">Just a few question:</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> This is to better connect you with a proffesional, we will not sell your information.<p>
<button type="button" class="btn btn-primary" onclick="initQuestionDisplay()">Save changes</button>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Form submission modal -->
<div
class="modal fade"
id="formSubmit"
tabindex="-1"
role="dialog"
aria-labelledby="formSubmitLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formSubmitLabel">
Enter your information
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="gform pure-form pure-form-stacked" method="post" data-email="mbetestemail#gmail.com" action="https://script.google.com/macros/s/AKfycbyBzmpwpTU9vPWVDE_p8KQI-_ZjWTdlJOJ-FZ41/exec">
<form class="gform pure-form pure-form-stacked" method="post" data-email="mbetestemail#gmail.com" action="CALL TO GOOGLE SCRIPT FILE">
<div class="form-elements">
<div class=" pure-g">
<!-- <fieldset class="pure-group"> -->
<fieldset class="pure-u-1-2 pure-u-md-1-3">
<label for="name">Name: </label>
<input id="name" class="pure-u-23-24" name="name" placeholder="Full name!" />
</fieldset>
<!-- <fieldset class="pure-group"> -->
<fieldset class="pure-u-1-2 pure-u-md-1-3">
<label for="email">Email:</label>
<input id="email" class="pure-u-23-24" name="email" type="email" value=""
required placeholder="your.name#email.com"/>
<span class="email-invalid" style="display:none">
Must be a valid email address</span>
</fieldset>
<fieldset class="pure-u-1 pure-u-md-1-3">
<label for="name">Phone Number: </label>
<input id="phone_number" class="pure-u-23-24" name="phone_number" placeholder="Name of your company or company you work for" />
</fieldset>
<fieldset id="form-answer-box" class="pure-u-1 pure-u-md-1-3">
<label for="answers"></label>
<!-- Shouldnt be input, insert data into a tag tag dynamically? with inner or cosument.write then hide -->
<input id="answer-field" class="pure-u-23-24" name="answer-field" placeholder="Name of your company or company you work for" />
</fieldset>
</div>
<button class="button-success pure-button button-xlarge" onclick="initResultDisplay()">
<i class="fa fa-paper-plane"></i> Submit</button>
</div>
<div class="thankyou_message" style="display:none;">
<h2><em>Thanks</em> for contacting us!
We will get back to you soon!</h2>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Questions modal -->
<div
class="modal fade"
id="questionsDisplay"
tabindex="-1"
role="dialog"
aria-labelledby="questionsDisplayLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="questionsDisplayLabel">
QUESTIONS
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body"
data-bind="template: {name: 'template', data: $data}"
></div>
<script type="text/html" id="template">
<div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
<div class="question-box">
<h2 class="question" id="ques" data-bind="text: _data['question']"/>
<div data-bind="foreach: {data: _data['answers'], as: 'answer'}">
<input type="radio" id="ans" data-bind="checked: $parent.selectedAnswer, attr:{name: $parent.optionGroupName, value: $data}" />
<span data-bind="text: answer"/>
</div>
</div>
</div>
</script>
<button
type="button"
onclick="captureAnswers()"
class="btn btn-secondary"
data-dismiss="modal"
>
Next
</button>
</div>
</div>
</div>
<!-- Search result Display Modal -->
<div
class="modal fade"
id="searchResultDisplay"
tabindex="-1"
role="dialog"
aria-labelledby="searchResultDisplayLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="searchResultDisplayLabel">
Search Results
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body"
data-bind="template: {name: 'template1', data: $data}"
></div>
<script type="text/html" id="template1">
<div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
<div class="result-box">
<div class="bgtint"></div>
<section class="businesscard">
<div class="flip">
<div class="front">
<div class="logo">
<img class="profile_image" width="50px" height="50px" data-bind="attr:{src: _data['profile_image']}"/>
<a data-bind="attr:{href: _data['profile_link'], target: '_blank'}"><h2 class="user_name" data-bind="text: _data['username']"/></a>
<div class="introduction"><h4 class="company_name" data-bind="text: _data['business_name']"/></div>
<div class="arrow"></div>
</div>
</div>
<div class="userinfo">
<div class="col-sm-4" id="phone-box">
<ion-icon name="call"></ion-icon>
<p class="user_mobile" data-bind="text: _data['mobile']"/>
</div>
<div class="col-sm-4" id="email-box">
<ion-icon name="mail"></ion-icon>
<p class="user_email" data-bind="text: _data['email']"/>
</div>
</div>
</section>
</div>
</div>
</script>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script data-cfasync="false" type="text/javascript" src="assets/scripts/form-submission-handler.js"></script>
</body>
</html>