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)
})
})
Related
My Bootstrap validation works fine in form-control, see below image
My Code is:
<form role="form" data-toggle="validator" id="myform">
<div class="form-group">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Teacher" id="ddlMultiTeacher" style="background-color: white" required>
<%--<option value="">None</option>--%>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Subject" id="ddlMultiSubject" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Class" id="ddlMultiClass" style="background-color: white" required>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Section" id="ddlMultiSection" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-2">
<%-- <button id="btnSubmit2" class="btn btn-primary btn-block">Save</button>--%>
<input id="btnGenerateSchedule" class="btn btn-primary btn-block" type="submit" value="Save" />
</div>
</div>
</div>
</form>
but whenever I use my buttonsubmit code via jquery, my validation stops working.
$('#btnGenerateSchedule').click(function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})
Can anyone tell me what I'm doing wrong? am I missing some plugins ?
When you write jquery submit or click event, then bootstrap or html validation does not work. If you want html/bootstrap validation should work before jquery click/submit event then do as follows:
$('#btnGenerateSchedule').click(function (e) {
if($("form")[0].checkValidity()){
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
} else {
//console.log("User declined dialog");
}
});
} });
$("form")[0]) depends on form in page. If it is first form in your page, then form[0], if it is second form in your page, then $("form")1) and so on.
For detail, you can visit link: html and jquery validation together
Try this,
$('form').on('click','#btnGenerateSchedule',function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})
I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.
You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"
Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});
If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
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!
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='';
});
}