I am trying to pass the reservation id from HTML to modal. In pictures, when I click "cancel" next to reservation:
preview of the screen A modal appears and it should contain the id number of reservation:
preview
Modal pops up but without the reservation id number. Please, what's wrong?
I followed this tutorial: https://www.geeksforgeeks.org/how-to-pass-data-into-a-bootstrap-modal/. Thank you.
Here is my code:
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<p>
<h3>Welcome {{ firstname }}</h3>
</p>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for histor in history %}
<tr>
<td>{{ histor.seat_name }}</td>
<td>{{ histor.start_date}}</td>
<td>{{ histor.end_date }}</td>
<td>{{ numberofdays }}</td>
<td>
<form action="/" method="post">
<input tupe="text" class="form-control" id="idtocancel" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }}>
<button type="button" id="submit" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel {{ histor.booking_id}}</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>
<!--JavaScript queries-->
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#idtocancel").val();
$("#modal_body").html( name);
});
</script>
{% endblock %}
You are assigning value of {{ histor.booking_id }} to placeholder instead use value="{{ histor.booking_id }}" .Then , use class for click event and inside this get value of input using $(this).prev().val() and put it inside your modal.
Demo Code :
$(".tocancel").click(function() {
var name = $(this).prev().val(); //use prev
$("#modal_body").html(name);
$("#bookId").val(name); //use val here
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>2-10-1</td>
<td>10-1-10</td>
<td>5</td>
<td>
<form action="/" method="post">
<!--added value="{{ histor.booking_id }}"-->
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="1">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 1</button>
</form>
</td>
</tr>
<tr>
<td>B</td>
<td>2-10-1</td>
<td>10-1-11</td>
<td>5</td>
<td>
<form action="/" method="post">
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="2">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 2</button>
</form>
</td>
</tr>
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>
Related
I have a modal containing file uploader. I have a Add More button, which on click append a new file upload.
Here is my modal.
<div class="modal fade" id="quotationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Quotation Upload</h5>
</div>
<form
method='post'
enctype='multipart/form-data'
id="quotationForm"
>
<div class="modal-body">
<table id="quotationModalTable" width="50%">
<tbody id="quotationTbody">
<tr>
<input type="text" value="randomValue" name="randomValue">
</tr>
<tr class="add_row">
<td id="no" width="5%">#</td>
<td width="75%"><input class="file" name='files[]' type='file' multiple/></td>
<td width="20%"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<button class="btn btn-success btn-sm" type="button" id="add" title='Add new file'/>Add new file</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary submit" name="btnQuotationSubmit" type='submit'>Upload</button>
</div>
</form>
</div>
</div>
</div>
Now when I try to submit form, I am not getting those files. This is my code for form submit.
$("#quotationForm").submit(function(e) {
let files = $('.file').val();
let formData = new FormData($("#quotationForm")[0]);
I know there are many similarly to this question but I can't find a way.
I have a table and when I click edit in row table the modal should show and I want to pass data from table to modal and display some data in modal that comes from my table .When the button click it always error and the modal didn't show.I been using Django.Please see the image below. Below is my current code. Can you help me please?
enter image description here
accounts.html
{% extends 'navigation.html' %}
{% block content %}
<script>
function exampleModal(firstName,lastName){
document.getElementById('firstNameValueId').innerHTML = firstName
document.getElementById('secondNameValueId').innerHTML = lastName
$("#exampleModal").modal('show');
}
</script>
<!-- mytable -->
<div class="tabs-animation">
<div class="card mb-3">
<div class="card-header-tab card-header">
<div class="card-header-title font-size-lg text-capitalize font-weight-normal"><i
class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Accounts Information
</div>
<div class="btn-actions-pane-right actions-icon-btn">
<div class="btn-group dropdown">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="btn-icon btn-icon-only btn btn-link">
<i class="pe-7s-menu btn-icon-wrapper"></i>
</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-inbox"> </i><span>Menus</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-file-empty"> </i><span>Settings</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-book"> </i><span>Actions</span>
</button>
<div tabindex="-1" class="dropdown-divider"></div>
<div class="p-3 text-right">
<button class="mr-2 btn-shadow btn-sm btn btn-link">View Details</button>
<button class="mr-2 btn-shadow btn-sm btn btn-primary">Action</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Username</th>
<th>Date joined</th>
</tr>
</thead>
<tbody>
{% for user_information in user_information %}
<tr>
<td><a class="btn btn-info" onclick="exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')">Edit</a></td>
<td>{{user_information.first_name}}</td>
<td>{{user_information.last_name}}</td>
<td>{{user_information.email}}</td>
<td>{{user_information.username}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
<!-- This is my modal -->
<div id="modal-div">
<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">Personal Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form action="#" method="post">
<label for="firstname"> <p id="firstNameValueId">Some text in the Modal..</p></label>
<div>
<input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
</div>
</div>
<div class="form-group">
<label for="lastname">Last name</label>
<div>
<input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
</div>
</div>
</form>
</div>
</div>
<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" >
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-top:55px;">
<div class="modal-header" style="background:#003c4c;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:#FFF;">Check Availibility</h4>
</div>
<div class="modal-body">
<table class="table table-hover hd-bg-table table-bordered">
<thead>
<tbody>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle" rowspan="2"></th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
<th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
</tr>
<tr>
<th><b>Initiation</b></th>
<th><b>SPOC Assignment</b></th>
<th><b>Participant Contribution</b></th>
<th><b>Review</b></th>
<th><b>Closure</b></th>
</tr>
</thead>
<tr ng-repeat="x in infoWithStatus track by $index">
<td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
<td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
<td>
<select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
<option value="">Please select a role</option>
</select>
</td>
<td>{{x.count1}}</td>
<td>{{x.count2}}</td>
<td>{{x.count3}}</td>
<td>{{x.count4}}</td>
<td>{{x.count5}}</td>
<tr/>
</tbody>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
Here as we can see i am calling a function on click, that contains some validations. But, after the validations are done, it closes the model. But , i want the model to still open after validation as well.
You should remove
data-dismiss="modal"
from here
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
And in your validate(infoWithStatus) you should close the modal if validation is success. Use below code to hide modal
$("#responsive-modal3").modal("hide");
I want to use modal for representing additional data on my table row contennt for this reason i use this code below , but when i press button modal doesn't pops up and i don't see any error in my browser console , what should i add to make my code work?:
<script cam-script type="text/form-script">
$scope.myFunc = function() {
$('#myModal').modal('show');
};
</script>
<h2>My job List</h2>
<div>
<table style="width:100%;" class="table table-hover" >
<thead>
<tr>
<th style="width:80px; height:px;">chose</th>
<th style="width:140px;">id</th>
<th style="width:305px;">organizationNameEN</th>
<th style="width:250px;">cardNumber</th>
<th style="width:250px;"></th>
<th style="width:250px;"></th>
</tr>
</thead>
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE" ng-model="item.organizationNameGE" /></td>
<td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
<td><button ng-click="myFunc()" role="button" class="btn btn-large btn-primary">Detail</button></td>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" ng-repeat="item in arr">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<p ><label for="organizationNameEN"> organizationNameEN</label> : <input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
You can open it without using angular. Replace your code ng-click="myFunc()" with data-toggle="modal" data-target="#myModal" ... It should work
try this on your button (the one with the ng-click="myFunc()"), it invokes modal without a need for explicit script.
<button role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Detail</button>
I'm currently running into a problem. The problem is that it returns exactly this ' ' when trying to fetch data from 2 classes above the button.
This is how my app.js looks like:
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
This is how my code looks like where it's implemented:
<table class="table table-striped table-bordered">
<tr>
<th>Product Name</th>
<th>Brand</th>
<th>Description</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
#foreach($posts as $post)
<tr>
<div class="postcontest">
<td>{{ $post->productname }}</td>
<td>{{ $post->brands }}</td>
<td>{{ $post->description }}</td>
<td>{{ $post->created_at }}</td>
</div>
<td>
<div class="interaction">
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
<a class="btn btn-danger btn-sm" href="{{ route('post.delete', ['post_id' => $post->id]) }}" role="button"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</div>
</td>
</tr>
#endforeach
</table>
This is what it returns when opening the modal:
https://gyazo.com/b5709533810d4bdb95029db3af8a9c4c (Totally nothing!)
The 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">Edit a product</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<div class="form-group">
<label for="name">Product Name</label>
<input class='form-control' type="text" name="productname" id="productname">
</div>
<div class="form-group">
<label for="brands">Brands</label>
<input class='form-control' type="text" name="brands" id="brands">
</div>
<div class="form-group">
<label for="brands">Cop Link</label>
<input class='form-control' type="text" name="coplink" id="coplink">
</div>
<div class="form-group">
<label for="brands">Description</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</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></form>
</div>
</div>
</div>
</div>
Yes, the ID of the text field is 'productname' and that's all correct.
I'm currently out of ideas on how to fix this, any help would be appreciated!
Change this code:
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
To
<a onClick="edit('{{$post->productname}}',
'{{$post->brands}}',
'{{$post->description}}',
'{{$post->created_at}}'),"
class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
And
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
To
function edit(productname, brands, description, created_at) {
event.preventDefault();
$('#productname').val(productname);
$('#brands').val(brands);
$('#description').val(description);
$('#created_at').val(created_at);
$('#myModal').modal('show');
}