I'm currently working with Laravel Framework. I send all the records from one user about events, but if the user has more than one record of event then he needs to choose which event he would like to edit, i've already created the modal that shows all the events, but how can I obtain the selected event and fill all the inputs with that specific event?
Here is my code
Controller
public function dashboardEvents(){
//Brings all the info from the user events
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
//This is to know if there's more than one record
if(UserEvent::where('user_id', Auth::user()->id)->get()->count()>1) {
$data['multiple'] = true;
} else {
$data['multiple'] = false;
}
return view('user-pages/my-events', $data);
}
View
<title>User Dashboard</title>
<body class="html not-front not-logged-in no-sidebars page-node page-
<!-- Al the Inputs -->
<select class="form-control" style="margin-bottom: 15px;" id="user_roles">
<option value="bride">I am a bride</option>
<option value="groom">Im a groom</option>
<option value="groomsman">Im a guest</option>
<option value="wedding_planner">Im a wedding planner</option>
</select>
<input type="text" class="form-control" style="margin-bottom: 15px;">
<div class="input-group date" data-provide="datepicker" style="margin-bottom: 15px;">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<select class="form-control" style="margin-bottom: 15px;" id="party-type">
<option id="wedding">Wedding</option>
<option id="party">Party</option>
<option id="prom">Prom</option>
</select>
<select class="form-control" style="margin-bottom: 15px;" id="user-task">
<option>I am shopping for just Groomsmen</option>
<option>I am shopping for me</option>
</select>
<input type="text" class="form-control" id="phone_number_user" style="margin-bottom: 15px;">
<input type="text" class="form-control" id="usr" style="margin-bottom: 15px;" placeholder="New Password">
Modal
<div class="modal fade" id="UserDashboardModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Choose an Event to Edit</h4>
</div>
<div class="modal-body">
<select class="form-control">
#foreach($event as $key=>$cat)
<option value="{{ $cat->user_event_id }}">{{ $cat->name }}</option>
#endforeach
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="modalFromEventButton">Select</button>
</div>
</div>
</div>
The script to open the Modal
<script>
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
});
</script>
How can I obtain the selected event? And upload the inputs automatically wich the correct data?
I would change your query a little as now you're querying the userEvents twice. You can get the count from your first result set:
Controller:
public function dashboardEvents()
{
// Get all the event ids for the user.
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
// Check count.
$data['multiple'] = $data['events']->count() > 1 ? true : false;
// Return view.
return view('user-pages/my-events', $data);
}
Update your Blade with form elements for the edit form wrapped with an id corresponding with the userEvent ID below the select in your modal.
Blade:
<form action="/your/update/route" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
#foreach($event as $key => $cat)
<div id="cat-{{ $cat->user_event_id }}" style="display:none">
<!-- build your form elements for update -->
</div>
#endforeach
</form>
Update your script with a select box event in which you decide which form gets shown to the user.
Script:
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
$('.modal-body select').change(function() {
// Get selected userEventId.
var userEventId = $('.modal-body select option:selected').val();
// Change your form with $('#cat-' + userEventId)
// code...
});
});
Final note: It might be better to query only id & name to pre-populate your select on the dashboard (as a user might have a lot of userEvents). And then fetch the complete data on a seperate call on selection of an event by the user with ajax. Good luck!
Related
I am trying to show error messages on toast. I have a form with a submit button as below.
my html form is:
file.html
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer"> <button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button></div>
</form>
And js is
$(function () {
$('.select2').select2()
toastr.error('Error...') // I want to display msg from context instead
})
The form action is
menu.html
<li class="nav-item ">
<a href="/fileupload/" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p> File Upload </p>
</a>
</li>
My python code is
fileupload.py
def file_execution(request):
try:
#something processing
except Exception as Er:
print('Er:',Er)
context['msg'] = 'Some error occured !!'
return render(request,'file.html',context)
urls.py
path('fileupload/', fileupload.file_execution, name='fileupload'),
If I change the button type to type="button", I will get the toastr. How can I add toastr message to my type="submit" button tag.
The click on File Upload menu of menu.html render file.html page.
I want to show the context message in the toastr on submitting the form
You're doing it wrong.
Here you get a toast on button click... no matter what the server answer. No matter if there is a request.
This is not what you want to do.
$(function () {
$('.toastrDefaultError').click(function() {
toastr.error('Error...')
});
})
<button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button>
Change the form to remove the toast
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Upload File</button>
</div>
</form>
On submitting, the server do his job and give the same page, with a success message or an error message. I put both in the example but don't code that.
<form method="post" enctype="multipart/form-data" >
<div class="form-group">
<label>Select Layer Type</label>
<select class="form-control select2" style="width: 100%;">
<option value="vector">Vector Layer</option>
<option value="rasterfile">Raster Image</option>
</select>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Upload File</button>
</div>
<p class='errorMsg'>There is an error</p>
<p class='successMsg'>There is an error</p>
</form>
Verify everything works correctly, then use this JS
$(function () {
//Find every errorMsg on the page and toast them
$('.errorMsg').each( e => {
const txt = $(e).text();
toastr.error(txt)
})
//Find every successMsg on the page and toast them
$('.successMsg').each( s => {
const txt = $(s).text();
toastr.tost(txt)
})
})
screenshot2
screenshot1
I have 4 fields in a form
Product Field.
Brand Field.
Services Field.
I want to show them all in the index, but when i go to the product url i want to show only product field and services field
I have tried .show and hide method but it's hiding the field for all url
I am trying this method to hide and Now it's hiding as per my request but compromising in the form field, and I don't want that there's an empty blank space.
The issue was different and it fixed now what I did was I created a different id and call the particular id, without compromising the margin and all and it's working like charm now.
<div style="display:none;" class="appointment" id="booking-form-modal" data-backdrop="static" data-keyboard="false">
<form method="POST" action="/submit-request" onsubmit="submitRequest();">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="productDropdown" class="form-control" name="product" required>
<option value="">Select Products</option>
#foreach($products as $product)
<option value="{{ $product['id']}}">{{ $product['name']}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="serviceDropdown" class="form-control" name="services" required>
<option value="">Select Services</option>
</select>
</div>
</div>
</div>
</form>
</div>
Script to redirect as per the request
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('brandDropdown').style.display = 'none';
}
});
</script>
How does your url look like and when do you call the provided snippet?
Could you also provide a more detailed example of your code?
I guess you want to hide the elements "onload"?
If so, then you need to wait until your elements are loaded.
window.addEventListener('load', function() {
if(/repair/.test(window.location.href))
{
document.getElementById('brandDropdown').closest('.row').style.display = 'none';
}
});
The solution was, I added another id so that it didn't compromise my form fields, kindly find the solution below.
<div id="branddrop-row" class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
And here is the script for hiding as per the request. I call the div id instead of select id so that it didn't compromise my form fields.
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('branddrop-row').style.display = 'none';
}
});
</script>
I need one help.I need to set drop down value as blank after finishing one action using Angular.js.I am explaining my code below.
<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
<option value="">Select Status</option>
<option value="In-progress">IN-PROGRESS</option>
<option value="Dispatch">DISPATCH</option>
<option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
<option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
</select>
</div>
</div>
from the above list when user is selecting DISPATCH the below form is opening.
<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
<div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="col-md-12 text-right">
<button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
</div>
</div>
</div>
The controller side code for this action is given below.
$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
if(order_status=='Dispatch'){
$scope.viewOrderTable=false;
$scope.viewDispatch=true;
pro_dataId=prodataid;
order_Id=orderid;
dStatus=order_status;
email=email;
}
}
When user is clicking on back button its again coming to its original state but drop down DISPATCH option is displaying where i need to reset the drop down list again.
$scope.clearDispatchData=function(){
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
}
I did like above but its not resetting .Please help me to resolve this issue.
You can use ng-init for this in your html file
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>
May be digest issue you can try using $timeout so you should inject $timeout in your controller before use.
$scope.clearDispatchData=function(){
$timeout(function() {
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
});
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Issue:
I have a modal window with input fields that trigger a disabled save button once filled in. I now want to integrate a select box into this modal instead of the normal text inputs and can't figure out how to get the script to recognize them seeing as it's not a true text input, it's a select. I have an example here of the working code prior to addition of the select box: DEMO
Question:
What do I need to place in my script to be able to use the select fields instead of input fields? I think it may have something to do with telling it to look for a variable coming from a text input rather than an option coming from a select. This is an example of what I want to work: DEMO
Thanks!
You cannot listen to the keyup event as <select></select> elements do not use this in the same way as <input></input> elements. In order to listen for a change in the selected option you need to use the .change() event.
You cannot use the placeholder="" attribute on a <select></select> as the element will select by default the first <option></option> child. Change this to having the first option as <option val="">Please Select</option> or similar.
You have to check the selected option of a <select></select> in order to see if the value is blank. To do this you have to use $('#select').find('option:selected').val() == "").
Full Code:
HTML:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="projectName" value="Johnny Appleseed" style="display: inline; width: 325px;">
</div>
<div class="cloudcontainer">
<!-- NEW FIELD ADDED HERE -->
</div>
Add New Field
</form>
</div>
</div>
</div>
<!-- MODAL -->
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">New Field</h3>
</div>
<div class="modal-body">
<form role="form">
<div class="field">
<label>State:</label>
<select id="fieldtitle">
<option value="">Enter State</option>
<option value="AL">Alabama</option>
<option value="AL">Alaska</option>
<option value="AL">Arkansas</option>
</select>
<br>
<br>
<label>City:</label>
<select id="fieldtitle">
<option value="">Enter City</option>
<option value="BR">Burmingham</option>
<option value="JN">Juneau</option>
<option value="LR">Little Rock</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="clickme" disabled="disabled" data-dismiss="modal">Save changes</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".field select").change(function(){
var empty = false;
$(".field select").each(function(){
if ($(this).find('option:selected').val() == "") {
empty = true;
}
});
if(empty) {
$("#clickme").attr('disabled', 'disabled');
} else {
$("#clickme").attr('disabled', false);
}
});
});
Link to bootply: http://www.bootply.com/1cpZMLBuwv
Instead of listening to the keyup event you need to use the change event to know when the value of the select fields has change.
$(".field select").change(function(){ ...
problem is when i click the button whole page refresh, which certainly i do not want as i am trying to submit the form through Ajax.
$('#createFormBtn').on('click', function(e){
e.stopImmediatePropagation();
e.preventDefault();
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData/*,
success: function(output){
if (output == true){
oTable.fnReloadAjax();
}
}*/
});
});
i added this code
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
because i need to Trigger the Submit, As the validation in my Form will not work. This Button is not inside the <form> tags.
But now it is giving the problem as if i click this button whole page refresh..
HTML if anyone wants to see..
<div id="addNewFormModal" class="modal fade">
<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 style='color: #666666' class='fa fa-edit fa-fw fa-1x'></i>Edit</h4>
</div>
<div class="modal-body">
<div class="body collapse in" id="div-1">
<form class="form-horizontal" id="block-validate">
<div class="form-group">
<label class="control-label col-lg-4" for="text1">Form Name</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formName" placeholder="Form Name" id="cFormName">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4" for="pass1">Form Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formPath" placeholder="Form Path" id="cFormPath">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Form CI Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formCIPath" placeholder="Form CI Path" id="cFormCIPath">
</div>
</div><!-- /.form-group -->
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Select Tab</label>
<div class="col-lg-8" id="selectTabName">
<input type='hidden' class="required" name='selectTab' id='selectTab'/>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Have Parent</label>
<div class="col-lg-8" id="haveParentDiv">
<input class="make-switch" id="haveParent" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
<div class="form-group" id="selectParentMenu_MainDiv" style="display: none">
<label class="control-label col-lg-4">Parent Form</label>
<div class="col-lg-8" id="selectParentMenuDiv">
<input type='hidden' name='input' id='selectParentMenu'/>
</div>
</div>
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Menu Order</label>
<div class="col-lg-8" id="selectMenuOrder">
<select class="commonGeneralSelect2 required" name="selectMenuOrder">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Show on Menu</label>
<div class="col-lg-8" id="isMenuLink_createSwitchDiv">
<input class="make-switch" id="isMenuLink_createSwitch" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
{{*<input type="submit" value="Validate" class="btn btn-primary">*}}
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="createFormBtn">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --><!-- /#Edit Button Modal -->
Replace all this...
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
with only this...
$('#block-validate').valid();
There is no need to trigger a submit to get the form to validate when you can simply use the .valid() method. It will trigger validation without submitting the form. (You should edit your OP to mention the jQuery Validate plugin and show the code.)
EDIT:
Actually, your ajax() should really be within the submitHandler callback of the .validate() method. As per documentation, it's "the right place to submit a form via Ajax...".
So instead of the simple suggestion I made above, do this instead...
// click handler is needed since this button is not a 'submit' type button
$('#createFormBtn').on('click', function(e){
// block default action of button click
e.stopImmediatePropagation();
e.preventDefault();
// submit the form -> will validate AUTOMATICALLY
$('#block-validate').submit();
});
and put the ajax in the submitHandler callback within your .validate() method...
$('#block-validate').validate({
// your other rules and options here,
submitHandler: function(form) { // only fires on valid form
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData
});
}
});
Please note that most people use jQuery .serialize() instead of manually creating an array with every field attached to a .val().
data: $(form).serialize()
You are manually triggering a form submit:
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
as #block-validate is your form element.
You are trying to submit your form via ajax, so there is absolutely no reason to trigger a form submit manually. Just remove this block, make your ajax request and the form will be posted.
Also note that the e variable in your trigger function is not the form-submit event you expect it to be, check the manual on trigger().
Why do you even trigger the submit at all? Purely for the form validation?
You'll need to really recreate that validation.. the problem is you're unbinding the validation completely when you use preventDefault() and stopImmediatePropogation() below:
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
You really want to just re-validate the form (this is pseudo code which almost surely will not work). I cannot tell what is being used to validate your form above, but if you provide I will edit my answer for you.
$('#createFormBtn').on('click', function(e){
$('#block-validate').validate()
//continue with rest of form submission