I can't open my modal in CodeIgniter.
I did a view for the modal and then I loaded in the controller. But when I click on the button, it doesn't show anything. No response. head have the Jquery and Bootstrap imports in the correct order.
Here i show you my code:
cdashboard.php:
//header
$this->load->view('UI/vheader');
//sidebar
$this->load->view('UI/vsidebar',$data);
//modals
$data['modaltarea'] = $this->load->view('tareas/vmodalnewtarea',NULL,TRUE);
//data in dashboard
$this->load->view('vdashboard',$data);
//footer
$this->load->view('UI/vfooter');
vmodalnewtarea.php:
<div id="newTareaModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newTarea" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Tarea nueva</h5>
</div>
<div class="modal-body">
<div class="container-fluid">
<!--Importar plantilla-->
<div class="row">
<div class="col-md-12">
<h3>Importar plantilla</h3>
</div>
<div class="row">
<!--Proyecto-->
<div class="col-md-4">
</div>
<!--Fase-->
<div class="col-md-4">
</div>
<!--Tarea-->
<div class="col-md-4">
</div>
</div>
</div>
<!--Nueva Fase-->
<div class="row">
<div class="col-md-12">
<h3>Nueva Tarea</h3>
</div>
<div class="row">
<div class="col-md-4">
<div class="row">
<input type="text" placeholder="Nombre" required />
</div>
<div class="row">
<!--<table id="tableHitos" class="table table-bordered table-strip" >
<thead>
<th>
Hitos
</th>
</thead>
<tbody>
</tbody>
</table>-->
<a type="button" class="btn"><i class="fa fa-plus"></i></a>
</div>
</div>
<div class="col-md-8">
<textarea id="txtaTarea" rows="5" placeholder="Descripcion" required>
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<p>
aaaaaa
</p>
</div>
</div>
</div>
</div>
And the view where I call the modal, on other view (vrowfase.php):
<div class="row fase">
<div class="col-lg-12">
<div class="col-lg-2 text-center">
<div class="callout callout-warning">
<h4><?= $fase->nombre?></h4>
<div class="progress progress-xxs">
<div class="progress-bar" role="progressbar" style="width: 50%">
</div>
</div>
</div>
</div>
<div class="projectBar col-lg-10">
<div class="row Bar">
<?= $tareas; ?>
<button type="button" class="btn btn-app text-center" data-toogle="modal" data-target="#newTareaModal">
<i class="fa fa-plus"></i>
Nueva Tarea
</button>
</div>
</div>
</div>
</div>
thanks for the help!
your modal id is
newTareaModal
and your data-target in button is
TareaModal
was a error writing.
on vrowfase.php I had "data-toogle" and is "data-toggle"
thank you anyway!
Related
I am facing undefined variable error when trying to access a variable in my view. I have gone through several solutions out here but none of them has worked for me. I have thoroughly examined everything that could cause this error in mu code and cannot find anything at all, please assist
Controller
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
use App\Category;
use App\Depot;
use Illuminate\Support\Facades\DB;
use Gloudemans\Shoppingcart\Facades\Cart;
use Auth;
class CheckoutController extends Controller
{
public function index()
{
$allcategories=Category::get();
$delivery_method = DB::table('deliverymethods')
->get();
$cartItems=Cart::content();
return view('checkout.index',['delivery_method'=>$delivery_method],['allcategories'=>$allcategories]);
}
public function deliverymethod()
{
$cartItems=Cart::content();
$allcategories=Category::get();
return view('delivery.index',['cartItems'=>$cartItems],['allcategories'=>$allcategories]);
}
public function billinginfo()
{
$depots=Depot::get();
$cartItems=Cart::content();
$allcategories=Category::get();
return view('billing.index',compact('cartItems'),['allcategories'=>$allcategories],['depots'=>$depots]);
}
public function shipping(Request $request)
{
$user_id=Auth::user()->id;
$shippingaddress=DB::table('shippingaddresses')
->select('shippingaddresses.*')
->where('user_id',$user_id)
->get();
$cartItems=Cart::content();
$allcategories=Category::get();
return view('shipping.index',['cartItems'=>$cartItems],['allcategories'=>$allcategories],['shippingaddress'=>$shippingaddress]);
}
}
My View
#extends('home.base')
#section('action-content')
<div class="container">
<div class="container" id="cart-window">
<div class="row">
<div class="col-lg-12" id="cart-header">
<h3>Billing & Shipping Details <span class="cart-return pull-right"><i class="ionicons ion-ios-cart"></i> Back to Cart</h3>
</div>
</div>
<div class="row">
<div class="col-lg-9">
#if(Cart::Count()==0)
<div class="row">
<div class="col-lg-12" id="empty-cart">
<p>Your cart is currently empty</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Return to Shop
</div>
</div>
#else
<div class="card detail" id="delivery-card">
<div class="card-header">
</div>
<div class="card-body">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<h5><strong>Existing Addresses</strong></h5>
</div>
<div class="col-lg-6">
<select class="select2 form-control" id="newAddress">
<option selected disabled>Please Select Delivery Address</option>
<option value="0">Add New Address</option>
#foreach($shippingaddress as $depot)
<option value="{{$depot->depot_name}}">{{$depot->depot_name}}</option>
#endforeach
<option>LIGHt</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
</div>
<div class="col-lg-3">
#if(Cart::Count()>0)
<div class="card detail">
<div class="card-header">
</div>
<div class="card-body">
<p class="card-text" id="cart-summary">
Order Summary
</p>
<hr/>
<div class="row">
<div class="col-sm-6">
{{Cart::Count()}}
</div>
<div class="col-sm-6">
#if(Cart::Count()==1)
Item
#else
Items
#endif
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6">
<p>
Subtotal
</p>
<p>
VAT (15%)
</p>
<p>
Total to Pay
</p>
</div>
<div class="col-sm-6" id="cart-totals">
<p>
R{{Cart::subtotal()}}
</p>
<p>
R{{Cart::tax()}}
</p>
<p>
R{{Cart::total()}}
</p>
</div>
</div>
<hr/>
<div class="row">
<div class="col-12 continue-btn">
Continue
</div>
</div>
{{-- <hr>
<div class="row" id="delivery-method">
<select class="form-control select2" id="delivery_method" name="del">
<option value="0" selected disabled>Select Delivery Method</option>
#foreach ($delivery_method as $item)
<option value="{{$item['delivery_method']}}">{{$item['delivery_method']}} R{{$item['price']}}</option>
#endforeach
</select>
</div> --}}
</div>
{{-- <div class="card-footer" id="cart-footer">
<div class="delivery_type">
<strong>Checkout</strong>
</div>
{{-- <div class="delivery_type2">
<strong>Checkout 2</strong>
</div> --}}
{{-- </div> --}}
</div>
<div class="card order-review">
<div class="card-body">
<p class="card-text" id="cart-summary">
Order Review
</p>
<div class="row">
<div class="col-sm-12">
<p><strong>Delivery Method</strong> <span class="change-del pull-right">Change</span></p>
<p>Delivery</p>
</div>
</div>
</div>
</div>
#endif
</div>
</div>
</div>
</div>
<!-- NewAddressModal -->
<!-- Modal -->
<div class="modal fade show" id="newAddressModal" style="display: none;" aria-modal="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Default Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
#push('custom_scripts')
<script type="text/javascript">
$(document).ready(function() {
{{-- $("#newAddress").change(function() {
var curVal = $("#newAddress option:selected").val();
if (curVal.indexOf('#newAddressModal') == 0){
$('#newAddressModal').modal('show');
}
}); --}}
$("#newAddress").on("change", function () {
$modal = $('#newAddressModal');
if($(this).val() === '0'){
$modal.modal('show');
}
});
});
</script>
#endpush
#endsection
Error Image
Error Image
Try grouping Multiple collection into one array, Then send it to the view like this:
$viewData = [
'cartItems' => $cartItems,
'allcategories' => $allcategories,
'shippingaddress' => $shippingaddress
];
return View::make('shipping.index')->with($viewData);
I would like to ask how to pull categories using tabs. I was able to pull all the items on one tab but I could not pull them per category. here is my code. The data comes from the database and seems to work on All items but I could not figure out how to pull them individually. I need some help with you expertise.
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="allItems">All Items
<div>
<div class="row">
<div class="col-12">
<div class="row">
#foreach($items as $per_item)
<div class="col-lg-4 col-6">
<div class="card mb-3">
<img src="{{$per_item->image_path}}" class="card-img-top">
<div class="card-body">
<small>{{$per_item->category->name}}</small>
<h4 class="card-title">
<a href="/items/{{$per_item->id}}">
{{$per_item->name}}
</a>
</h4>
<p class="card-text">{{$per_item->description}}</p>
<h3>{{$per_item->price}}</h3>
<form action="/cart/{{$per_item->id}}" method="POST">
#csrf
<div class="row">
<div class="col-12 col-md-5 col-lg-12 mb-2">
<input type="number" name="quantity" id="quantity"
class="w-100">
</div>
<div class="col-12 col-md-7 col-lg-12 mb-2">
<button type="submit" class="btn btn-primary">Add To
Cart</button>
</div>
</div>
</form>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="consumables">Consumables
<div>
</div>
</div>
<div class="tab-pvane container fade" id="pnuematicTools">Pnuematic
Tools</div>
I am using a table to retrieve all the data from the database and an array of view button on each table row. If the view button is clicked, a modal will appear displaying all the information of the particular row.
The problem is that the only id read is the last id. Giving the same view results for each table row.
I have this line of code in the view button:
< button class="btn btn-info" data-toggle="modal" data-target="#myModal-viewaccountinfo">View< / button>
While my modal code is this:
<div class="modal fade" id="myModal-viewaccountinfo" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"><center>USER ACCOUNT INFORMATION</center></h3>
</div>
<div class="modal-body">
<form method="post" action="">
<br>
<?php
$id = $_GET['txtid'];
include ("connect.php");
$i ="select * from usersvis where userid=".$id;
$h= mysql_query($i);
if($tr=mysql_fetch_array($h))
{
?>
<div class="row">
<div class="col-lg-4">
Name:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[3] . ' ' . $tr['4'] . ' ' . $tr['2']; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Username:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[5]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Password:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[6]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Gender:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[7]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Birthdate:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[8] . '-' . $tr['9'] . '-' . $tr['10']; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Address:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[11]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Status:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[12]; ?></label>
</div>
</div>
<br>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
I have created a basic HTML/jQuery structure for a modal that will pop up when clicked on. I'm in the process of integrating Woocommerce into my site and am unsure as to how I can do the following:
Have modal load respective product info
Integrate into a Woocommerce loop
Here is my HTML for the skeleton of what I'm trying to achieve:
<div class="col-md-4"><img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/Alto-183x300.jpg" alt="Product Img" class="product-img" data-toggle="modal" data-target="#myModal">
<p class="product-img-title text-center">Alto</p>
<!-- 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 text-center" id="myModalLabel">Alto</h4> </div>
<div class="modal-body" id="modal-body-one">
<div class="row">
<div class="col-sm-4"> <img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/Alto-183x300.jpg" alt="Modal Product Img" id="product-img"> </div>
<div class="col-sm-7">
<h5>Colours</h5>
<div class="scroll-container">
<div class="row">
<div class="col-xs-4">
<div class="selected-product-color"><img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/MACASSA.jpg" alt="Product Colour">
<p>Macassa</p>
</div>
</div>
</div>
<!-- End of Test Case -->
</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn flip"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<!-- Prices -->
<div class="modal-body" id="modal-body-two">
<div class="row">
<div class="col-sm-11">
<div class="row">
<h5 id="modal-prices">Download Price List</h5></div>
<div class="row">
<?php $my_query = new WP_Query('p=47');
while($my_query->have_posts()){
$my_query->the_post();
the_content();
} ?>
</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn flip"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="modal-footer"> Get Quote </div>
</div>
</div>
</div>
<!-- End of Modal -->
</div>
And here is my jQuery:
//Modal Change Content
$('#modal-body-two').hide();
$('.flip').on('click', function () {
$('#modal-body-one, #modal-body-two').toggle()
});
Is there a way that I can display the product info on click within a modal using Woocommerce? Thanks
So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multiple way but I still can't show the selected data;
So here is the trigger for the modal:
<?php while($row = mysqli_fetch_array($adm_query)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>" class="btn btn-outline btn-info"><i class="fa fa-search-plus"></i></a>
</td>
<?php }?>
Then this is the modal content:
<!-- Modal -->
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<?php $sel_query=mysqli_query($conn, "select * from admin where admin_id='$idmodal'")or die(mysql_error($conn)); $selrow=mysqli_fetch_array($sel_query);?>
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
The problem is nothing works, and i don't know where to start.
Appreciate for the help.
Create one class openModal in <a></a>. Use this class in <script></script> to get data-id
<?php while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
<i class="fa fa-search-plus"></i>
</a>
</td>
</tr>
<?php }?>
Place this code in the same page below.
<div style="margin-top:5%;" 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>
JS (data-id=.. is passed here.)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
// Get `id` from `<script></script>`
$id = $_GET['id'];
$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn));
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
Write below line in your code:-
$selrow=mysqli_fetch_assoc($sel_query);
OR
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
instead of
$selrow=mysqli_fetch_array($sel_query);
Also it is bad practice to write query directly into modal.
You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.