jQuery only showing blank text - javascript

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');
}

Related

Input value from HTML not passing to modal

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>

Uncaught TypeError: Cannot set property 'innerHTML' of null Django

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>

Getting table data to Bootstrap Modal using Sinatra ERB templating

I have a simple table which, using ERB templating (i.e. <%= =>), displays a table of data.
Each row in the table has an edit button to edit the contents of the row. I am trying to make it such that when I click on the edit button, a Bootstrap Modal will pop up with the contents of the row in <textarea> tags but whenever I do this, it only always displays the contents of the first row.
Here is the table in the ERB file
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<% $snippety.each do |snippet| %>
<tr>
<td align="center">
<a class="btn btn-default" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#basicModal3" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-trash"></em></a>
</td>
<td><%=snippet["question"]%></td>
<td><%=snippet["answer"]%></td>
<td>
<form onsubmit="return confirm('Are you sure you want to delete the Snippet?')" action='/api/v1/snippets/delete/<%= snippet["id"] %>' method="post">
<input type="submit" value="Delete" class="delete"> | <a id="button" shape="circle" color="black" href='/api/v1/snippets/edit/<%= snippet["id"] %>'>Edit</a>
</form>
</td>
</tr>
<!-- DELETE MODAL -->
<div class="modal fade" id="basicModal3">
<div class="modal-dialog" role="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>
</div>
<div class="modal-body">
<p style="text-align:center">WARNING</p>
<p style="text-align:center">This will delete the Snippet forever and cannot be recovered</p>
</div>
<div class="modal-footer">
<form action="/api/v1/snippets/delete/<%= snippet["id"] %>" method="POST">
<button type="submit" class="btn btn-primary">Delete</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- EDIT MODAL -->
<div class="modal fade" id="basicModal4" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Snippet</h4>
</div>
<form action="/api/v1/snippets/edited/" method="POST">
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label for="comment">Question</label>
<textarea class="form-control" rows="5" id="comment" name="question"><%=snippet["question"]%></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="comment">Answer</label>
<textarea class="form-control" rows="5" id="comment" name="answer"><%=snippet["answer"]%></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Snippet</button>
</div>
</form>
</div>
</div>
</div>
<%end%>
</tbody>
</table>
I know I can open a new page with the table data to be edited via a Sinatra controller but I don't want to have to do that.

a modal popup opening on the back of a modal popup

I have tried few things but didn't work, i need to open a modal popup on a modal popup either by hiding back modal popup or any other way.
I cannot inject controller instance too according to my application structure. Any help could be greatly appreciated.
As below, when i click on add stoppage button, a new modal opens, and this popup modal should hide or close & open again.
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
AddStoppage Popup code:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

Ideally multilevel modals are not supported by bootstrap. you would have to do it manually/programmatically by JavaScript; in your controller for your case.
You can make a flag variable to add some more css to the modal body. That flag can be active when there are more than one flags.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
</div>
</div>
</div>
</div>

Delete record after confirmation

i have a table of articles for each item when i click delete button a popup of confirmation appear the problem is how to pass the Id of article so that when the user click on confirmation button the record will be deleted
here is the code of the table
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div>
</td>
<td>
<div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div>
</td>
<td>
<p>
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
<td>
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</c:forEach>
</table>
and the code of the popup
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div>le numero de l'article</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>

this is the solution for my question
table code:
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td><div class="media">
<a class="pull-left" href="#"> <img
class="media-object img-thumbnail" width="100"
src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div></td>
<td><div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div></td>
<td><p>
<button class="btn btn-primary btn-xs" data-title="Edit"
data-toggle="modal" data-target="#edit" data-placement="top"
rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p></td>
<td>
<button class="open-deleteDialog btn btn-danger btn-xs"
data-title="Delete" data-toggle="modal"
data-target="#delete-article" data-placement="top"
data-id="ISBN564541" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</c:forEach>
</table>
<button class="btn btn-primary btn-xs" data-toggle="modal"
data-target="#ajoutart" data-placement="top" rel="tooltip">
<span>Ajouter Article</span>
</button>
</div>
</div>
</div>
</div>
code of modal class :
<div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
aria-labelledby="edit" 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>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="id" id="id" value="" />
</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
and the javascript function:
<script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
var ida = $(this).data('id');
$(".modal-body #id").val(ida);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
$('#delete').modal('show');
});
this link http://jsfiddle.net/Au9tc/605/ was very useful

Categories

Resources