I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
Related
No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?
This is my code so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->
I want to use this font-awesome icon. And I've tried adding it as a background-image too, as in:
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!
Bootstrap 5 Beta - (update 2021)
<div class="input-group">
<input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Demo
Bootstrap 4 (original answer)
Why not use an input-group?
<div class="input-group col-md-4">
<input class="form-control py-2" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
And, you can make it appear inside the input using the border utils...
<div class="input-group col-md-4">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Or, using a input-group-text w/o the gray background so the icon appears inside the input...
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</div>
Alternately, you can use the grid (row>col-) with no gutter spacing:
<div class="row no-gutters">
<div class="col">
<input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
</div>
<div class="col-auto">
<button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Or, prepend the icon like this...
<div class="input-group">
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0">
<i class="fa fa-search"></i>
</div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
Demo of all Bootstrap 4 icon input options
Example with validation icons
I made another variant with dropdown menu (perhaps for advanced search etc)..
Here is how it looks like:
<div class="input-group my-4 col-6 mx-auto">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
<span class="input-group-append">
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button class="btn btn-outline-primary rounded-right" type="button">
<i class="fas fa-search"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</span>
</div>
Note: It appears green in the screenshot because my site main theme is green.
Here is an input box with a search icon on the right.
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
</div>
Here is an input box with a search icon on the left.
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
</div>
Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.
Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.
Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search"> as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.
Here is the needed Bootstrap markup.
<div class="position-relative">
<i class="fa fa-search position-absolute"></i>
<input class="form-control" type="search">
</div>
...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:
i {
font-size: 1rem;
color: #333;
top: .75rem;
left: .75rem
}
input {
padding-left: 2.5rem;
}
You may have to fiddle with the values for top, left, and padding-left.
in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)
<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
<i class="ICON-copyright"></i>
</asp:LinkButton>
</div>
It is also possible with position-absolute in Bootstrap 5:
<form class="d-flex flex-row position-relative">
<input type="search" class="form-control" id="example-search-input">
<button class="btn btn-outline-success border-0 position-absolute end-0" type="submit">
<i class="fa fa-search"></i> Search
</button>
</form>
With Bootstrap 5 and bootstrap-icons library:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search"
aria-describedby="button-addon">
<button class="btn btn-outline-secondary" type="button" id="button-addon"><i class="bi bi-search"></i></button>
</div>
you can also do in this way using input-group
<div class="input-group">
<input class="form-control"
placeholder="I can help you to find anything you want!">
<div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>
codeply
I have used boostrap modal.in that we need to use scroll to specific element. i tried by using below code.but doesn't works
$('#centralModalLg').on('show.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
Updated:
when i open modal window at first time and scroll to the specific area.look at the below the screen shot
when open modal second time. the scoll should go the top but i got where i stoped last time.
Html:
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
<!--Content-->
<div class="modal-content" *ngIf="productDetails">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>{{productDetails?.productName}}
<span>
<img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
</span>
<span>
<img *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
</span>
</h4>
<div id="elementId" class="over-flow-md">
<img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- <hr /> -->
<p class="small pt-2">
{{ productDetails?.productDesc }}
</p>
<hr />
<div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
<h5 class="bg-light">{{addonCate.CategoryType}}</h5>
<div class="row pb-1">
<div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
<span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
<div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>
</div>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
<li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<label class="checkbox-inline checkbox">
<input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue" type="checkbox" value="option1" >
<span class="checkmark"></span>
<div class="checkbox-text">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
</div>
</label>
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
<li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
<input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-2">
<input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
</div>
<hr />
<div class="row addprice">
<div class="price col-sm-7">Choose Quantity</div>
<div class="text-right col-sm-2 ">
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
<ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
</strong>
</div>
<div class="text-right col-sm-3 ">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
<input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
</div>
</div>
</div>
<div class="bg-light p-0 pb-2">
<div class="row">
<div class="col-md-6">
<div class="mt-3 pl-3">
<span class="pr-1">Total:</span>
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
<ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
</strong>
</div>
</div>
<div class="col-md-6">
<button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
<span *ngIf="add_cart_loading != 'adding'">
<ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
<ng-container *ngIf="update_product_status">Update</ng-container>
</span>
<span *ngIf="add_cart_loading == 'adding'">
<ng-container *ngIf="!update_product_status">Adding</ng-container>
<ng-container *ngIf="update_product_status">Updating</ng-container>
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
How i can achieve this
Thanks in advance
Change "show" to "shown" when did you use bootstrap 3 or 4
$('#centralModalLg').on('shown.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
check that Bootstrap 3 codepen example
check that Bootstrap 4 codepen example
$('#centralModalLg').on('shown.bs.modal', function() {
$('#elementId').scrollTop(0);
});
A Fiddle with your code.
EDIT:
The issue is caused by the event listener, should be shown.bs.modal instead of show.bs.modal, updated the fiddle as well.
jQuery.scrollTop() could be conflicting if the event is started but not yet completed as of Bootstrap's official documentation :
the infinitive (ex. show) is triggered at the start of an event, and
its past participle form (ex. shown) is triggered on the completion of
an action.
try this:
$('#centralModalLg').on('show.bs.modal', function() {
setTimeout(function() {
var $elem = $('#scrollto') // add this ID to an element you want scroll to
var $container = $("#elementId")
$container.scrollTop(0) // edge case - reset scroll in case it is reopened
var t = $container.offset().top
$container.scrollTop($elem.position().top - t);
}, 500) // run after modal animation
});
It is based on this answer: https://stackoverflow.com/a/21179878/8164758
Here is working jsfiddle example: https://jsfiddle.net/954jnt2y/1/
i am trying to achieve the functionality of move scroll bar as per new upload, when i am uploading any document at that time i am high lighting that document,suppose i have 20 document in my list then i am uploading 21th document that time scroll bar should move to that document means it should move as per new document,currently i am showing latest document through high lighting but scroll bar is not moving,if somebody know how to achieve this functionality please guide me how to do that i am new to UI.Thanks.
here is my html code where i am showing list of document:
<div id="resume-panel" class="panel-collapse collapse">
<div class="panel-body upload-newFile-container">
<div class="input-group file-preview">
<input placeholder="" type="text" class="form-control file-preview-filename" ng-value="(myFile.length > 1 ? myFile[0]._file.webkitRelativePath.substring(0, myFile[0]._file.webkitRelativePath.lastIndexOf('/')) : myFile.name)" disabled="disabled">
<span class="input-group-btn button-position">
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="file-preview-input-title">BrowseFolder</span>
<input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
name="input-file-preview" />
</div>
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
<span class="glyphicon glyphicon-file"></span>
<span class="file-preview-input-title">BrowseFile</span>
<input type="file" ng-click="clearFileName()" file-upload="myFile" ng-disabled="isFolderSelected" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
/>
</div>
<button type="button" class="btn btn-labeled btn-info" ng-disabled="myFile === null || myFile === undefined || uploadButtonDisabled" data-ng-click="upload();disableButton()" ng-change="latestResume()">
<span class="btn-label">
<i class="glyphicon glyphicon-upload"></i>
</span>Upload
</button>
</span>
</div>
<uib-progressbar
class="progress-striped active"
ng-show="folderProcessing && !isSingleFile"
animate="true" max="100"
value="progressValuePercentage"
type="success">
<i>
<span>
{{progressValuePercentage}} / 100
</span>
</i>
</uib-progressbar>
<div class="processed-file-container col-xs-12 col-md-12 nopadding">
<div class="loading-message-container" ng-show="showResumeLoadingPanel">
<h3>Loading data... Please wait.</h3>
<div class="progress progress-striped active page-progress-bar">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<div class="processed-document col-xs-12 col-md-12 col-lg-12 nopadding" ng-show="!showResumeLoadingPanel">
<div class="panel-heading">
<span ng-if="jdSelected" class="jdContext jdContextInManageResume" ng-show="isjdDeleted">
<span>Company : {{companyName}}</span><br>
<span>JobDescription : {{jdName}}</span>
</span>
<div class="pull-right nopadding refreshBtnInManageResume">
<button class="btn btn-labeled btn-info btn-reload pull-right" data-ng-click="loadResumePanel()">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span class="small-left-margin">Refresh</span>
</button>
</div>
<div class="pull-right nopadding download-quick-tracker-position" ng-if="jdSelected && processResumeFiles.length > 0" ng-show="isjdDeleted">
<button class="btn btn-labeled btn-info pull-right" data-ng-click="downloadQuickTracker(jdUniqueId)">
<i class="fa fa-download" aria-hidden="true"></i>
<span class="">QuickTracker</span>
</button>
</div>
</div>
<div class="panel-body">
<div class="row marginForRefreshBtn">
<table class="table table-striped" id="manageResumeTable">
<thead class="text-center text-info text-capitalize">
<th class="text-center col-xs-1">Sr.No.</th>
<th class="text-center col-xs-4">Document</th>
<th class="text-center col-xs-1">Score</th>
<th class="text-center col-xs-1">QuickScore</th>
<th class="text-center col-xs-5">Actions</th>
</thead>
<tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}">
<td class="text-center col-xs-1">{{ file.temporaryId }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
{{ file.attributes.name }}
</td>
<td class="text-center col-xs-1">{{file.totalScore}}</td>
<td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
<td class="text-center col-xs-5">
<button class="btn btn-labeled btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isModelHtmlPresent" data-ng-click="markAsGoldStd(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
here is my UI view how its showing currently.
if you didnt understand question please ask me, thanks you
you can keep your scroll bar at the top position :
$('html, body').animate({
scrollTop: 0
}, 1000);
View CODE:
$(document).ready(function() {
$(".price").click(function() {
$("input").keyup(function () {
if ($(this).val()) {
$("#priceSave").show();
}
else {
$("#priceSave").hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
<!--<form name="priceform" method="post" action="addPriceDetails/{{$dataId}}">-->
<div class="modal fade" id="price">
<div class="modal-dialog">
<div class="modal-content">
<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">Selling Information</h4>
</div>
<div class="modal-body" id="modal-content">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-sm-12">
<b>Listing Information</b>
<h6>Seller SKU ID <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Unique identifier for the listings">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="skuid" id="skuvalue" class="pricevalue" />
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Status Details</b>
<h6>Listing Status <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Inactive listings are not available for buyers on Flipkart">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<select id="dropDownId" name="listingStatus">
<option selected disabled>--Choose here--</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Price Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>MRP <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Maximum retail price of the product">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="mrp" id="mrpvalue" class="check-fill"/>
</div>
<div class="col-sm-6">
<h6>Your Selling Price <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Price at which you want to sell this listing">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="selprice" id="selpricevalue" class="check-fill"/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Inventory Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>Fulfilment By <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Fullfilment of FA listings will be managed by Flipkart ">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<select id="5" name="fulfillment">
<option selected disabled>Choose here</option>
<option value="Seller">Seller</option>
</select>
<br/>
<h6>Procurement SLA <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Time required to keep the product ready for dispatch">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="sla" class="check-fill"/>Days
<br/>
<h6>Stock available for Buyers <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Number of items available for cutomer to buy after detecting pending orders" >
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="available" readonly/>
</div>
<div class="col-sm-6">
<h6>Procurement Type <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Information on how the inventory is procured by the seller to fulfill an order">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<select name="procurementType">
<option selected disabled>--Choose here--</option>
<option value="instock">instock</option>
</select>
<br/>
<h6>Stock <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Number of items you have in stock">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="stock" />
<br/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Delivery charge to customer</b>
<div class="col-sm-12">
<div class="col-sm-4">
<h6>Local Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer in the same city for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="local" />
</div>
<div class="col-sm-4">
<h6>Zonal Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer in the same zone for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="zonal" />
</div>
<div class="col-sm-4">
<h6>National Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer outside your zone for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="national" />
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Packaging Details</b>
<div class="col-sm-12">
<div class="col-sm-3">
<h6>Package Weight <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Weight of the final package in kgs">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="weight" />Kgs
</div>
<div class="col-sm-3">
<h6>Package Length <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Length of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="length" />cms
</div>
<div class="col-sm-3">
<h6>Package Breadth <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Breadth of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="breadth" />cms
</div>
<div class="col-sm-3">
<h6>Package Height <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Height of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="height" />cms
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Tax Details</b>
<h6>HSN <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="code of your product for determining applicable tax rates">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="hsn" />
Find relevant HSN codes
</div>
</div>
<br/>
<br/>
<input type="submit" id="priceSave" class="save" value="Save" style="border-radius: 8px; padding: 5px 15px; display:none;">
<!-- </form>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
<!--<button type="submit" id="priceSave" class="save" style="border-radius: 8px; padding: 5px 15px; display:none;">Save</button>-->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
This is my laravel view code. Here when I click on the input fields it shows up the "SAVE" button. When I click on the save button, I am trying to redirect to the controller using ajax(code mentioned below).
SCRIPT CODE:
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf_token"]').attr('content')
}
});
$(document).ready(function() {
$("#priceSave").click(function(){
$.ajax({
url: '{{url("addPriceDetails")}}',
type: "post",
success:function(data) {
alert(data);
}
});
});
});
</script>
This is the script code,I have tried for redirect using ajax with the help of post method.
ROUTE CODE:
Route::post('addPriceDetails','priceDetails#addPriceDetails1');
Controller:
public function addPriceDetails1()
{
echo("1234");
}
My controller code.ON redirection it shows Internal server error on browser console page.
I want to integrate the BlueImp AngularJS file upload plugin into my site , but the problem is I'm using a template / directive / controller / service model. Ignoring the service I still can't seem to find which part of the code goes where.
My template
<div> <form id="fileuploadbeta" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form></div>
Now my problem is what code should be in the directive? ( I mean what part of the template) And which should be in the Controller?