I added an Autocomplete feature to a form on a HTML template, i would like to perform some actions when an hint is selected, is there any way to do it? I'm using Jquery-Typeahead. Here is my actual code:
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi', function(data) {
console.log(data)
var dt = data
$(() => {
$('#myform').typeahead({
source: {
data: dt.results.map(record => record.item)
},
callback: {
onInit: function($el) {
console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
},
onClick: function() {
console.log(); //How can i console.log() the selected value here, for example?
}
}
});
});
});
});
Try defining an onClickAfter callback, it's called right after user clicks on an item. Something like this:
onClickAfter: function(node, a, item, event) {
// item will be the item you selected
console.log(item);
}
You can also define the onClickBefore callback the same way, and it will be called immediately before "normal" typeahead behaviour kicks in
Related
I am able to get the autocompletion list on (ctrl+space) key event in ace editor but I want to achieve the same behavior on user key event. Is there any way to do the same?
For adding custom autocomplete you need to bind the key, with addCommand, and then call the auto-complete
editor.commands.addCommand({
name: "myCommand",
bindKey: { win: "$", mac: "$" },
exec: function (editor) {
autocomplete();
}
});
Once the user trigger's the key you can call your autocomplete function, I'm adding a sample autocomplete function here, make the changes as you require.
autocomplete: function () {
staticWordCompleter = {
var getWordList = function(editor, session, pos, prefix, callback, isRHSEditor) {
var wordList = ["Java","Javascript","Python"]; // add your words to this list
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word
};
}));
editor.completers = [staticWordCompleter];
}
To always use autocomplete you can try this:
editor.commands.on("afterExec", function (e) {
if (e.command.name == "insertstring" && /^[\w.]$/.test(e.args)) {
editor.execCommand("startAutocomplete");
}
});
Or you can bind the change event and call the autocomplete, which would trigger the autocomplete on each click
editor.on("change", function () {
autocomplete();
});
I have a table in which I can click the rows () with the class .details. This will show a div with id="details" with extra information about the element in the row.
I have the following code.
$('.details').click(function () {
$('#details').slideUp('slow');
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However I would like the loading (.load()) to happen after the .slideUp() due to the fact that the load starts while the element is sliding up (which looks wierd). I have tried to add it as a callback function the following way:
$('#details').slideUp('slow', function () {
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However that stops the code from working. Does anyone have an idea on how to solve this?
Thanks.
EDIT:
My table row looks as follows:
<tr class="details" data-id="#item.VehicleID" data-url="#Url.Action("Details", "Vehicle")">
</tr>
My div looks as follows:
<div id="details"></div>
One problem i see with your code is, you are using $(this).data('url') to get the url data attribute value set to the tr which was clicked. but $(this) is actually the $('#details') there because you are accessing it inside the slideUp of $('#details'), which does not have the url data attribute. So you must be getting an error
The solution is to assign the $(this) (clicked row) to a local variable and use that inside your other callback function.
This should work.
$(function () {
$('.details').click(function () {
var _this = $(this);
$('#details').slideUp('slow', function () {
$('#details').load(_this.data('url'), { id: _this.data('id') }, function () {
$('#details').slideDown('slow');
});
});
});
});
I'm having a strange issue where the value found in Vue DevTools is correct. It's declared in my data as expected. The first time I click on "Edit" an item, the correct value shows up in my browser window as well.
However, if I click on "Edit" an item that has a different quantity, the same value shows up again even if it is incorrect (it should be prepopulating from the database).
Then, if I click back on the first "Edit" item again that value will get updated with the previous value!
The craziest part is that while my browser window is not showing the correct value, the correct result is showing up in Vue DevTools at all times! The circled item in the image below is the UUID for the "Quantity" of 100, which is the correct value. Yet 700 is showing up (the previous Edit item's value). Anybody ever had this happen before and know what gives?
Here's some snippets of relevant code (it's from a Vue component using vue-resource, and this is taking place in a bootstrap modal in a Laravel project):
Vue JS
data() {
return {
selected_options: {},
attributes: [],
}
},
methods: {
editLineItem: function (line_item) {
this.getProductOptionsWithAttributes(line_item.product_id);
this.getPrepopulatedOptionsForLineItem(line_item.id);
},
getProductOptionsWithAttributes: function (product_id) {
var local_this = this;
var url = '/api/v1/products/' + product_id + '/options';
this.$http.get(url).then(function (response) {
local_this.attributes.$set(0, response.data);
}, function (response) {
// error handling
});
},
getPrepopulatedOptionsForLineItem: function (id) {
var local_this = this;
var url = '/api/v1/line_items/' + id + '/options';
this.$http.get(url).then(function (response) {
Object.keys(response.data).forEach(function (key) {
Vue.set(local_this.selected_options, key, response.data[key]);
});
}, function (response) {
//#TODO Implement error handling.
});
},
}
HTML
<div v-for="(key, attribute) in attributes[0]" class="col-md-12 selectbox_spacing">
<label for="option_{{$index}}">{{key}}</label><br/>
<select class="chosen-select form-control" v-model="selected_options[key]" v-chosen="selected_options[key]" id="option_{{$index}}">
<option v-for="option in attribute" value="{{option.id}}">{{option.name}}</option>
</select>
</div>
<button v-on:click="editLineItem(line_item)">
Main.js vue-directive:
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.change(function(ev) {
// two-way set
//this.set(this.el.value);
var i, len, option, ref;
var values = [];
ref = this.el.selectedOptions;
if(this.el.multiple){
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
values.push(option.value)
}
this.set(values);
} else {
this.set(ref[0].value);
}
}.bind(this));
},
update: function(nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
var vm = new Vue({
el : '#wrapper',
components: {
LineItemComponent
}
});
Script in edit.blade.php file:
<script>
$(document).ready(function() {
$('#lineItemModal').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen('destroy').chosen();
});
}
</script>
by default, custom directives have a priority of 1000. v-model has a priority of 800 meaning it's evaluated after v-chosen when the template is compiled.
My Assumption is now: this is also affecting the update.
What I mean by that: I think $(this.el).trigger("chosen:updated"); in the v-chosen update method is called before v-model did refresh the selected attribute on the list of <option> elements - and that's where chosen checks for the new selected value.
Long story short: try this:
Vue.directive('chosen', {
priority: 700, // Priority lower than v-model
twoWay: true, // note the two-way binding
bind: function () {
....
I've written a program that includes a form that the user interacts with. Because there are lots of events bound to different buttons I have written a loop that parses some JS that contains the form input information. Here is some example data:
var value = 0,
forms = {
place_controls : {
attrs : {
'class' : 'place-form'
},
input : {
place_x : {
attrs : {
type : 'text',
},
events : {
change : function () {
value = 10;
}
}
},
place_y : {
attrs : {
type : 'text',
},
events : {
change : function () {
value = 50
}
}
}
}
}
}
The data is then parsed by this:
$.each(forms, function (form_index, form) {
var $form_markup = $('<form>').attr(form.attrs);
// Next: loop through each input element of the form we've reached
$.each(form.input, function (element_index, element) {
var $elem = $('<input>').attr(element.attrs);
$elem.appendTo($form_markup);
if (element.events !== undefined) {
$.each(element.events, function (event_index, event) {
$elem.bind(event_index, event);
//$form_markup.on(event_index, $elem, event);
});
}
});
$form_markup.appendTo($form_goes_here);
});
As you can see, I'm using .bind() at the moment, however I want to use .on(). Unfortunately, when I do this all of the items within a form are bound to the last event parsed by the function. When I use .bind() everything works as planned - i.e. Clicking on 'place_x' sets value to 10, clicking 'place_y' sets value to 50.
When using .on(), whichever I change sets value to 50, which I am assuming is because the last function is becoming bound to each event.
Can anybody see what I have done wrong?
Update: There are many different ways to do this, and I have subsequently changed how my code works, however this question is related to why .bind() is working and why .on() is not.
//$elem.bind(event_index, event);
//It looks like you should just be using .on() like this
$elem.on(event_index, event);
The way it looks like you are trying to use .on() is in the live -bubbling- event sort of way, it looks like only the last event you are created is sticking, why each value just gets set to 50.
//$form_markup.on(event_index, $elem, event);
You can create elements with property maps that include handler functions in one simple call:
var $elem = $('<input/>', properties);
The "properties" object can contain event handlers:
var $elem = $('<input/>', {
type: 'text',
name: 'somethingUseful',
click: function(ev) { /* click handler */ },
change: function(ev) { /* change handler */ },
css: { color: "red" }
});
I'm having issues with scope in Javascript. Take a look at this code, for example:
$(function() {
var items = "GLOBAL";
$('.add').click(function() {
$.post("main/get", { 'get' : 'all' },
function(data){
items = String(data.result);
items = items.split(' *** ');
alert(items);
}, "json");
alert(items);
return false;
});
$(".add").autocomplete({
source: items
});
});
I'm trying to get autocomplete working, and it almost is. The only problem is that I can't seem to change items outside of the inner-most function. The first alert gives me what I'm looking for, but the second just gives me "GLOBAL." The bottom autocomplete part has to be able to access it.
Any help is appreciated!
Thanks!
It is not just a scope issue. Since your request is very likely to happen asynchronously (unless configured otherwise) it won't work that way anyway. You have to initialize the autocomplete in the callback function which gets called once your AJAX request is complete:
$(function() {
$('.add').click(function() {
$.post("main/get", { 'get' : 'all' },
function(data){
var items = String(data.result);
items = items.split(' *** ');
$(".add").autocomplete({
source: items
});
}, "json");
});
});