Viewing and Updating Data throught Modal Box In Laravel - javascript

guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)

I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps

Related

Bootstrap Datepicker not Working on Server but works locally

My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?

How to clear modal's data in Angular after submiting values

I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...
How to remove them ?
For example here is my modal:
<div [id]="id" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content dash-modal-content">
<div class="modal-header dash-modal-header">
<button type="button" class="close dash-close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD PRODUCT</h4>
</div>
<form (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-xs-7">
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
<div class="col-sm-5">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
</div>
<div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
<label style="font-size: 2em">
<input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span class="checkbox-label-text">Is product active?</span>
</label>
</div>
</div>
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
</div>
</div>
</div><!--End of form horizontal-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of modal body-->
<div class="modal-footer">
<button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
</div>
</form>
</div><!--End of modal content-->
</div>
</div>
<div>
</div>
onSubmit I'm simply saving data to a database:
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
});
}
// $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}
I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...
Thanks guys
Cheers
Try
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
article = {}; // <---- Reset the variable
});
}
}

PHP Code Igniter cannot show data in modal bootstrap

I'm using codeigniter franmework. I try to appear the data into a modal. but i have a problem with my datas. They don't appear in modal. I followed the tutorial on the internet but it doesn't work. Here is my button click code which purposed to show data :
<a href="javascript:;"
data-id="<?php echo $row->id ?>"
data-kode="<?php echo $row->kode ?>"
data-subkode="<?php echo $row->subkode ?>"
data-nama_kegiatan="<?php echo $row->nama_kegiatan ?>"
data-toggle="modal" data-target="#edit-data">
<button data-target="#ubah-data" data-toggle="modal" class="btn btn-info">Ubah</button>
</a>
This is my modal code
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Ubah Data</h4>
</div>
<form class="form-horizontal" action="<?php echo base_url('dashboard/rka2/ubah')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Kode</label>
<div class="col-lg-10">
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="kode" name="kode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Subkode</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="subkode" name="subkode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Nama Kegiatan</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nama_kegiatan" name="nama_kegiatan">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="submit"> Simpan </button>
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
</div>
</form>
</div>
</div>
And this is the script for getting datas
<script>
$(document).ready(function() {
// Untuk sunting
$('#edit-data').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#id').attr("value",div.data('id'));
modal.find('#kode').attr("value",div.data('kode'));
modal.find('#subkode').attr("value",div.data('subkode'));
modal.find('#nama_kegiatan').attr("value",div.data('nama_kegiatan'));
});
});
</script>

How to get data from modal window?

I've a modal dialog.
<div id="myLoginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Войти в учетную запись</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-md-4 control-label" for="login">Логин</label>
<div class="col-md-4">
<input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Пароль</label>
<div class="col-md-4">
<input id="password" name="password" type="password" class="form-control input-md" required="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
...and have menu.php file.
<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;
How can I get and load in div element user's login and password from modal dialog when he is pressing submit button?
I've tried to write that, but it's not working - exception "undefined index $login and $password".
$(document).ready(function() {
$("#loginBttn").click(function() {
$("#content").load('menu.php');
});
});
You can submit the form and use the success callback:
$(document).ready(function() {
$("#loginBttn").click(function() {
$.post('menu.php', $("#myLoginModal form").serialize(), function(html){
$('#content').html(html);
}, 'html')
});
});
EDIT: Also you can check https://api.jquery.com/jquery.post/
I've just used PHP Tools for VS and I did it!
The problem was the default settings for the php interpreter v7.1 !

trouble sending modal form contents to PHP file with AJAX and Jquery

I'm trying to learn how to submit form data to a PHP file from a bootstrap modal. From the other questions I've seen, I thought I had it right, but I keep getting the error dialog. I must be missing something obvious.
test.php
<html>
<body>
<div class="container padding-top-10 change-width">
<div class="row padding-top-20" align="center">
<button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#bandModal">Add Band(s)</button>
</div>
</div>
<div id="thanks"></div>
<div class="modal fade" id="bandModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="bandModalLabel">
Add a Show
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body row">
<div class="container col-md-12">
<form id="addBandForm">
<h3>Band Details<small>Enter each band name and primary contact information...</small></h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button id="addBandSubmit" class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
<script src="js/newBand.js" type="text/javascript"></script>
</form>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>
Jquery
$(function() {
//twitter bootstrap script
$("#addBandSubmit").click(function() {
$.ajax({
type: "POST",
url: "womhScripts/addBand.php",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg)
$("#bandModal").modal('hide');
},
error: function(xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); }
});
});
});
addBand.php
<?php
if (isset($_POST['newBandName'])) {
$bandName = strip_tags($_POST['newBandName']);
$contact = strip_tags($_POST['primaryContact']);
$email = strip_tags($_POST['primaryEmail']);
$phone = strip_tags($_POST['primaryPhone']);
echo "bandName =".$bandName."</br>";
echo "contact =".$contact."</br>";
echo "email =".$email."</br>";
echo "phone =".$phone."</br>";
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>";
}?>
I looked through your code and found quite a few errors.
In your test.php change the Submit button from a button to an actual submit button.
<input id="addBandSubmit" type="submit" class="btn btn-primary pull-right">Submit</input>
In your Jquery
Add the preventDefault() function to stop the form from submitting to the same page.
$("#addBandForm").submit(function(event) {
event.preventDefault();
$.ajax({
url: "womhScripts/addBand.php",
type: "POST",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg);
$("#bandModal").modal('hide');
},
error:function(errMsg) {
console.log(errMsg);
}
});
});
You can read about what the preventDefault function here https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
In your addBand.php change the double quotes around your label label-info to single quotes. You cannot have double/single quotes inside double/single quotes inside php.
echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";
Also it helps to use the console to see exactly what is being posted using the Network tab in Chrome or Firefox .
Please mark this as the answer if it works for you. Hope this helps.

Categories

Resources