I have a situation where I have a jquery autocomplete field that I would also like to make a placard for (http://getfuelux.com/javascript.html#placard). I've got everything set up fine. When I click the field, the placard shows up, and I can still type into the field to receive suggestions.
The problem comes in when I attempt to click one of the suggestions. It calls my select: function as expected, which populates the text input. But then as the event cascades it triggers the "cancel" (I'm guessing here) event on the placard, which resets the value of the input to default and removes the placard visual.
Here's the gist of the code:
HTML
<label class="control-label">Select User:</label>
<div class="placard" data-initialize="placard">
<div class="placard-popup"></div>
<input class="autocomplete-web-users placard-field glass form-control" id="Approver_FirstName" name="Approver.FirstName" type="text" value="" />
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Confirm</button>
</div>
</div>
JS
$(".autocomplete-web-users").autocomplete({
source: function (request, response) {
var $element = $(this.element).parent().first();
var $loader = $("<span style='font-size: 1em; position: relative; top: -25px; right: 20px;' data-initialize='loader' class='loader'></span>");
$element.append($loader);
//start loading spinner
$loader.loader();
$loader.loader('play');
$.ajax({
url: '/Search/SearchWebUsers',
data: { term: request.term },
success: function (data) {
var results = $element.data('results');
//data loaded, destroy data spinner
$loader.loader('destroy');
response($.map(data, function (item) {
return {
label: item.Name,
value: item.Id,
tag: item.UniqueId,
id: item.Id
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
event.preventDefault();
$(event.target).parents().find(".placard").placard('setValue', ui.item.tag);
}
});
JS PLACARD INITIALIZATION
$(".placard").placard();
I've fiddled with the "explicit" and "externalClickAction" options, but can't seem to get anything to work. Any ideas? I can't find anything about fuel ux on the intertubes.
Related
I did a live search function Laravel 7 using jquery. I used the keyup function. I have written the code tested each and every time for the keypress the alert is working and result also coming but I stop the alert search result is coming I tried the keypress & keydown event also same issues. I don't what is the issue please help me to solve this issue.
<form id="small-search-box-form" action="{{route('MainSearchProduct')}}" method="get">
<input type="text" class="search-box-text" id="search_query" name="search" placeholder="Search store" />
<input type="submit" class="button-1 search-box-button" value="Search" />
<ul class="search-drop" id="result">
</ul>
</form>
$(document).ready(function() {
var input_search = $('#search_query');
input_search.keyup(function() {
//alert(input_search.val());
var query = input_search.val();
$.ajax({
url: "{{ route('MainSearchQuery') }}",
type: "GET",
data: {
'proSearch': query
},
success: function(data) {
$('#result').html(data);
}
}, 10000);
});
$(document).on('click', 'li', function() {
var value = $(this).text();
$('#search').val(value);
$('#result').html("");
});
});
I open my dialog with a button then I place my cursor in a input field and presses enter my dialog closes and this line is inserted to the address bar:
jQuery:
$('#dialog').load("form-incident.php").dialog({
title: "Add Incident",
autoOpen: false,
resizable: false,
width: 800,
modal:true,
position: ['center', 'top+50'],
buttons: {
Add: function(){
$.ajax({
url : 'save.php',
type : 'POST',
data : $('form').serialize(),
context: $(this),
success: function (result) {
if (result === "true") {
alert('Incident has been added successfully');
} else {
alert('ERROR: Cannot insert data to MySQL table');
}
window.location.reload();
$(this).dialog( "close" );
},
error : function(){
alert('ERROR: Check database connection');
}
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
form-incident.php:
<form>
Name: <input type="text" name="name" id="name"><br><br>
Project:
<select name="project" id="project">
<option value="test">Test</option>
</select><br><br>
Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea>
</form>
How can I fix the problem so the dialog box does not close but still reacts to enter if there was some suggestions from earlier where the form was filled out?
Okay, I forgot that implicit submission will still happen if there is only a single input element in the form, even if there isn't a submit button.
So, it looks like the problem is happening from the form being submitted. But in that case, calling preventDefault() on the submit even will fix it.
I threw together a fiddle with your code snippets from above, and was able to reproduce the problem. Once I put in the preventDefault(), it stopped happening. Please check it out, and see how it differs from your live code.
https://jsfiddle.net/elezar/u0sfx22p/2/
I have an html page with some checkboxes:
<div class="col-md-2">
<div class='form-group employe-admin-contactP'>
<input type="checkbox" class="readymade-checkbox admin" name="" id="admin-${member?.user?.id }" data-id="${member?.user?.id }"
<g:if test="${member?.isAdmin()}">
checked
</g:if>
/>
<label for="admin-${member?.user?.id }" name="" class="readymade-label admin"></label>
</div>
</div>
Each time the user click on the checkbox (check/uncheck) a the following function which I wrote in js file have to be triggered:
$(document).ready(function() {
$('.readymade-checkbox.admin:not(checked)').on('click',function(){
var contact = {id:$(this).data('id') }
$.ajax({
url: makeUserAdmin,
type: "post",
data: {
id: JSON.stringify(contact), companyId: $('#teamCompanyId').val()
},
success: function (data, textStatus) {
jQuery("#updateCompanyteam").html(data);
}
})
return false;
});
})
The problem is that this the function is triggered only once.
I bet that jQuery("#updateCompanyteam").html(data); will modify the HTML area of the checkbox ".readymade-checkbox.admin". You need a persistant listener for your click event (which will be available even if the DOM is modified), or to refresh your listeners.
This issue has been already resolved in several threads like this one.
Cheers
I'm using bootstrap typeahead and I'm wondering, how do I make it submit when clicking the enter button? In other words, if I typed "hello" into the typeahead input and pressed enter, how would I submit "hello"?
I've already made it so that the typeahead doesn't auto-select the first result.
This is my code:
<form method="POST" action="script.php">
<input name="typeahead_field" class="typeahead" data-provide="typeahead" autocomplete="off" type="text">
</form>
jQuery:
$('.typeahead').typeahead({
items: 10,
source: function (query, process) {
$.ajax({
url: 'typeahead.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data) {
process(data);
}
});
},
highlighter: function(data) {
// code that returns each result
return html;
},
updater: function(data) {
// code that redirects the user if they click the selection
},
});
Please help!
Old question, but worth answering. Here is a possible solution:
$('.typeahead').on('keydown', function(e) {
if (e.keyCode == 13) {
var ta = $(this).data('typeahead');
var val = ta.$menu.find('.active').data('value');
if (!val)
$('#your-form').submit();
}
}
EDIT: First attempt was very naive :)
You need a submit button to enable submit on enter. You can hide the button with this CSS:
<input type="submit" style="position: absolute; left: -9999px">
(from https://stackoverflow.com/a/477699/759971)
works well, but doesn't highlight selection like mouse-over event does. Maybe this solution would work better as seems to encapsulate the gist of previous answer.
https://bwbecker.github.io/blog/2015/08/29/pain-with-twitter-typeahead-widget/
I am using Ruby on Rails 3.2.2 and the jquery-rails 2.1.3 (including jQuery UI). I am trying to implement a HTML form so to search, select and submit city data by using the Autocomplete jQuery UI widget.
At this time I am implementing my form with the following "autocompletable" field:
<div class="ui-widget">
<label for="cities">City: </label>
<input id="cities" />
</div>
<script>
$jQ(function() {
var cache = {};
$jQ( "#cities" ).autocomplete({
autoFocus: true,
minLength: 3,
source: function( request, response ) {
$jQ.ajax({
url: '<SEARCH_PATH>',
data: { search: request.term },
dataType: 'json',
success: function(data) {
var cities = new Array();
$jQ.each(data, function(arrayID, city) {
cities.push({ label: city.name, value: city.id })
});
response( cities );
},
error: function () {
response([]);
}
});
}
});
});
</script>
The above code works as expected for retrieving JSON data and displaying the list of retrieved cities. As you can see, the "useful part" of city data is the id of the city since I am using the id value in order to handle internally the submitted data. However, given the "selectable" list of cities is displayed, when I use keyboard UP and DOWN arrows in order to select one of those cities then the input field is populated with the city id (not with the city name).
I would like to:
display the city name instead of the id in the input field on selecting the city;
find a way in order to submit the city id and not the city name (even if the city name is the only thing displayed in the front end content).
How could / should I make to properly accomplish that?
Use the select event to populate a hidden field, then submit the hidden field instead.
<div class="ui-widget">
<label for="cities">City: </label>
<input id="cities" />
<input name="cities" type="hidden" id="cities-hidden" />
</div>
js
$jQ(function() {
var cache = {};
$jQ( "#cities" ).autocomplete({
autoFocus: true,
...
select: function(e, ui) {
$("#cities-hidden").val(ui.item.value); // populate hidden input
$("#cities").val(ui.item.label); // populate autocomplete input
return false; // prevent default action of populating autocomplete input with value
}
});
});
Demo: http://jsfiddle.net/f8yPX/3/