Boostrap autocomplete alignment - javascript

I have a search box with input-prepend and input-append groups.
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
<input class="form-control autocomplete" type="text" name="q" value="..." aria-label="Search" autocomplete="off">
<div class="input-group-append barcode-scan d-none">
<i class="bi bi-upc-scan"></i>
</div>
</div>
bootstrap-autocomplete is used for autocomplete widget.
However, the dropdown alignment breaks when reducing the browser width:
The dropdown shifts left. It's aligned with 'Search' and not the input element.
The appended input group is rendered as part of the dropdown and not the search element. See image below.
Any pointers appreciated.

Related

Focus Event not working on Dynamically created content [duplicate]

This question already has answers here:
How to delegate focus event? [duplicate]
(1 answer)
Focus and blur jQuery events not bubbling
(3 answers)
Closed 17 days ago.
I was trying to initialize datePicker on dynamically added content. When i focus on datepicker, datepickerloaded but when i add a dynamic content, datePicker doesn't load for that content.
Here is the code for jquery datePicker on focus code.
$('document').on('focus',".datepicker", function(){
$(this).datepicker({ dateFormat: 'yy-mm-dd' });
});
HTML Part:
<div class="row" style="align-items: center;">
<div class="col-md-10 dynamic-field" id="dynamic-field-1">
<div class="row" >
<div class="col-md-3">
<div class="form-group">
<label for="field" class="hidden-md">Type Of Cultivation*</label>
<input type="text" id="field" class="form-control" name="type_of_cultivation[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field" class="hidden-md">Cultivation Date</label>
<input type="text" class="form-control datepicker" placeholder="2023-02-28" name="cultivation_date[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Harvest Date</label>
<input type="text" class="form-control datepicker" placeholder="2023-03-28" name="harvest_date[]">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" name="quantity[]">
</div>
</div>
</div>
</div>
<div class="col-md-2 mt-30 append-buttons">
<div class="clearfix">
<button type="button" id="add-button" class="btn btn-secondary float-left text-uppercase shadow-sm"><i class="fa fa-plus fa-fw"></i>
</button>
<button type="button" id="remove-button" class="btn btn-secondary float-left text-uppercase ml-1" disabled="disabled"><i class="fa fa-minus fa-fw"></i>
</button>
</div>
</div>
</div>
It appears that there is an issue with initializing the datepicker on dynamically added content. The current implementation binds the datepicker to the focus event of elements with the class .datepicker. However, this approach is not effective when new content is added dynamically, as these elements are not present in the DOM at the time the binding occurs.
To address this issue, a solution would be to manually trigger the focus event on the newly added elements after they have been added to the DOM. This can be accomplished through the use of a click handler on the #add-button element, as follows:
$('#add-button').click(function() {
// Add dynamic content here
// Manually trigger the focus event on newly added elements with class
//.datepicker
$('.datepicker').trigger('focus');
});

ASP.net razor pages and multi-select, posting all items in select

I have a form which has two selects, one on the left, one on the right. One on the left to list the items to add, two buttons, one to add and one to remove items to another select using a bit of jQuery. Both selects have the multiple="multiple" attributes set.
The problem is, when I submit the form, only items selected in the right hand select are posted in the form data, which is expected. I have added the following bit of jQuery to select all of the items in the select list on submit, but it still only sends the data of the single selected item before the submit button is pressed:
$("#pageForm").submit(function (e) {
$("#controlGradesList option").prop("selected", "selected");
});
This is my form markup:
<form method="post" id="pageForm">
#Html.HiddenFor(x => x.Data.Ref)
<div class="row">
<div class="col-sm-5">
<h3>All grades</h3>
<div class="form-group">
<input type="text" id="filterBox" class="form-control" placeholder="Filter grades" />
</div>
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="gradesList" asp-items="#(new SelectList(Model.Data.AvailableGrades, "Ref", "Display"))">
</select>
</div>
</div>
<div class="col-sm-2">
<div class="push-down-arrows">
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="addButton" value=">>" title="Add grade to control group" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="removeButton" value="<<" title="Remove grade from control group" />
</div>
</div>
</div>
<div class="col-sm-5">
<h3>Associated grades</h3>
<div class="grades-padding-top">
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="controlGradesList" asp-for="Data.AssociatedGradeRefs" asp-items="#(new SelectList(Model.Data.AssociatedGrades, "Ref", "Display"))">
</select>
</div>
</div>
</div>
</div>
<hr />
<button class="btn btn-primary" type="submit"><i class="fa fa-save"> </i>Save</button>
| Back to previous page
</form>
What am I missing here?
I needed to use and onclick event on the button to select all of the options in the select, prevent default and submit the form:
<button class="btn btn-primary" type="submit" onclick="submitForm(event)"><i class="fa fa-save"> </i>Save</button>
and
function submitForm(e) {
$("#controlGradesList option").prop("selected", true);
e.preventDefault();
$('#pageForm')[0].submit();
}

Display query and result on the same page

I am currently having a two page application which lets the user enter the data and hit submit and the next page opens with the Query result in a grid. like below
home.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">From Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="fromDate"
name="fromDate"
uib-datepicker-popup="{{format}}"
ng-model="request.fromDate"
is-open="popup1.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.fromDate.$error"
ng-if="homeForm.fromDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div>
<label style="font-size: medium">To Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="toDate"
name="toDate"
uib-datepicker-popup="{{format}}"
ng-model="request.toDate"
is-open="popup2.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.toDate.$error"
ng-if="homeForm.toDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class='btn btn-danger' ng-click="clearRequest(homeForm)">Clear</button>
<!--ng-disabled="!homeForm.$valid" -->
<button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
</div>
</div>
</div>
</form>
result.html
<div>
<h4 class="text-primary">Search Results</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
</div>
<div id="gridStyle" ng-if="gridOptions.data"
ui-grid="gridOptions"
class="myGrid"
ui-grid-resize-columns
ui-grid-pagination
ui-grid-selection
ui-grid-auto-resize
ui-grid-cellNav
ui-grid-exporter>
</div>
</div>
Now I am trying to put all the query and the query result together in a page. Like all the inputs/buttons on the left and the grid on the right.
Adding the code in to Plunker here
Do I need to add one more html page that will have both these html, and I should be calling that in the app.js? I am very new to AngularJS not sure how can I do this
Yes, you should create a view component, which will include your two components which will become the child components of the newly added view.
Check out this tutorial to learn the concept.
You can use Asynchronous XHTML And JavaScript (AJAX) to have everything on a single page, without loading a different page, which is what I would do unless you have requirements to display results on a separate page.
Considering you have type=button for the submit button, it appears AJAX was intended since this will prevent the page from reloading when the submit button is clicked.
Basically, in the createRequest() function, send the query parameters (which appear to be included in the homeForm argument) to the query service. When the response is received, update the gridOptions.data with the values you want displayed in the table... Angular should take care of the rest.

Angular JS ng-click does not work on search icon

Can someone please lead me into the right direction regarding my search icon? I need to make my search icon clickable within the input field to display results.
Please see the following code listed below.
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-enter="runUserSearch()" />
</div>
</div>
Use ng-click instead of ng-enter
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-click="runUserSearch()" />
</div>
</div>

how to get the Fuel UX search function fired

I would like to use the Fuel UX search control. I design a form as shown below to declare the Fuel Search control:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="search input-group" role="search">
<input type="search" id="searchprefix" class="form-control" type="text" placeholder="Search Prefix">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</form>
The search control is displayed as expected. However, I don't know how to define the JavaScript function to be invoked when the user types search prefix inside the control and hit Enter. Can someone show me a working example?
You need to define listener that will be triggered on pressing search (from fuel ux documentation):
searched.fu.search -- This event fires when a user presses Enter within the input or clicks the button.
cleared.fu.search -- This event fires when the user clears the input.
All search events are fired on the .search classed element.
Example:
Html code:
<div class="search input-group" role="search" id="mySearch">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
Javascript code:
$('#mySearch').on('searched.fu.search', function(evt, data) {
// data will then contain your search string .. in this place you have to place your search handler code
alert(data);
});

Categories