e.preventDefault jquery not working with multiple forms and buttons - javascript

I have a problem with a JS script I'm working with :
I have a page that handles various operations using AJAX, multiple forms with different IDs are inside the page and in my script I use e.preventDefault at the beginning of ever button's on submit event, so that it doesn't redirect to form's action attribute but instead let me use AJAX and retrieve informations in the console, the problem is that not all the preventDefault work in the file, here it is :
// Various buttons to show/hide things, here e.PreventDefault works
$('#AddCategoryLinkToggle').on('click', function(e) {
e.preventDefault();
$('#addACategoryBlock').fadeIn();
});
$('#AddBrandLinkToggle').on('click', function(e) {
e.preventDefault();
$('#addABrandBlock').fadeIn();
});
$('#CloseAddCategory').on('click', function(e) {
e.preventDefault();
$('#addACategoryBlock').fadeOut();
});
$('#CloseAddBrand').on('click', function(e) {
e.preventDefault();
$('#addABrandBlock').fadeOut();
});
// end various buttons section
// FIRST AJAX SCRIPT, this e.PreventDefault works
$('#AddCategoryForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
$.post(Actionurl, postData)
.fail(function(data) {
$('#AddCategoryError').fadeIn();
$('#AddCategoryForm').fadeOut();
})
.done(function(data) {
//console.log(data);
$('#AddCategoryForm').fadeOut();
$('#AddCategorySuccess').fadeIn();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
// 2nd AJAX script, it works since it's the same as the first one
$('#AddBrandForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
$.post(Actionurl, postData)
.fail(function(data) {
$('#AddBrandError').fadeIn();
$('#AddBrandForm').fadeOut();
})
.done(function(data) {
//console.log(data);
$('#AddBrandForm').fadeOut();
$('#AddBrandSuccess').fadeIn();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
// 3rd AJAX script , DOESN'T WORK
$('#DeleteModal').on('submit', function(e) {
// Stop the browser from submitting the form.
var target = $(this);
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
var category_name = postData[1]['value'];
e.preventDefault();
$.post(Actionurl, postData)
.fail(function(data) {
//$('#'+ category_name +'ConfirmDelete').removeClass("disabled");
//$('#'+ category_name +'PostAlertError').fadeIn('fast');
})
.done(function(data) {
//$('#'+ category_name +'ConfirmDelete').addClass("disabled");
//$('#'+ category_name +'PostAlertSuccess').fadeIn('fast');
alert("Fatto!");
});
$('.closeModal').click(function(e) {
$('#'+ category_name +'ConfirmDelete').removeClass("disabled");
$('.postAlert').hide();
location.reload();
});
// TODO
});
// 4th AJAX script, DOESN'T WORK - same as previous
$('#EditCategoryForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
var category_name = postData[1]['value'];
$.post(Actionurl, postData)
.fail(function(data) {
$('#'+ category_name +'EditCategoryError').fadeIn();
$('#EditCategoryForm').fadeOut();
$('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");
})
.done(function(data) {
console.log(data);
$('#EditCategoryForm').fadeOut();
$('#'+ category_name +'EditCategorySuccess').fadeIn();
$('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");
});
// Reset Modals and Cards
$('#'+ category_name +'CloseEditCategoryModal').click(function(e) {
$('#'+ category_name +'ConfirmCategoryEdit').removeClass("disabled");
$('.postAlert').hide();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
Comments in it says it all, I don't know what I've done wrong and I've spent quite a while trying to figure it out, I hope you can help me.
EDIT : The HTML as requested, a bit long :
<div class="container">
<div id="addACategoryBlock">
<div class="row">
<div class="col-lg-12"><h4>Add a new category to the site</h4></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div id="AddCategorySuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Category Added successfully!</h4>
</div>
<div id="AddCategoryError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> There's been an error</h4>
</div>
</div>
</div>
<form id="AddCategoryForm" method="POST" action="{{ path_for('auth.categories.add') }}">
<div class="form-group">
<div class="col-lg-6">
<input name ="category_name" class="form-control" id="category_name" placeholder="Name" type="text" required>
<input name="slug" class="form-control" id="slug" placeholder="Slug" type="text" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Select a brand to connect it with this new category</label>
<select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
{% for brand in brands %}
<option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-6 text-center">
<button type="submit" class="btn btn-primary">Add category</button>
</div>
<div class="col-lg-6 text-center">
<button id="CloseAddCategory" type="button" class="btn btn-primary">Close</button>
{{ csrf.field | raw }}
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h1>Categories</h1>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Categories in the site</h3>
<small class="pull-right">or <a id="AddCategoryLinkToggle" href="#">add a new category</a></small>
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-bordered table-striped text-center">
<tbody><tr>
<th>#</th>
<th>Name</th>
<th>Slug</th>
<th>Brands inside this category</th>
<th>Action</th>
</tr>
{% for category in categories %}
<!-- Modal -->
<div class="modal fade" id="{{ category.slug }}Delete" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}DeleteLabel">
<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="{{ category.slug }}DeleteLabel">Delete {{ category.category_name|capitalize }}</h4>
</div>
<div class="modal-body">
<h2>Are you sure you want to delete {{ category.category_name|capitalize }} ?</h2>
<h4>This action is permanent.</h4>
<div id="{{ category.category_name|lower }}PostAlertSuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Record deleted successfully!</h4>
</div>
<div id="{{ category.category_name|lower }}PostAlertError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> Alert!</h4>
Warning alert preview. This alert is dismissable.
</div>
</div>
<div class="modal-footer">
<form id="DeleteModal" class="DeleteModal" method="POST" action="{{ path_for('auth.categories.delete') }}">
<input name="category_id" type="hidden" value="{{ category.category_id }}">
<input class="category_name" name="category_name" type="hidden" value="{{ category.category_name|lower }}">
<button type="button" class="btn btn-default closeModal" data-dismiss="modal">Close</button>
<button id="{{ category.category_name|lower }}ConfirmDelete" name="confirmDelete" type="submit" class="btn btn-primary confirmDelete">Confirm</button>
{{ csrf.field | raw }}
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="{{ category.slug }}Edit" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}EditLabel">
<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="{{ category.slug }}EditLabel">Edit {{ category.category_name|capitalize }}</h4>
</div>
<form id="EditCategoryForm" method="POST" action="{{ path_for('auth.categories.edit') }}">
<div class="modal-body">
<div id="{{ category.category_name|lower }}EditCategorySuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Record updated successfully!</h4>
</div>
<div id="{{ category.category_name|lower }}EditCategoryError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> Alert!</h4>
There's been an error!
</div>
<div class="form-group">
<label for="EditName">Name</label>
<input type="text" class="form-control" name="EditName" id="EditName" placeholder="Name" value="{{ category.category_name|capitalize }}">
<label for="EditSlug">Slug</label>
<input type="text" class="form-control" name="EditSlug" id="EditSLug" placeholder="Slug" value="{{ category.slug }}">
</div>
<div class="form-group">
<label>Edits brands connected with this category</label>
<select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
{% for brand in brands %}
{% if brand.brand_id in correlated %}
<option selected="selected" value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% else %}
<option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% endif %}
{% endfor %}
</select>
<input type="hidden" class="form-control" name="category_id" id="category_id" value="{{ category.category_id }}">
</div>
</div>
<div class="modal-footer">
<button id="{{ category.category_name }}CloseEditCategoryModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="{{ category.category_name }}ConfirmEditModal" type="submit" class="btn btn-primary">Save changes</button>
</div>
{{ csrf.field | raw }}
</form>
</div>
</div>
</div>
<!-- end modal -->
<tr>
<td>{{ category.category_id }}</td>
<td>{{ category.category_name|capitalize }}</td>
<td>{{ category.slug }}</td>
<td>
<ul>
{% for brand in category.brands %}
<li>{{ brand.brand_name }}</li>
{% endfor %}
</ul>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Delete">Delete</button>
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Edit">Edit</button>
<!--Prova edit-->
</div>
</td>
</tr>
{% endfor %}
</tbody></table>
</div>
<!-- /.box-body -->
<div class="box-footer clearfix">
<!--<ul class="pagination pagination-sm no-margin pull-right">
<li>«</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>»</li>
</ul>-->
</div>
</div>
</div>
</div>
</div>


Try return false:
$('#DeleteModal').on('submit', function (e) {
// ...
return false;
});
$('#EditCategoryForm').on('submit', function (e) {
// ...
return false;
});

Related

Bootstrap one modal with different buttons

I'm trying to create a modal with varying content that would lead to different URLs depending on item's ID.
I came up with this code for modal:
{% for user_expense_category in user_expense_categories %}
<div class="row mb-1 d-flex justify-content-between">
<div>{{ user_expense_category.name }}</div><div>{% if user_expense_category.monthly_limit %}
Limit: {{ user_expense_category.monthly_limit }}{% endif %}</div>
<div><button type="button" class="btn btn-dark" data-toggle="modal" data-target="#editExpense" data-id="{{ user_expense_category.id }}"
data-name="{{ user_expense_category.name }}" {% if user_expense_category.monthly_limit %}data-monthly_limit="{{ user_expense_category.monthly_limit }}"{% endif %}> Edytuj </button></div>
</div>
{% endfor %}
<div class="modal fade" id="editExpense" tabindex="-1" aria-labelledby="#editExpense" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editExpenseLabel">Edytuj kategori&eogon; wydatku</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="/settings/id:/editExpCat" method="post">
<table>
<tr>
<td><label for="name">Nazwa:</label></td>
<td><input name="name" id="name" class="form-control m-1" required></td>
</tr>
<tr>
<td><label for="monthly_limit">Limit miesi&eogon;czny:</label></td>
<td><input name="monthly_limit" type="number" id="monthly_limit" class="form-control m-1" step="0.01" min="0.01"></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
<button type="submit" class="btn btn-primary">Zapisz</button>
</div>
</div>
</div>
</div>
And for JS:
$('#editIncome').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget)
const id = button.data('id')
const name = button.data('name')
const monthly_limit = button.data('monthly_limit')
const modal = $(this)
modal.find('.modal-body form').action('/settings/' + id + '/editIncCat')
modal.find('.modal-body input name="name"').val(name)
modal.find('.modal-body input name="monthly_limit"').val(monthly_limit)
})
Apparantely there is no such function as modal.find('').action so my question is: How do I insert different action for the form in the modal depending on the item's ID?
I've tried code above and got an error:
Uncaught TypeError: modal.find(...).action is not a function
at HTMLDivElement.<anonymous> (app.js:52:34)
at HTMLDivElement.dispatch (jquery-3.6.0.min.js:2:43064)
at v.handle (jquery-3.6.0.min.js:2:41048)
at Object.trigger (jquery-3.6.0.min.js:2:71515)
at HTMLDivElement.<anonymous> (jquery-3.6.0.min.js:2:72110)
at Function.each (jquery-3.6.0.min.js:2:3003)
at S.fn.init.each (jquery-3.6.0.min.js:2:1481)
at S.fn.init.trigger (jquery-3.6.0.min.js:2:72086)
at e.show (modal.js:115:22)
at HTMLDivElement.<anonymous> (modal.js:570:14)

How can I write a Jquery function which 'creates' or 'modifies' existing html modal

I'm trying to create a confirm delete window for users who are trying to delete the existing model from my cloud panel. So I created HTML design, but now I'm stuck with the coding part, I'm really green on Jquery and JS, so I pretty much know the logic, but I can't achieve it in code.
How should it work?
When the user presses on the delete button, I somehow need to pass in the information of the model the user is trying to delete and then modify the delete window content with the model information.
What have I done for now?
I have only designed the design (HTML code), which I'm putting down here.
This is the delete window:
<!-- Confirm delete -->
<div class="modal fade" id="reply_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<form method="post" action="{{request.build_absolute_uri}}">
{% csrf_token %}
<div class="modal-dialog rounded" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<div class="text-danger">
<i class="fas fa-exclamation-triangle"></i> Please confirm your action!
</div>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<span class="text-center text-dark p-3 border-bottom shadow-sm" style="background-color: #ffe88a;font-size: 14px;">Warning: This action cannot be undone</b>.</span>
<div class="modal-body" style="background-color: #fafafa;font-family: 'Mukta', sans-serif;">
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="text-center">
<div class="alert alert-danger justify-content-md-center text-center" role="alert">
<i class="fas fa-times-circle"></i>
{{message.message|safe}}
</div>
</div>
{% elif message.tags == 'success' %}
<div class="row mb-3">
<div class="col"></div>
<div class="alert alert-success col-6 justify-content-md-center text-center" role="alert">
<i class="fas fa-check-circle"></i> {{message.message|safe}}
</div>
<div class="col"></div>
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="text-center pt-1">
<h4 class="page-title"><span class="text-danger font-weight-bold">*</span> Delete [MODAL_ID]</h4>
</div>
<div class="justify-content-center">
<form method="post" action="{% url 'ticket_list' %}">{% csrf_token %}
<div class="row">
<div class="col-{% if request.user_agent.is_pc == True %}4{%else%}4{%endif%}">
<div class="text-left">
<img width="{% if request.user_agent.is_mobile %}100{% else %}140{% endif %}"src="https://icons.iconarchive.com/icons/papirus-team/papirus-status/256/user-trash-icon.png" alt="qr_code">
</div>
</div>
<div class="col-{% if request.user_agent.is_pc == True %}8{%else%}8{%endif%}">
<p class="pl-2">You are trying to delete [MODAL_ID].<br>To confirm this action please type: <span id="ticket_del_text" name="ticket_del_text" class="font-weight-bold text-dark">del [MODAL_PUBLIC_ID]</span></p>
<input type="text" id="code_verify" name="code_verify" placeholder="Please enter the code" pattern="^[a-z A-Z 0-9]{5}$" oninvalid="this.setCustomValidity('This code does not match the regex.')" oninput="this.setCustomValidity('')" required class="form-control text-center mb-2">
<button type="submit" class="btn p-2 btn-success col-12">{% if request.session.language == 'lt' %} Ištrinti {% elif request.session.language == 'en' %} Delete {% elif request.session.language == 'rus' %} вытирать {% endif %}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>

So I have created
<script type="text/javascript">
function change_modal(modal_name,modal_id) {
const modal_id_span = document.getElementById('modal_id_span');
const modal_id_span2 = document.getElementById('modal_id_span2');
const modal_del_text = document.getElementById('ticket_del_text');
modal_id_span.innerText = modal_id;
modal_id_span2.innerText = modal_id;
modal_del_text.innerText = modal_name;
console.log('modelis', modal_name);
}
</script>
And then called it with
TEST
And here's the result:)

I want to show Modal popup and pass data to modal according to user-id in Laravel Blade

I want to show a popup modal with information for an individual user when someone clicks on view Details Button.
I want to pass the user data according to the user-id and show this in the modal popup. My data are in $user.
I want to do exactly done in the link below website http://ssipgujarat.in/sgh201920/problem_statement.php as you click on view details, it shows the modal for that particular problem statement. I hope that it make sense to you.
#extends('layouts.app')
#section('content')
<div class="container" id="blur-wrapper">
<div class="row">
#foreach($data as $user)
#if($user->user_type == 'user')
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
<h6>{{ $user->email }}</h6>
<hr/>
<h6>Department: {{$user->StudentProfile->department}}</h6>
<h6>Sem: {{ $user->StudentProfile->sem }}</h6>
</div>
<div class="button-wrapper">
<form action="{{ $user->id }}">
{{-- <button class="btn btn-primary" id="view-detail">View Details</button>--}}
<a class="btn btn-info" id="view-detail" href="{{ $user->id }}">View Details</a>
</form>
<form method="POST" action="/admin/reject/{{ $user->id }}">
#csrf
<button class="btn btn-danger" type="submit">Delete Account</button>
</form>
</div>
</div>
<div class="popup">
<h2>{{ }}</h2>
</div>
</div>
#endif
#endforeach
</div>
</div>
#endsection

On your view details button assuming you are using bootstrap,your code should
<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>
on your routes
on your modal's code
#foreach($users as $user)
<div class="modal fade" id="exampleModal{{$user->id}}" 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 Brand
</h5>`enter code here`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-offset-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" value="{{$user->first_name}}">
</div>
<input type="submit" value="Edit" class="btn btn-success">
</div>
</div>
</div>
</div>
</div>
#endforeach

Did this with jQuery and Ajax and a data-entry attribute:
blade (CSS: bulma)
<!-- list of elements -->
<li class="dashboard">
<p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>
<!-- MODAL -->
<div class="modal" id="QuickInfo">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Quick-Info</p>
<button class="delete closeQuickInfo" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- PUT INFORMATION HERE, for example: -->
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rubrik</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" id="category" type="text" value="" readonly>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Kunde</label>
</div>
<div class="field-body">
<div class="field">
<input class="input" id="customer" type="text" value="" readonly>
</div>
</div>
</div>
<!-- END PUT INFORMATION HERE -->
</section>
<footer class="modal-card-foot">
<button class="button is-link closeQuickInfo">Schließen</button>
</footer>
</div>
</div>
jQuery
$(document).ready(function () {
$('.showQuickInfo').click(function () {
$('#QuickInfo').toggleClass('is-active'); // MODAL
var $entry = this.getAttribute('data-entry');
getEntryData($entry);
});
}
function getEntryData(entryId) {
$.ajax({
url: '/entries/getEntryDataForAjax/' + entryId,
type: 'get',
dataType: 'json',
success: function (response) {
if (response.length == 0) {
console.log( "Datensatz-ID nicht gefunden.");
} else {
// set values
$('#category').val( response[0].category );
$('#customer').val( response[0].customer );
// and so on
}
}
});
}
Controller
public function getEntryDataForAjax(int $id)
{
$entries = new Entry();
$entry = $entries->where('id', $id)->get();
echo json_encode($entry);
}

Update database value with Bootstrap Modal and Laravel 5.2

I can normally insert, update and delete data from database with Laravel 5.2. Now i want to update table data with Bootstrap Modal . My modal and Table view in same blade.
Modal:
<!-- Modal content-->
<div class="modal-content">
#foreach($dataQrDetails as $dataQr)
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Updating {{ $dataQr->winner_name }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
#endforeach
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
tbody:
<tbody>
#foreach($dataQrDetails as $dataQr)
<tr>
<td> {{ $dataQr->winner_name }} </td>
<td> {{ $dataQr->username }} </td>
<td> {{ $dataQr->winner_gender }} </td>
<td> {{ $dataQr->mobile_no }} </td>
<td> {{ $dataQr->ship_address }} </td>
<td> {{ $dataQr->product_name }} </td>
<td> {{ $dataQr->product_stat }} </td>
<td> {{ $dataQr->created_at }} </td>
<td> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" data-winner="{{ json_encode($dataQr) }}">Open Modal</button>
</tr>
#endforeach
</tbody>
Controller:
public function statusUpdate(Request $request, $id)
{
$id = $request->input("id");
$winner = Winner::find($id);
if ($winner->product_stat == "Shipped") {
echo "Its Already Shipped!";
}else{
$winner->product_stat = "Shipped";
$winner->status_text = $request->get('status_text');
$winner->save();
$request->session()->flash('alert-info', 'Product Status Updated!');
return Redirect::to('admin/winner/detail');
}
}
Routes:
Route::post('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController#statusUpdate']);
Now if i click on edit button of one row then its open Bootstrap modal with all value. But it should be the clicked value. Again if i fill up modal and click on submit button then its not updating into database. Its just redirect ../public/admin/winner/status/18 url with MethodNotAllowedHttpException error. How can i do that? Thanks in advance.

I make this work by using little bit JavaScript. Hope it will help who want to update data with Bootstrap Modal and Laravel Framework. Retrieve data from database with js and show it in modal with id.
Modal Looks Like:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Updating "<span class="qr_winner_name_show" style="color: #32c5d2;"></span>" Shipping Status</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/update')}}" method="POST" enctype="multipart/form-data" id="contactForm">
<input type='hidden' name='id' class='modal_hiddenid' value='1'>
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control modal_status_inp" placeholder="{{ trans('common.enter') }}" name="status_text" value=""></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Passing id when i click on button with data-id="{{ $dataQr->id }}" again if you need to pass another value then you can pass like this way.
tbody:
<tbody>
#foreach($dataQrDetails as $dataQr)
<tr id="qrd_{{$dataQr->id}}">
<td class="qr_winner_name"> {{ $dataQr->winner_name }} </td>
<td> {{ $dataQr->username }} </td>
<td> {{ $dataQr->winner_gender }} </td>
<td> {{ $dataQr->mobile_no }} </td>
<td> {{ $dataQr->ship_address }} </td>
<td> {{ $dataQr->product_name }} </td>
<td> {{ $dataQr->product_stat }} </td>
<td> {{ $dataQr->created_at }} </td>
<td> <button type="button" class="btn btn-info btn-xs openModal" data-id="{{ $dataQr->id }}" data-status-text="{{ $dataQr->status_text }}" data-toggle="modal" data-target="#myModal">Delier</button></td>
</tr>
#endforeach
</tbody>
JS:
$(document).ready(function(){
$(document).on('click','.openModal',function(){
var id = $(this).data('id');
$('.modal_hiddenid').val(id);
$('.modal_status_inp').val($(this).data('status-text'))
var qr_winner_name = $('#qrd_'+id+' .qr_winner_name').html();
$('.qr_winner_name_show').html(qr_winner_name);
});
})
Routes:
Route::get('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController#editStat']);
Route::post('/winner/status/update', ['as' => 'winner.change', 'uses' => 'WinnerController#statusUpdate']);
Controller:
public function editStat($id)
{
//
$winner = Winner::findOrFail($id);
return view('winner.detail', ['id' => $id, 'winner' => $winner]);
}
public function statusUpdate(Request $request, $id=0)
{
$id = $request->input("id");
$winner = Winner::find($id);
if ($winner->product_stat == "Shipped") {
$request->session()->flash('alert-warning', 'Its has been already Shipped! Try another one.');
return Redirect::to('admin/winner/detail');
}else{
$winner->product_stat = "Shipped";
$winner->status_text = $request->get('status_text');
$winner->save();
$request->session()->flash('alert-info', 'Product Status Updated!');
return Redirect::to('admin/winner/detail');
}
}
Hope it will help some who wants to insert/update database value with Bootstrap Modal and Laravel Framework.

To update or insert into your database you need to use POST method.
Your GET method need to replace with POST method.

You have so many options to make it working.
I'will show you one:
Make a seperate GET Route e.g /winner/edit/{id}
then in your Controller function render a view which contains the modal content:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Item</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<input value="{{$model->whatever}}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
Controller function
fuction edit($id) {
return view('edit_modal')->with(['model' => Model::find($id)])->render();
}
In the click function of your edit button load this view over ajax, fill the content of your modal, and show it.
There are many other way, depends on the size of your project and what functions you will also achieve.
e.g. Use a Libaray for JS Object binding (knockoutjs)
Total simple but resource eating way:
Render a seperate modal for each Model and open only the corresponding one on click.
#foreach($dataQrDetails as $dataQr)
<div class="modal fade" id="{{$dataQR->id}}">
<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">Updating {{ $dataQr->winner_name }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
<td> <button type="button" class="btn btn-info btn-xs" onclick:$('#'+{{$dataQR->id}}).modal('show')>Open Modal</button>

Date Not specifically working in laravel

I am now doing a project. In this project I am stuck in date.I have a problem in my project. In my project the user can add , edit or update his experience. For which I need date. The User can add his work experience from date to to date. But in this I can't select the previous date. I can only select from today to future day but can't select the previous date. I don't understand where the problem is.
My Code is given below
<h3 class="margin-bottom-20">Work Experience</h3>
<h4>Please list experience in chronological order, with most recent experience first.</h4><br>
<div class="margin-bottom-30">
<a href="#" data-toggle="modal" data-target="#addWorkExperience"
class="btn color-2 size-2 hover-1"><i class="fa fa-plus"></i> Add Work
Experience</a>
<div class="resume">
#if (isset($user_work_experiences))
#foreach ($user_work_experiences as $user_work_experience)
<div class="resume-list">
<div class="meta-header">
<p>{{ (!empty($user_work_experience->from_date)) ? $user_work_experience->from_date : '' }}
<i>to</i> {{ $user_work_experience->to_date }}</p>
</div>
</div>
#endforeach
#endif
</div>
</div>
After clicking the button this will work
<div class="modal fade" id="addWorkExperience" tabindex="-1" role="dialog" aria-labelledby="addExperience">
<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">Add Experience</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">From Date</div>
<input class="form-input datepicker" id="job_from_date" onblur="job_from_date()" onkeypress="job_from_date()" name="job_from_date" type="text" value="" placeholder="MM/DD/YYYY">
<label id="error_job_from_date" style="color:red"></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">To Date</div>
<input class="form-input datepicker" id="job_to_date" onblur="job_to_date()" onkeypress="job_to_date()" name="job_to_date" type="text" value=""
placeholder="MM/DD/YYYY">
<div class="be-checkbox">
<label class="check-box">
<input type="checkbox" name="job_current_date" id="job_current_date" onblur="job_current_date()" onkeypress="job_current_date()" value="{{ \Carbon\Carbon::now()->format('m/d/Y') }}" class="checkbox-input">
<span class="check-box-sign"></span>
</label>
<span class="large-popup-text"> Currently Work Here </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-default" data-dismiss="modal">
Close
</button>
<button type="button" onclick="add_job_experience()"
class="be-popup-sign-button">Add Experience
</button>
</div>
</div>
</div>
</div>
My Javascript code is
function add_job_experience() {
if (job_title() && company_name() && job_from_date() && (job_to_date() || job_current_date()) && job_description()) {
$.ajax(
{
type: 'POST',
url: '{{ URL::to('profile/edit/work/experience') }}',
data: {
'job_title': document.getElementById('job_title').value,
'company_name': document.getElementById('company_name').value,
'from_date': document.getElementById('job_from_date').value,
'to_date': document.getElementById('job_to_date').value,
'current_date': document.getElementById('job_current_date').value,
'description': document.getElementById('job_description').value
},
cache: false,
success: function (result) {
if (result == 1) {
alert('work experience add successful');
window.location.reload();
} else {
alert(result);
}
}
}
)
} else {
}
}
Please help me solving this.

This is simply done by adding this in javascript
jQuery('.datepicker').datetimepicker({
timepicker:false,
format:'m-d-Y'
});

Categories