Pagination in my laravel app showing up twice

Pagination in my laravel app showing up twice - javascript

I recently added sortable and a delete modal to my project. After adding the delete modal I'm now getting the pagination to render twice.(picture included to illustrate).
My Controller
public function index()
{
$contacts = Contact::sortable('firstName')->paginate(10);
return view('contacts.index', ['contacts' => $contacts]);
}
my index blade
#extends('layouts.master')
#section('content')
<div class="container">
<div style="margin:10px">
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group {{ $errors->has('search') ? 'has-error' : "" }}">
{{ Form::text('search',NULL, ['class'=>'form-control', 'id'=>'search', 'placeholder'=>'search contacts...']) }}
{{ $errors->first('search', '<p class="help-block">:message</p>') }}
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
{{ Form::button(isset($model)? 'Find' : 'search' , ['class'=>'btn btn-success', 'type'=>'submit']) }}
</div>
</div>
</div>
<div class="row">
<div style="margin-top:10px;">
<h3>Contacts</h3>
</div>
</div>
<div class="row">
<div style="margin-top:10px; margin-bottom:10px;">
<a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
</div>
</div>
{{-- #if ($contacts = "")
<div class="row">
<h3>You don't have any contacts saved!</h3>
<div style="margin-top:10px; margin-bottom:10px;">
<a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
</div>
#else --}}
<div style="margin:10px">
</div>
<div class="row">
<div class="table-responsive">
<table id='dataTable' class="table table-hover col-sm-12 w-auto">
<thead class="thead-dark">
<tr>
<th>
<h5>#sortablelink('firstName', 'First Name')</h5>
</th>
<th>
<h5>#sortablelink('lastName', 'Last Name')</h5>
<th>
<h5>#sortablelink('email', 'Email')</h5>
<th>
<h5>#sortablelink('phone', 'Phone')</h5>
<th>
<h5>#sortablelink('birthday', 'Birthday')</h5>
<th>
<h5 style='text-align:center;'>#sortablelink('id', 'Action')</h5>
</th>
</tr>
</thead>
<tbody>
#if($contacts->count())
#foreach ($contacts as $key => $value)
<tr>
{{-- Need to add in sort functions for each catagory --}}
<td>{{$value->firstName}}</td>
<td>{{$value->lastName}}</td>
<td>{{$value->email}}</td>
<td>{{$value->phone}}</td>
<td>{{$value->birthday}}</td>
<td>
<a class="btn btn-sm btn-success" style='display:inline-block;' href="{{ route('contacts.show', $value->id)}}">Show</a>
<a class="btn btn-sm btn-warning" style='display:inline-block;' href="{{ route('contacts.edit', $value->id)}}">Edit</a>
{{-- for future editmodal
<a class="btn btn-warning edit"
data-toggle="modal"
data-target="#editModal"
data-id="{{ $value->id }}"
data-firstName="{{ $value->firstName }}"
data-lastName="{{ $value->lastName }}"
data-email="{{ $value->email }}"
data-phone="{{ $value->phone }}"
data-birthday="{{ $value->birthday }}"
>
Edit
</a> --}}
<a class="btn btn-sm btn-second" style='display:inline-block;'
href="{{ route('contacts.createAddress', ['contact_id' => $value->id])}}">Add Address</a>
<a href="#" style='display:inline-block;'
data-id={{$value->id}}
data-firstName={{$value->firstName}}
data-lastName={{$value->lastName}}
class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal">Delete</a>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
{!! $contacts->appends(\Request::except('page'))->render() !!}
{{-- ############################################ Modals ############################################# --}}
<!-- Edit Modal -- (To be added later once calendar is working) -->
{{-- <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Contact Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/contacts" method="PUT" id="editForm">
<div class="modal-body">
#crsf
{{ Form::model($contact,['route'=>['contacts.update', $value->id],'method'=>'PATCH']) }}
#include('contacts.form_master')
{{ Form::close() }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn btn-sm btn-success" href="contacts/edit">Update</a>
</div>
</form>
</div>
</div>
</div> --}}
<!-- End Edit Modal -->
<!-- Delete Warning Modal -->
<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('contacts.destroy', 'id') }}" method="post">
#csrf
#method('DELETE')
<input id="id" name="id" type="hidden">
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger" id="deleteOK_button" rid="{{ $value->id }}">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
{{-- ########################################## End Modals ########################################### --}}
</div>
{{-- #endif --}}
</div>
{{ $contacts->links() }}
</div>
#endsection
#section('scripts')
<script type="text/javascript">
$(document).ready(function(){
$('#deleteOK_button').on('click',function(){
var rid = $(this).attr('data-id');
$.post('{{ url('contacts/delete') }}', {
'_token':'{{ csrf_token() }}',
'rid' : rid,
}, function(data){
console.log(data);
}, 'json');
});
});
</script>
#endsection
master blade
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Address Book</title>
<!-- Bootstrap core CSS -->
<!-- Styles -->
<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">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-brand">Address Book</div>
{{-- <a class="navbar-brand" href="#">Address Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> --}}
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ route('contacts.index')}}">Home <span class="sr-only">(current)</span></a>
</li>
{{-- <li class="nav-item">
<a class="nav-link" href="{{ route('contacts.search')}}">Search</a>
</li> --}}
</ul>
</div>
</nav>
<main role="main">
#yield('content')
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
#yield('script')
</body>
</html>
my webpackmix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig(webpack => {
return { plugins: [new webpack.ProvidePlugin({
$: "jquery",
jQuery: ["jquery", "$"],
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})] };
});
I've tried a number of things but I'm a bit out of my league on this issue.
As always, thanks in advance!!!

For a quick review change few things. Also check some of your code is not properly commented or maybe a div is missing.
<div class="row">
<div class="table-responsive">
<table>
//here goes your table data
</table>
// pagination goes here or after the next div
{{ $contacts->links() }}
OR
//you can write this way either
{{ $contacts->appends(request()->except('page'))->links() }}
</div>
</div>
//Modals goes here...
//comment {!! $contacts->appends(\Request::except('page'))->render() !!} if it is not commented

Related

How can I open a Bootstrap (5.2) modal with a specific tab selected, from a button?

I'm trying to open a Bootstrap (5.2) modal with a specific tab selected. The tab should be determined by which button is clicked on the home page ("Login" or "Sign Up").
I tried previous solutions, but they mostly use older versions of Bootstrap.
I'm a complete noob to JavaScript, so if your solution includes it please explain like I'm five.
Here's my HTML:
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }}
{{ log_in_form.email(class="form-control") }}
<br>
{{ log_in_form.password.label(class="form-label")}}
{{ log_in_form.password(class="form-control") }}
<br>
{{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }}
{{ sign_up_form.email(class="form-control") }}
<br>
{{ sign_up_form.password.label(class="form-label")}}
{{ sign_up_form.password(class="form-control") }}
<br>
{{ sign_up_form.confirm_password.label(class="form-label")}}
{{ sign_up_form.confirm_password(class="form-control") }}
<br>
{{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

You can utilize bootstrap events. I think the javascript part is short, so basically listening for event show.bs.modal of the modal (see bootstrap docs) and get the reference to the invoking button event.relatedTarget (see bootstrap docs) which had in the first place an data-tab-id="ID-OF-TAB" attribute. We take that attribute and get a reference to the tab. Finally we use the tabs method show to show the correct tab.
const myModal = document.getElementById('login-signup-modal')
myModal.addEventListener('show.bs.modal', (ev) => {
var invoker = ev.relatedTarget
var selected_tab = invoker.getAttribute("data-tab-id")
const tab_btn = document.querySelector('#' + selected_tab)
const tab = new bootstrap.Tab(tab_btn)
tab.show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" data-tab-id="pills-signup-tab" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" data-tab-id="pills-login-tab" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }} {{ log_in_form.email(class="form-control") }}
<br> {{ log_in_form.password.label(class="form-label")}} {{ log_in_form.password(class="form-control") }}
<br> {{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }} {{ sign_up_form.email(class="form-control") }}
<br> {{ sign_up_form.password.label(class="form-label")}} {{ sign_up_form.password(class="form-control") }}
<br> {{ sign_up_form.confirm_password.label(class="form-label")}} {{ sign_up_form.confirm_password(class="form-control") }}
<br> {{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

ajax post list update only first of posts

I have a list of content that users send, such as tweeting, and they post a text, and the following content is also displayed. input I put an ID that updates that ID in Ajax, but because the posts are below and editing is modal, only one of the forms can be edited because the input ID is fixed
Can you please help?
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#modal-lg-{{$item->id}}" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
my modal
#foreach($consult as $item)
<div class="modal fade" id="modal-lg-{{$item->id}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form data-id="{{$item->id}}" method="post" action="{{ route("Consult.update", $item->id) }}" enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" >{{$item->description}}</textarea>
<div class="alert-message" id="descriptiError"></div>
</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 updateInfo" data-id="{{$item->id}}" data-token="{{ csrf_token() }}">Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
#endforeach
my ajax code
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $(this).attr('data-id');
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});
enter image description here
enter image description here

Similar as Rateb's answer, however a bit different
First we have to declare a javascript function to initialize whatever we need to show in the modal form
Second we must call the function with the necessary content. In your case when we click the Edit button, it must cal the js function
Third is the logic you use to post the data.
Notice how i have encoded the description to preserve the format and i have deleted the other parameters in the modal form and declared a hidden field to contain the item-id.
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#edit-modal" onclick="initModal({{$item->id}}, {{json_encode($item->description)}} )" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
modal
<div class="modal fade" id="edit-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="edit-modal-form">
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" ></textarea>
<div class="alert-message" id="descriptiError"></div>
<input type="hidden" id="item-id-field">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary updateInfo" >Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scripts
function initModal(id, description)
{
// Inialize the modal hidden field with the id value using Jquery
$("#item-id-field").val(id);
// decode the json and show it in the desciption field in the modal
var description_decoded = JSON.parse(JSON.stringify(description));
$("#description").html(description_decoded);
}
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $("#item-id-field").val();
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});

Try this example, it's a simple example assuming you have show route that gives the post info and edit route that submitting the edits, in this example we are not submitting form we just sending a request with ajax client called axios,
The blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
#foreach($consult as $item)
<div id="cards" class="card">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button data-id={{$item['id']}} type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
edit
</button>
</div>
</div>
<div class="card-body">
<div class="post">
<p>
{{$item['description']}}
</p>
</div>
</div>
</div>
#endforeach
<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">Edit post</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id">
<div class="form-group">
<label>Description</label>
<input name="description" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button name="save-button" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js"></script>
</body>
<script>
const modal = $('#exampleModal')
const descriptionInput = $('input[name="description"]')
const idInput = $('input[name="id"]')
const saveButton = $('button[name="save-button"]')
modal.on('show.bs.modal', (e) => {
// getting the id from clicked button
const postId = e.relatedTarget.getAttribute('data-id')
// render the required post info
axios.get('/posts/' + postId).then(res => {
descriptionInput.val(res.data.description)
idInput.val(res.data.id)
})
})
saveButton.on('click', () => {
// the edit request in your example its /ConsultantsCp/Consult/' + ConsultId
axios.put('/posts/' + idInput.val(), {
_token: "{{ csrf_token() }}",
description: descriptionInput.val(),
}).then(res => {
console.log(res)
modal.modal('toggle')
})
})
</script>
</html>

Iterate Through Multiple Input Fields with JQuery

I have a simple modal that, when opened, allows a user to add multiple names by clicking the plus icon via JQuery.
The issue that I am currently having is that I need to capture the data entered into all of the name fields and format them into a JSON array so I can post the data. I can log out the first field, but none of the additional fields. The simplified code is listed below but the full version can be viewed here.
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var value = $("#name_input").val();
console.log(value);
});
});
</script>

try below code snippet.
capture the data entered into all of the name fields
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
format them into a JSON array
var jsonStr = JSON.stringify(value);
$(document).ready(function() {
$("#new_rule").click(function() {
var input = "<input type='text' name='name' placeholder='name' class='form-control'>";
$("#name").prepend(input);
});
$("#save").click(function() {
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
var jsonStr = JSON.stringify(value);
console.log(jsonStr);
});
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Modal</title>
<style media="screen">
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<div class="permissions">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new">
Permissions
</button>
</div>
<!-- Modal -->
<div class="modal fade new" id="new" tabindex="-1" role="dialog" aria-labelledby="new_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="permissions">Permissions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<!-- Saved Modal -->
<div class="modal fade" id="saved" tabindex="-1" role="dialog" aria-labelledby="saved" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Save Changes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to save the following changes?</p>
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<span id="name"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Maybe try this method just to get array of values and then do whatever u want with them, this works for input fields of type 'text' but you can adjust it the way you want. The function is assigned to a button's onClick event.
<script>
var GetFieldValues = function(){
var values=[];
$("input[type='text']").each(function(){
values.push($(this).val());
});
console.log(values);
}
</script>

You can serialized your form inputs using the serializeArray() function. This will return a query string that then can be converted to JSON object usin JSON.stringify() with an array with each name added.
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var data = $('#input').serializeArray();
console.log(JSON.stringify(data));
});
});

with this you can solve friend:
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name[]' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var names = [];
$('input[name^="name"]').each(function() {
names.push($(this).val());
});
console.log(JSON.stringify(names));
});
});

bootstrap issue during modal integration

I have an issue when i'm trying to invoque a modal form, the moment when i click the edit button i need to load the form, but nothing appear, after looking for the problem tryin to fix it , the problem still remain, i'm stucked here for today trying all solution but nothing ....
The code snippet is showing the whole code :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="#{css/bootstrap.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/dataTables.bootstrap4.min.css"
th:href="#{css/dataTables.bootstrap4.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/buttons.bootstrap4.min.css"
th:href="#{css/buttons.bootstrap4.min.css}"
/>
<script type="text/javascript"
src="../static/js/jquery-3.2.1.min.js"
th:src="#{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript"
src="../static/js/jquery.dataTables.min.js"
th:src="#{js/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.buttons.min.js"
th:src="#{js/dataTables.buttons.min.js}"></script>
<script type="text/javascript"
src="../static/js/pdfmake.min.js"
th:src="#{js/pdfmake.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.bootstrap4.min.js"
th:src="#{js/dataTables.bootstrap4.min.js}"></script>
<script type="text/javascript"
src="../static/js/buttons.bootstrap4.min.js"
th:src="#{js/buttons.bootstrap4.min.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</head>
<body>
<div class="container">
<div th:if="${not #lists.isEmpty(produit)}">
<h2>Product List</h2>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Description</th>
<th>Price</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${produit}">
<td th:text="${product.idProduit}">Id</td>
<td th:text="${product.code}">code</td>
<td th:text="${product.libelle}">descirption</td>
<td th:text="${product.indice}">price</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><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-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>

It seems you have not included the boot‌strap.min.js file try include it then it would work. Because this file has many methods like, modal, tooltip and etc.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boot‌strap.min.js"></scri‌pt> file.
Include that file after /jquery-3.2.1.min.js. Then it would work.

Bootstrap Collapse Widget not working

I need to have used Collapse in bootstrap to hide some information and display once button is click but I don't know that wrong on this one why it is not working.
<div id="myModal6" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-88" aria-expanded="false" aria-labelledby="toggle-89">This is my content!
</p>
<div class="row">
<div class="col-md-6">
<p class="headline_text">Sample again</p>
<p style="text-align:center"><img src="img/samp.jpg"
</div>
<div class="col-md-6">
<p class="headline_text"> </p>
<p style="text-align:center"><img src="img/samp21.jpg"/> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I also include here files needed in bootstrap:
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="dist/js/app.min.js" type="text/javascript"></script>

If you are just trying to put a collapse panel inside your modal you need to add a target div for #toggle-pane-88. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#toggle-pane-88">Simple collapsible</button>
<div id="toggle-pane-88" class="collapse">
<p class="headline_text">Sample again</p>
<p style="text-align:center">
<img src="img/samp.jpg" </div>
<p class="headline_text"> </p>
<p style="text-align:center">
<img src="img/samp21.jpg" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Pagination in my laravel app showing up twice - javascript

Related

How can I open a Bootstrap (5.2) modal with a specific tab selected, from a button?

ajax post list update only first of posts

Iterate Through Multiple Input Fields with JQuery

bootstrap issue during modal integration

Bootstrap Collapse Widget not working

Categories

Resources