Added Fine Uploader and can't upload files - fine-uploader

Can't seem to get this to work. I have literally tried everything. Can anyone help me please. I have been trying to figure this out for some time now and about to give up with this plugin. The errors I am getting are not really telling me anything at all. The uploads folder has the proper permissions.
I basically created a new c# Web Application and added the following: http://docs.fineuploader.com/quickstart/02-setting_options.html
PLEASE HELP
<!-- Fine Uploader -->
<script src="../Scripts/fineuploader/fine-uploader.min.js" type="text/javascript"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">No</button>
<button class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">Cancel</button>
<button class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<script>
var uploader = new qq.FineUploader(
{
debug: true,
element: document.getElementById('fine-uploader'),
request: {
endpoint: '/Uploads'
},
deleteFile: {
enabled: true,
endpoint: '/Uploads'
},
retry: {
enableAuto: true
},
callbacks: {
onError: function (id, name, errorReason, xhrOrXdr) {
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
}
}
});
</script>

Figured it out finally, I added a HttpHandler and changed the request endpoint to point to the handler.
public class ImageUploader : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
Stream str = context.Request.InputStream;
BinaryReader br = new BinaryReader(str);
Byte[] FileContents = { };
string UploadFile = string.Empty;
bool IE = false;
if (context.Request.Browser.Browser == "IE")
{
IE = true;
HttpFileCollection MyFiles = HttpContext.Current.Request.Files;
HttpPostedFile PostedFile = MyFiles[0];
if (!PostedFile.FileName.Equals(""))
{
String fn = Path.GetFileName(PostedFile.FileName);
br = new BinaryReader(PostedFile.InputStream);
UploadFile = fn;
}
}
if (IE)
{
HttpContext.Current.Request.Files[0].SaveAs(HttpContext.Current.Server.MapPath("~/uploads/" + UploadFile));
}
else
{
HttpContext.Current.Request.Files[0].SaveAs(HttpContext.Current.Server.MapPath("~/uploads/" + HttpContext.Current.Request.Files[0].FileName));
}
HttpContext.Current.Response.Write("{\"success\":true}");
}
catch (Exception Ex)
{
HttpContext.Current.Response.Write("{\"error\":}" + Ex.Message);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}

Related

Laravel Ajax Add To Cart Not working 500 internal error

I have code I am working on. I will list the page, the route, and the controller code. When I inspect and click on the add to cart button I get 500 internal server error and I cannot figure out what I did. It should be giving a message checking to see if the item is already in the cart and if not send a message saying item is in the cart but I can't get past the 500 internal server error.
Page
#extends('layouts.frontend.frontend')
#section('title')
Distinctly Mine - {{$products->name}}
#endsection
#section('content')
<div class="py-3 mb-4 shadow-sm babyblue border-top">
<div class="container">
<h6 class="mb-0">Collections / {{$products->category->name}} / {{$products->name}}</h6>
</div>
</div>
<div class="container">
<div class="card-shadow shadow-sm product_data">
<div class="card-body">
<div class="row">
<div class="col-md-4 border-right">
<div class="img-hover-zoom img-hover-zoom--xyz card-img-top">
<img src="{{ asset('backend/uploads/products/'.$products->image) }}" class="w-100 h-100" alt="{{$products->name}}">
</div>
</div>
<div class="col-md-8">
<h2 class="mb-0">{{ $products->name}}</h2>
<hr>
<label for="" class="me-3">Price: ${{$products->original_price}}</label>
<p class="mt-3">{!! $products->small_description !!}</p>
<hr>
#if($products->qty > 0)
<label for="" class="badge bg-success text-dark fw-bold">In Stock</label>
#else
<label for="" class="badge bg-danger text dark fw-bold">Out of Stock</label>
#endif
<div class="row mt-2">
<div class="col-md-2">
<input type="hidden" value="{{$products->id}}" class="prod_id">
<label for="Quantity">Quantity</label>
<div class="input-group text-center mb-3" style="width:130px">
<button type="button" class="input-group-text decrement-btn">-</button>
<input type="text" name="quantity" value="1" class="form-control qty-input" />
<button type="button" class="input-group-text increment-btn">+</button>
</div>
</div>
<div class="col-md-10">
<br />
<button type="button" class="btn btn-warning text-dark fw-bold ms-3 float-start"><i class=" me-1 fa fa-heart text-danger me-1"></i>Add To Wishlist</button>
<button type="button" class="btn btn-success ms-3 float-start text-dark fw-bold addToCartBtn"><i class="me-1 fa fa-shopping-cart text-dark me-1"></i>Add to Cart</button>
</div>
<hr>
<h2>Description</h2>
{{$products->description}}
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('scripts')
<script>
$(document).ready(function (){
$('.addToCartBtn').click(function (e){
e.preventDefault();
var product_id = $(this).closest('.product_data').find('.prod_id').val();
var product_qty = $(this).closest('.product_data').find('.qty-input').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: "POST",
url: "/add-to-cart",
data: {
'product_id': product_id,
'product_qty': product_qty,
},
dataType: "dataType",
success: function (response){
alert(response.status);
}
});
});
$('.increment-btn').click(function (e){
e.preventDefault();
var inc_value = $('.qty-input').val();
var value = parseInt(inc_value,10);
value = isNaN(value) ? 0 :value;
if(value < 10)
{
value++;
$('.qty-input').val(value);
}
});
$('.decrement-btn').click(function (e){
e.preventDefault();
var dec_value = $('.qty-input').val();
var value = parseInt(dec_value,10);
value = isNaN(value) ? 0 :value;
if(value > 1)
{
value--;
$('.qty-input').val(value);
}
});
});
</script>
#endsection
Route
Route::middleware(['auth'])->group(function (){
Route::post('/add-to-cart',[CartController::class,'addProduct']);
});
Controller
<?php
namespace App\Http\Controllers\Frontend;
use App\Models\Product;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
class CartController extends Controller
{
public function addProduct(Request $request)
{
$product_id = $request->input('product_id');
$product_qty = $request->input('product_qty');
if(Auth::check())
{
$prod_check = Product::where('id',$product_id)->first();
if($prod_check)
{
if(Cart::where('prod_id',$product_id)->where('user_id',Auth::id())->exists())
{
return response()->json(['status' => $prod_check->name." Already Added to cart"]);
}else{
$cartItem = new Cart();
$cartItem->prod_id = $product_id;
$cartItem->user_id = Auth::id();
$cartItem->prod_qty = $product_qty;
$cartItem->save();
return response()->json(['status'=>$prod_check->name." Added to cart"]);
}
}
}
else{
return response()->json(['status'=> "Login To Continue"]);
}
}
}

Uncaught (in promise) Error: Request failed with status code 405 VUEJS

so i'm trying to consume an api form laravel via vue.js this is the login page were i did call axios.post :
<template>
<main>
<section class="login-content">
<div class="container h-100">
<div
class="row align-items-center justify-content-center h-100"
>
<div class="col-12">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="mb-2">Sign In</h2>
<p>
To Keep connected with us please login with
your personal info.
</p>
<form>
<div class="row">
<div class="col-lg-12">
<div
class="floating-label form-group"
>
<input
class="floating-input form-control"
type="email"
v-model="data.email"
placeholder=" "
/>
<label>Email</label>
</div>
</div>
<div class="col-lg-12">
<div
class="floating-label form-group"
>
<input
class="floating-input form-control"
type="password"
v-model="data.password"
placeholder=" "
/>
<label>Password</label>
</div>
</div>
<div class="col-lg-6">
<div
class="custom-control custom-checkbox mb-3"
>
<input
type="checkbox"
class="custom-control-input"
id="customCheck1"
/>
<label
class="custom-control-label"
for="customCheck1"
>Remember Me</label
>
</div>
</div>
<div class="col-lg-6">
<a
href="auth-recoverpw.html"
class="text-primary float-right"
>Forgot Password?</a
>
</div>
</div>
<button
type="sumbit"
class="btn btn-primary"
#click="login" :disabled="isLogging" :loading="isLogging"
>
Sign In
</button>
<p class="mt-3">
Create an Account
<router-link to="/" exact
>Sign Up</router-link
>
</p>
</form>
</div>
<div class="col-lg-6 mb-lg-0 mb-4 mt-lg-0 mt-4">
<img
src=" asset (html/assets/images/login/01.png)"
class="img-fluid w-80"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
<script>
export default {
data() {
return {
data: {
email: "",
password: ""
},
isLogging: false
};
},
methods: {
async login() {
if (this.data.email == "") return alert("Email is required")
if (this.data.password == "") return alert("Password is required")
/* if(this.data.password.length<6) return this.e ('Incorrect') */
this.isLogging = true
const axios = require('axios')
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Method": "POST",
"Content-Type": "application/json",
}
axios.post('http://127.0.0.1:8000/?#/login/',{
email: this.email, password: this.password
}, headers)
.then((response)=>{
const data=response.data;
console.log(data);
})
this.isLogging = false
}
},
mounted() {
console.log("Component mounted.");
}
};
</script>
the step of confirmation : email and password are working well but i got the error when i press the button
and this is the login page as u can see : this is the login page as u can see
i was follwing this tuto but like always i had error unlike the man in the tuto this is the link of the tuto
and this is the route :
Route::post('login', 'App\Http\Controllers\Api\AuthController#login');

Failed to load resource: the server responded with a status of 500 (Internal Server Error) dynamic api

downloaded latest(3.0) boilerplate with zero.
Followed up the task creator application implementation on codeproject.com
I have added simple entity (Clients) instead of tasks.
The displaying of tasks work fine. However, when I try to add a new client the it seems that the dynamic api is not available and I get the following error:
ClientsController:
`[AbpMvcAuthorize]
public class ClientsController : MyAppControllerBase
{
private readonly IClientAppService _clientService;
public ClientsController(IClientAppService clientService)
{
_clientService = clientService;
}
public async Task<ViewResult> Index(GetAllClientsInput input)
{
var output = await _clientService.GetAll(input);
var model = new Web.Models.Clients.IndexViewModel(output.Items);
return View("Index", model);
}
public async Task Create(CreateClientInput input)
{
await _clientService.Create(input);
}
public async Task Delete(CreateClientInput input)
{
await _clientService.Create(input);
}
}`
Index.js:
(function() {
$(function() {
var _clientService = abp.services.app.client;
var _$modal = $('#ClientCreateModal');
var _$form = _$modal.find('form');
_$form.validate();
_$form.find('button[type="submit"]').click(function (e) {
e.preventDefault();
if (!_$form.valid()) {
return;
}
var client = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js
abp.ui.setBusy(_$modal);
_clientService.create(client).done(function () {
_$modal.modal('hide');
location.reload(true); //reload page to see new user!
}).always(function () {
abp.ui.clearBusy(_$modal);
});
});
_$modal.on('shown.bs.modal', function () {
_$modal.find('input:not([type=hidden]):first').focus();
});
});
})();
Index.cshtml
#section scripts
{
<environment names="Development">
<script src="~/js/views/clients/Index.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="~/js/views/clients/Index.min.js" asp-append-version="true"></script>
</environment>
}
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
#L("Clients")
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body table-responsive">
<table class="table">
<thead>
<tr>
<th>#L("UserName")</th>
<th>#L("FullName")</th>
<th>#L("EmailAddress")</th>
<th>#L("IsActive")</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model.Clients)
{
<tr>
<td>#user.FirstName</td>
<td>#user.LastName</td>
<td>#user.Email</td>
<td>#user.Mobile</td>
</tr>
}
</tbody>
</table>
<button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" data-toggle="modal" data-target="#ClientCreateModal">
<i class="material-icons">add</i>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ClientCreateModal" tabindex="-1" role="dialog" aria-labelledby="ClientCreateModalLabel" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form name="userCreateForm" role="form" novalidate class="form-validation">
<div class="modal-header">
<h4 class="modal-title">
<span>#L("CreateNewClient")</span>
</h4>
</div>
<div class="modal-body">
<div class="form-group form-float">
<div class="form-line">
<input class="form-control" type="text" name="FirstName" required maxlength="#AbpUserBase.MaxUserNameLength" minlength="2">
<label class="form-label">#L("FirstName")</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="text" name="LastName" class="form-control" required maxlength="#AbpUserBase.MaxNameLength">
<label class="form-label">#L("LastName")</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="text" name="Mobile" class="form-control" required maxlength="#AbpUserBase.MaxSurnameLength">
<label class="form-label">#L("Mobile")</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="email" name="Email" class="form-control" required maxlength="#AbpUserBase.MaxEmailAddressLength">
<label class="form-label">#L("Email")</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">#L("Cancel")</button>
<button type="submit" class="btn btn-primary waves-effect">#L("Save")</button>
</div>
</form>
</div>
</div>
</div>
client service :
[AbpAuthorize(PermissionNames.Pages_Tenants)]
public class ClientAppService : ApplicationService, IClientAppService
{
private readonly IRepository<Client> _clientRepository;
public ClientAppService(IRepository<Client> clientRepository)
{
_clientRepository = clientRepository;
}
public async Task<ListResultDto<ClientListDto>> GetAll(GetAllClientsInput input)
{
var clients = await _clientRepository
.GetAll().ToListAsync<Client>();
return new ListResultDto<ClientListDto>(
ObjectMapper.Map<List<ClientListDto>>(clients));
}
public async Task Create(CreateClientInput input)
{
var task = ObjectMapper.Map<Client>(input);
await _clientRepository.InsertAsync(task);
}
}
the server does not get hit at all on the create action.
any idea what I am missing?
I think there's a misunderstanding with IMustHaveTenant interface. When you derive an entity from IMustHaveTenant you cannot use that entity in host environment. The host has no tenant id. As far as i understand clients are belonging to tenants. So what you have to do is, remove the Clients page from host menu. Whenever you want to see clients of tenants, just use impersonation.
To show/hide specific menu items you can use requiredPermissionName. A permission can be configured to use just for tenants/host/both. So create a new permission which is configured to be used for tenants. Set that permission while you create new MenuItemDefinition for clients page. That's it!
Read => https://aspnetboilerplate.com/Pages/Documents/Navigation?searchKey=navigation#registering-navigation-provider

Theme animations don't play

I'm using ABP 2.1.2 and on a form I have some controls hidden in a <div> with an *ngIf but when the <div> is revealed the floating labels don't animate so the user's text is badly merged with the label text.
component.html
<div bsModal #createServiceProviderModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog"
aria-labelledby="createDigitalAssetModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
<div #modalContent class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<span>{{l("CreateNewServiceProvider")}}</span>
</h4>
</div>
<div id="identify" *ngIf="step == 'identify'">
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input materialInput id="emailAddress" type="email" name="EmailAddress" [(ngModel)]="serviceProvider.emailAddress" required class="validate form-control">
<label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button class="btn btn-info waves-effect" (click)="findServiceProvider()">
{{l("Next")}}
</button>
</div>
</div>
<form *ngIf="active" #createServiceProviderForm="ngForm" id="frm_create_serviceProvider" novalidate (ngSubmit)="save()">
<div id="add" *ngIf="step == 'create'">
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="companyName" type="text" name="CompanyName" [(ngModel)]="serviceProvider.companyName" required class="validate form-control">
<label for="companyName" class="form-label">{{l("CompanyName")}}</label>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="name" type="text" name="Name" [(ngModel)]="serviceProvider.name" required class="validate form-control">
<label for="name" class="form-label">{{l("Name")}}</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="surname" type="text" name="Surname" [(ngModel)]="serviceProvider.surname" required class="validate form-control">
<label for="surname" class="form-label">{{l("Surname")}}</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="emailAddress" type="text" name="emailAddress" [(ngModel)]="serviceProvider.emailAddress" disabled class="validate form-control">
<label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
{{l("Save")}}
</button>
</div>
</div>
<div id="identify" *ngIf="step == 'confirm'">
<div class="modal-body">
<span class="text-success">{{l('ServiceProviderAlreadyExists')}}</span>
<br>
<table class="table">
<tr>
<td class="col-span-3"><label class="pull-right">{{l('Name')}}</label></td>
<td>{{serviceProvider.name}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Surname')}}</label></td>
<td>{{serviceProvider.surname}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Company')}}</label></td>
<td>{{serviceProvider.companyName}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Email Address')}}</label></td>
<td>{{serviceProvider.emailAddress}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
{{l("Save")}}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
component.ts
import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef } from '#angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { ServiceProviderServiceProxy, ServiceProviderDto } from '#shared/service-proxies/service-proxies';
import { AppComponentBase } from '#shared/app-component-base';
#Component({
selector: 'create-service-provider-modal',
templateUrl: './create-service-provider.component.html'
})
export class CreateServiceProviderComponent extends AppComponentBase {
#ViewChild('createServiceProviderModal') modal: ModalDirective;
#ViewChild('modalContent') modalContent: ElementRef;
#Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
serviceProvider: ServiceProviderDto = new ServiceProviderDto({id: 0, isUser: false});
step: string = "identify";
active: boolean = false;
saving: boolean = false;
constructor(
injector: Injector,
private serviceProviderService: ServiceProviderServiceProxy,
) {
super(injector);
}
show(): void {
this.active = true;
this.modal.show();
this.serviceProvider = new ServiceProviderDto({id: 0, isUser: false});
this.step = "identify";
}
onShown(): void {
$.AdminBSB.input.activate($(this.modalContent.nativeElement));
}
save(): void {
this.saving = true;
this.serviceProviderService.create(this.serviceProvider)
.finally(() => { this.saving = false; })
.subscribe(() => {
this.notify.info(this.l('SavedSuccessfully'));
this.close();
this.modalSave.emit(null);
});
}
close(): void {
this.active = false;
this.modal.hide();
}
findServiceProvider(): void {
this.saving = true;
abp.ui.setBusy();
this.serviceProviderService.getUserAsProvider(this.serviceProvider.emailAddress)
.finally(() => {
this.saving = false;
abp.ui.clearBusy();
})
.subscribe((next) => {
console.log(next);
if (next.id !== undefined) {
this.serviceProvider = next;
this.step = "confirm";
}
else {
this.step = "create";
}
})
}
}
Issue
When this modal is displayed the variable step is set to "identify" and the first section is displayed where the user must capture the service provider's email address. When the user clicks 'Next' I check if the service provider already exists and then change step to either "create" or "confirm". When the div for creating a service provider is displayed the labels for the input don't animate
Presumably I must re-run some kind of animation script but I cannot figure out what. Please help!
I think the problem was that I needed to call onShown() after revealing the div

How to use one form and action class on multiple pages JSP

How to use same form beans and action class on multiple pages? do i need to create one form bean and action class that exactly have same variable for other JSP pages? thanks in advance. How to use those form and action class in Dashboard.jsp? i just want to display data of vendor in dashboard.jsp.
below is example code:
VendorInfoForm.java
package com.pms.reference;
import com.base.utility.DateUtil;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionMapping;
public class VendorInfoForm extends org.apache.struts.action.ActionForm {
private String vivendorID;
private String vivendorShortname;
private String vivendorName;
public String getVivendorID() {
return vivendorID;
}
public void setVivendorID(String vivendorID) {
this.vivendorID = vivendorID;
}
public String getVivendorName() {
return vivendorName;
}
public void setVivendorName(String vivendorName) {
this.vivendorName = vivendorName;
}
public String getVivendorShortname() {
return vivendorShortname;
}
public void setVivendorShortname(String vivendorShortname) {
this.vivendorShortname = vivendorShortname;
}
public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
ActionErrors errors = new ActionErrors();
return errors;
}
}
VendorInfoAction.java
package com.pms.reference;
import com.base.constant.MessageConstant;
import com.base.utility.BaseUtil;
import com.base.utility.DateUtil;
import com.hbs.base.entities.ComAccessLevel;
import com.hbs.base.entities.ComUserProfiles;
import com.hbs.base.entities.ComAccessLevel;
import com.htp.web.base.BaseAction;
import com.htp.web.base.constant.PageConstant;
import com.htp.web.utility.WebUtil;
import com.pms.reference.entities.ASVendorInfo;
import com.pms.reference.entities.HDPersonInfo;
import com.pms.reference.entities.RefState;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class VendorInfoAction extends BaseAction {
private final static String JSP_LIST = "/jspNew/pms/reference/VendorInfoList.jsp";
private final static String JSP_CREATE = "/jspNew/pms/reference/VendorInfoCreate.jsp";
private final static String JSP_READ = "/jspNew/pms/reference/VendorInfoRead.jsp";
private final static String JSP_UPDATE = "/jspNew/pms/reference/VendorInfoUpdate.jsp";
public ActionForward executeAction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
VendorInfoForm formBean = (VendorInfoForm)form;
String action = WebUtil.getStrInput(request, "hdAction");
String nextJSP = "";
try {
if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.MENU) ||
BaseUtil.isEqualsCaseIgnore(action, PageConstant.LIST) ||
BaseUtil.isEqualsCaseIgnore(action, PageConstant.GET_SORTING)) {
nextJSP = getList(request, action);
}
else if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.GET_CREATE)) {
nextJSP = getCreate(request, action);
}
else if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.CREATE) ||
BaseUtil.isEqualsCaseIgnore(action, PageConstant.UPDATE)) {
nextJSP = doCreateOrUpdate(request, action, formBean);
}
else if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.DELETE)) {
nextJSP = doDelete(request, action);
}
else if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.GET_READ)
|| BaseUtil.isEqualsCaseIgnore(action, PageConstant.GET_UPDATE)) {
nextJSP = getReadOrUpdate(request, action);
}
}
catch(Exception e){
e.getMessage();
}
return new ActionForward(nextJSP);
}
private String getList(HttpServletRequest request, String action) throws Exception{
ComUserProfiles profile = (ComUserProfiles)request.getSession().getAttribute("PROFILE");
lookupComAccessLevel();
ComAccessLevel accessLevel = comAccessLevelFacade.find(profile.getAclId());
request.setAttribute("accessLevel", accessLevel);
String input = WebUtil.getStrInput(request, "txtSchAll");
input = BaseUtil.replaceQuickSearch(input);// modified by din 20/05/2015
String pageNo = WebUtil.getStrInput(request, "hdPgNo");
String sortOrder = "";
String sortId = WebUtil.getStrInput(request, "sortId");
if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.MENU)) {
manageCommonSession(request, "Vendor");
}
// ----------------- Start Sorting -------------//
manageSortingSession(request, sortId);
sortId = BaseUtil.getStr(request.getSession().getAttribute("sortingId"));
sortOrder = BaseUtil.getStr(request.getSession().getAttribute("sortingOrder"));
// ------------------ End Sorting --------------//
Integer maxNo = BaseUtil.getInt(request.getSession().getAttribute("DISPLAY"));
Integer firstNo = ((pageNo!=null && !pageNo.equalsIgnoreCase("")?Integer.parseInt(pageNo):1) - 1) * maxNo;
lookupASVendorInfo();
int[] range = new int[]{firstNo, maxNo};
List<ASVendorInfo> list = aSVendorInfo.findAll(input, range, sortId, sortOrder);
int totalRecord = aSVendorInfo.findTotal(input);
request.setAttribute("list", list);
request.setAttribute("currentpageno", pageNo);
request.setAttribute("totalrecords", String.valueOf(totalRecord));
request.setAttribute("noofpages", String.valueOf(totalRecord / range[1] + (totalRecord % range[1] == 0 ? 0 : 1)));
request.setAttribute("recordstartno", firstNo);
request.setAttribute("searchinput", input);
return JSP_LIST;
}
private String getCreate(HttpServletRequest request, String action) throws Exception{
if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.MENU)) {
manageCommonSession(request, "Vendor");
}
lookupHDPersonInfo();
List<HDPersonInfo> personList = hDPersonInfo.findAllByPersonType("3");
request.setAttribute("personList", personList);
lookupRefState();
List<RefState> stateList = refStateFacade.findAll();
request.setAttribute("stateList", stateList);
return JSP_CREATE;
}
private String doCreateOrUpdate(HttpServletRequest request, String action, VendorInfoForm src) throws Exception{
ComUserProfiles profile = (ComUserProfiles)request.getSession().getAttribute("PROFILE");
String msgInfo = "";
String msgType = "";
ASVendorInfo dest = new ASVendorInfo();
BeanUtils.copyProperties(dest, src);
try {
msgType = MessageConstant.SUCCESS;
lookupASVendorInfo();
if(BaseUtil.isEqualsCaseIgnore(action, PageConstant.UPDATE)){
dest.setVivendorShortname(BaseUtil.getStrUpper(src.getVivendorShortname()));
dest.setViAddress1(BaseUtil.getStrUpper(src.getViAddress1()));
dest.setViAddress2(BaseUtil.getStrUpper(src.getViAddress2()));
dest.setViAddress3(BaseUtil.getStrUpper(src.getViAddress3()));
dest.setViUpdateDate(new Date(DateUtil.getCurrentDateTime()));
dest.setViUpdateId(profile.getId());
dest.setViActiveSts(BaseUtil.getStr(src.getViActiveSts()));
aSVendorInfo.edit(dest);
msgInfo = MessageConstant.RECORD_UPDATE_SUCCESS + ". <a href=\""+request.getContextPath()+"/VendorInfo.do?hdAction=getRead&id=" + dest.getVivendorID() + "\" data-toggle=\"ajaxModal\" >View Here.</a>";
}
else {
dest.setVivendorID("");
dest.setVivendorShortname(BaseUtil.getStrUpper(src.getVivendorShortname()));
dest.setViAddress1(BaseUtil.getStrUpper(src.getViAddress1()));
dest.setViAddress2(BaseUtil.getStrUpper(src.getViAddress2()));
dest.setViAddress3(BaseUtil.getStrUpper(src.getViAddress3()));
dest.setViCreateDate(new Date(DateUtil.getCurrentDateTime()));
dest.setViCreateId(profile.getId());
dest.setViActiveSts(BaseUtil.getStr(src.getViActiveSts()));
String vendorId = aSVendorInfo.createVendorInfo(dest);
msgInfo = MessageConstant.RECORD_CREATE_SUCCESS + ". <a href=\""+request.getContextPath()+"/VendorInfo.do?hdAction=getRead&id=" + vendorId + "\" data-toggle=\"ajaxModal\" >View Here.</a>";
}
} catch(Exception e) {
msgType = MessageConstant.ERROR;
e.printStackTrace();
if(BaseUtil.isEqualsCaseIgnore(action, PageConstant.UPDATE)) {
msgInfo = MessageConstant.RECORD_UPDATE_FAILED;
}
else {
msgInfo = MessageConstant.RECORD_CREATE_FAILED;
}
}
request.setAttribute("errMsg", BaseUtil.getMessage(msgType, msgInfo));
return getList(request, action);
}
private String getReadOrUpdate(HttpServletRequest request, String action) throws Exception{
String id = WebUtil.getStrInput(request, "id");
if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.MENU)) {
manageCommonSession(request, "Vendor");
}
lookupHDPersonInfo();
List<HDPersonInfo> personList = hDPersonInfo.findAllByPersonType("3");
request.setAttribute("personList", personList);
lookupRefState();
List<RefState> stateList = refStateFacade.findAll();
request.setAttribute("stateList", stateList);
lookupASVendorInfo();
ASVendorInfo o = aSVendorInfo.find(id);
request.setAttribute("obj", o);
if (BaseUtil.isEqualsCaseIgnore(action, PageConstant.GET_UPDATE)) {
return JSP_UPDATE;
}
else {
return JSP_READ;
}
}
private String doDelete(HttpServletRequest request, String action) throws Exception{
String id = WebUtil.getStrInput(request, "id");
lookupASVendorInfo();
ASVendorInfo o = aSVendorInfo.find(id);
aSVendorInfo.remove(o);
return getList(request, action);
}
#Override
protected void manageCommonSession(HttpServletRequest request, String formName) throws Exception {
request.getSession().removeAttribute("sortingOrder");
request.getSession().removeAttribute("sortingId");
request.getSession().removeAttribute("formName");
request.getSession().removeAttribute("menuId");
request.getSession().removeAttribute("txnId");
request.getSession().setAttribute("formName", formName);
request.getSession().setAttribute("menuId", WebUtil.getStrInput(request, "menuId"));
request.getSession().setAttribute("txnId", WebUtil.getStrInput(request, "txnId"));
}
}
Dashboard.jsp
<%#page import="com.htp.web.base.constant.PageConstant"%>
<%#page import="org.json.JSONObject"%>
<%--# page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"--%>
<%#page import="com.pms.reference.entities.HDCaseMaster"%>
<%#page import="java.util.List"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="com.hbs.base.entities.ComUserProfiles"%>
<%#page import="com.base.utility.BaseUtil"%>
<%
String userID = "";
HDCaseMaster o = (HDCaseMaster) request.getAttribute("obj");
if (o == null) {
o = new HDCaseMaster();
}
ComUserProfiles profile = (ComUserProfiles) request.getSession().getAttribute("PROFILE");
List<HDCaseMaster> masterList = (List) request.getSession().getAttribute("masterList");
if (profile != null) {
if (!profile.equals("")) {
userID = profile.getId();
}
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
<li><i class="fa fa-home"></i> Dashboard</li>
</ul>
<!--<content-page></content-page>-->
<div class="m-b-md">
<h3 class="m-b-none">Dashboard</h3>
<small>Welcome back, <%=BaseUtil.getStr(profile.getNickName())%></small> </div>
<%
JSONObject json = new JSONObject();
json.put("city", "Mumbai");
json.put("country", "India");
%>
<%=json.toString()%>
<%=o.getCmStatus()%>
<section class="panel panel-default">
<div class="row m-l-none m-r-none bg-light lter">
<div class="col-sm-4 col-md-4 padder-v b-r b-light min-box-height"> <span class="fa-stack fa-2x pull-left m-r-sm"> <i class="fa fa-circle fa-stack-2x text-info"></i> <i class="fa fa-user fa-stack-1x text-white"></i> </span> <a class="clear" href="javascript:getMenuPage('/CaseMaster.do?hdAction=getStartPage&menuId=M0302&txnId=M03T02');"> <span class="h3 block m-t-xs"><strong>Incident</strong></span> <small class="text-muted text-uc">Add New Incident</small> </a> </div>
<div class="col-sm-4 col-md-4 padder-v b-r b-light min-box-height"> <span class="fa-stack fa-2x pull-left m-r-sm"> <i class="fa fa-circle fa-stack-2x text-info"></i> <i class="fa fa-tasks fa-stack-1x text-white"></i> </span> <a class="clear" href="javascript:getMenuPage('/SLA.do?hdAction=getStartPage&menuId=M0402&txnId=M04T02');"> <span class="h3 block m-t-xs"><strong>SLA</strong></span> <small class="text-muted text-uc">Add New SLA</small> </a> </div>
<div class="col-sm-4 col-md-4 padder-v b-r b-light min-box-height"> <span class="fa-stack fa-2x pull-left m-r-sm"> <i class="fa fa-circle fa-stack-2x text-info"></i> <i class="fa fa-edit fa-stack-1x text-white"></i> </span> <a class="clear" href="javascript:getMenuPage('/GenReport.do?hdAction=getStartPage&menuId=M0502&txnId=M05T02');"> <span class="h3 block m-t-xs"><strong>Report</strong></span> <small class="text-muted text-uc">Incident Report</small> </a> </div>
</div>
</section>
<div class="row">
<div class="col-md-12"> <!-- .crousel slide -->
<section class="panel panel-default">
<div class="carousel slide auto panel-body" id="c-slide">
<ol class="carousel-indicators out">
<li data-target="#c-slide" data-slide-to="0" class="active"></li>
<li data-target="#c-slide" data-slide-to="1" class=""></li>
<li data-target="#c-slide" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<p class="text-center"> <em class="h4 text-mute">Save your time</em><br>
<small class="text-muted">Many components</small> </p>
</div>
<div class="item">
<p class="text-center"> <em class="h4 text-mute">Nice and easy to use</em><br>
<small class="text-muted">Full documents</small> </p>
</div>
<div class="item">
<p class="text-center"> <em class="h4 text-mute">Mobile header first</em><br>
<small class="text-muted">Mobile/Tablet/Desktop</small> </p>
</div>
</div>
<a class="left carousel-control" href="#c-slide" data-slide="prev"> <i class="fa fa-angle-left"></i> </a> <a class="right carousel-control" href="#c-slide" data-slide="next"> <i class="fa fa-angle-right"></i> </a> </div>
</section>
<!-- / .carousel slide --> </div>
</div>
<div class="row">
<div class="col-md-12">
<section class="panel panel-default portlet-item">
<header class="panel-heading bg-primary"> News </header>
<section class="panel-body">
<article class="media"> <span class="pull-left thumb-sm"><img src="../../images/avatar_default.jpg" class="img-circle"></span>
<div class="media-body">
<div class="pull-right media-xs text-center text-muted"> <strong class="h4">12:18</strong><br>
<small class="label bg-light">pm</small> </div>
Bootstrap 3 released <small class="block">John Smith <span class="label label-success">Circle</span></small> <small class="block m-t-sm">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</small> </div>
</article>
<div class="line pull-in"></div>
<article class="media"> <span class="pull-left thumb-sm"><i class="fa fa-file-o fa-3x icon-muted"></i></span>
<div class="media-body">
<div class="pull-right media-xs text-center text-muted"> <strong class="h4">17</strong><br>
<small class="label bg-light">feb</small> </div>
Bootstrap documents <small class="block">John Smith <span class="label label-info">Friends</span></small> <small class="block m-t-sm">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</small> </div>
</article>
<div class="line pull-in"></div>
<article class="media">
<div class="media-body">
<div class="pull-right media-xs text-center text-muted"> <strong class="h4">09</strong><br>
<small class="label bg-light">jan</small> </div>
Mobile first html/css framework <small class="block m-t-sm">Bootstrap, Ratchet</small> </div>
</article>
</section>
</section>
</div>
</div>
<div class="row">
<div class="col-md-12">
<section class="panel panel-default">
<header class="panel-heading font-bold">Incident Logs Created This Month</header>
<div class="panel-body">
<div class="row text-sm wrapper">
<div class="col-sm-12 m-b-xs text-center">
<div class="btn-group m-b" data-toggle="buttons">
<label class="btn btn-sm btn-default active btn-info">
<input type="radio" name="options" id="btnMonth">
Month </label>
<label class="btn btn-sm btn-default btn-info">
<input type="radio" name="options" id="btnWeek">
Week </label>
</div>
</div>
<div id="flot-test" style="height:265px"></div>
<!--<div id="namaHari"></div>-->
</div>
</div>
<footer class="panel-footer bg-white no-padder">
<%--<%=masterListDisplay %>--%>
<%
// int count [] = new int [5];
// if(masterListDisplay != null){
// for(HDCaseMaster o : masterListDisplay ){
// if(BaseUtil.isEquals(BaseUtil.getStr(o.getCmStatus()), "4")){count[0]=count[0]+1;}
// else if(BaseUtil.isEquals(BaseUtil.getStr(o.getCmStatus()), "5")){count[1]=count[1]+1;}
// else if(BaseUtil.isEquals(BaseUtil.getStr(o.getCmStatus()), "6")){count[2]=count[2]+1;}
// else if(BaseUtil.isEquals(BaseUtil.getStr(o.getCmStatus()), "7")){count[3]=count[3]+1;}
// else
// count[4]=count[4]+1;
// }
// }
%>
<div class="row text-center no-gutter">
<div class="col-xs-3 b-r b-light btn-success">
<span class="h4 font-bold m-t block">
</span> <small class="text-white m-b block ">Open Logs<div id="openLog"></div></small> </div>
<div class="col-xs-3 b-r b-light btn-warning"> <span class="h4 font-bold m-t block">System.out.print(GetTotalLog())</span> <small class="text-white m-b block ">Resolved Logs</small> </div>
<div class="col-xs-3 b-r b-light btn-info"> <span class="h4 font-bold m-t block">System.out.print(GetTotalLog())</span> <small class="text-white m-b block ">Closed Logs</small> </div>
<div class="col-xs-3 btn-danger"> <span class="h4 font-bold m-t block">System.out.print(GetTotalLog())</span> <small class="text-white m-b block ">Duplicate/Cancel Logs</small> </div>
</div>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="col-md-8">
<section class="panel panel-default">
<header class="panel-heading font-bold">Total Incident Logs Created by Month</header>
<div class="panel-body">
<div id="flot-bar" style="height:150px"></div>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel panel-default">
<header class="panel-heading font-bold">Data By Day</header>
<div class="bg-light dk wrapper"> <span class="pull-right">Wednesday</span> <span class="h4">07-11-2014<br>
<small class="text-muted"></small> </span>
<div class="text-center m-b-n m-t-sm">
<div class="sparkline" data-type="line" data-height="65" data-width="100%" data-line-width="2" data-line-color="#dddddd" data-spot-color="#bbbbbb" data-fill-color="" data-highlight-line-color="#fff" data-spot-radius="3" data-resize="true" values="280,320,220,385,450,320,345,250,250,250,400,380"></div>
<br/>
</div>
</div>
<div class="panel-body">
<div> <span class="text-muted">Total:</span> <span class="h3 block">53 <small class="text-muted">log(s) created</small></span> </div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-4">
<section class="panel b-light">
<header class="panel-heading bg-primary no-border"><strong>Calendar</strong></header>
<div id="calendar" class="bg-primary-lt m-l-n-xxs m-r-n-xxs"></div>
<div class="list-group"> <span class="badge bg-danger">7:30</span> Meet a friend <span class="badge bg-success">9:30</span> Have a kick off meeting with .inc company <span class="badge bg-light">19:30</span> Milestone release </div>
</section>
</div>
</div>

Resources