I'm using the AutoComplete UI widget for a form to allow users to type in a customer name. The idea is that they can either select an existing customer and populate other fields in the form, or they can free-type a new customer to be created. When a user selects an existing customer, I use the select event to populate a hidden input to store the ID associated with that customer.
The problem I'm having is if a user first selects a customer from the list but then goes in and edits the text, in effect creating a new customer, I need to be able to clear out that hidden input ID value.
I referred to this SO question and created the following code:
$(function() {
$("#customerName").autocomplete({
source: "/Customers/CustomerListJSON",
minLength: 2,
select: function(event, ui) {
$("#customerId").val(ui.item ? ui.item.Id : "");
},
change: function(event, ui) {
try {
$("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
if (event.originalEvent.type != "menuselected")
$("#customerId").val("");
} catch (err) {
$("#customerId").val("");
}
}
});
});
The problem is that the change event is fired on blur, so if a user selects a customer, the hidden input value is populated, but as soon as they move focus off the input box it's cleared right away. However, if I exclude the blur event from the event.originalEvent.type test, then the hidden field's value never gets reset in the original scenario where a user edits a previously-selected value.
Has anyone had to tackle this before, and if so can you offer some guidance on how I can manage that hidden input's value so it's populated only when an item is selected from the list and cleared with any other value?
Looks like I solved this pretty quickly on my own. Referring to the JQuery UI wiki, the ui item in the change event is the same one in the select event, so I can modify my code to read like this:
$(function() {
$("#customerName").autocomplete({
source: "/Customers/CustomerListJSON",
minLength: 2,
select: function(event, ui) {
$("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
},
change: function(event, ui) {
$("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
}
});
});
There's no need to test for the event, just for whether there is an item in the ui argument. The ID setting in the select event is probably redundant, but to be safe I'm going to keep both.
$(function() {
$("#customerName").autocomplete({
source: "/Customers/CustomerListJSON",
minLength: 2,
select: function(event, ui) {
$("#customerId").val(ui.item ? ui.item.Id : "");
},
change: function(event, ui) {
try {
$("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
if (event.originalEvent.type != "menuselected")
$("#customerId").val("");
} catch (err) {
$("#customerId").val("");
}
}
});
});
Related
I'm trying to get the change event of the autocomplete jquery ui widget to work but it doesn't seem to run when the user erases the field. Here is what I have:
$("#clientInput").autocomplete({
minLength: 2,
autoFocus: true,
...
change: function(event, ui) {
if(ui.item === null) {
$(".one_third").load("Order/OrderBook", { client: "" });
}
}
});
It seems to work when the text changes from one value to another but not when the user erases the field. What should I be doing?
First of all, I introduce a text in the city input, city input is autocomplete(Jquery UI), and then I select a locality and press enter. Afterwards I add new field to search. When I press new field, jqgrid clears city field.
This is a part of my code.
{
name:'City',
index:'City',
width:220,
align:"center",
sortable:true,
editable:true,
edittype:'select',
editoptions:{
value:load_City
},
stype:'text',
searchoptions:{
dataInit:function(el){
$(el).autocomplete({
selectFirst:true,
source: "Codigo/Datos/localidades.php?autocomplete=verdadero"
})
},
sopt:['eq','ne','lt','le','gt','ge']
}
}
If I understand your problem correctly you should add should trigger change event after new value in autocomplete will be selected:
$(el).autocomplete({
selectFirst: true,
source: "Codigo/Datos/localidades.php?autocomplete=verdadero",
select: function (event) {
$(el).trigger('change');
}
});
I have two JQuery UI autocomplete input fields.
When an option is selected in the first one, the value of the selection will be used as condition for a database query that will send the source data for the second autocomplete field.
My problem is how do I send the value of the first selection to the PHP page via Post method?
The code so far is shown below (this code is from a tutorial which used the GET method; but I want to use Post):
<script>
$("input#divisions").autocomplete ({
//this is the first input
source : [
{ value: "81", label: "City1" },
{ value: "82", label: "City2" },
{ value: "83", label: "City3" } ],
minLength : 0,
select: function(event, ui) {
$('#divisions').val(ui.item.label);
return false;
},
focus: function(event, ui){
$('#divisions').val(ui.item.label);
return false;
},
change: function(event, ui){
//the tutorial has this value sent by variables in the URL; I want the selection value sent by POST. How can I change this?
c_t_v_choices = "c_t_v_choices.php?filter=" + ui.item.value;
$("#c_t_v").autocomplete("option", "source", c_t_v_choices);
}
}).focus (function (event)
{
$(this).autocomplete ("search", "");
});
$("#c_t_v").autocomplete({
source: "",
minLength: 2,
select: function(event,ui){
//$('#city').val(ui.item.city);
}
});
</script>
Can anyone please help?
Dont hesitate to let me know if you have any questions.
The solution I found for this is to use AJAX to create the source when a selection is made in the first autocomplete.
Sample code can be found here: https://stackoverflow.com/questions/12715204/assigning-source-for-jquery-autocomplete
I have shopping cart set up where the user can drag an item from the store shelf and place it in the shopping cart. This all works great. The next step of programming that I cannot resolve is how to remove the item from the cart with a click. There is this in the documentation but there is no example to call it.
$('.drag_box').bind('click', function() {
this.sortable( "destroy" );
});
Does nothing. Help please.
If you just want to remove the element, you can use
$('.drag_box').bind('click', function() {
$(this).remove();
});
Thank you - I have added this but it still moves the original DOM element, what I was ultimately looking to do was to leave the original there and add a different class to it so the user would know it was in the cart. Here is my code.
$(function() {
$("drag_box").sortable({
connectWith: 'li.empty_list',
opacity: 0.6,
handle: 'img',
forcePlaceholderSize: true,
clone:'helper',
revert:true
});
$( "li.empty_list" ).sortable({
stop: function(event, ui) {
$(ui.item).addClass("moved");
}
});
I have been wrestling with this one for a while now.
I want to have a confirm() before someone changes the accordion.
I have tried:
$(document).ready(function() {
var edited = false;
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
});
With little joy! I have also tried something like this
$(".accordion-me h3").each(function() {
$(this).unbind("click");
$(this).click(function(e) {
if (confirm("You have unsaved changes! Do you want to navigate away?")) {
$(this).unbind("click");
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
$(this).click();
}
});
});
But again with no joy.
Any help would be greatly appreciated.
Cheers
Use an empty event when creating the accordion, which will allow you to manage the click event of the accordion using a jQuery .click function.
You can then process the confirm box and allow the accordion click event to be executed only if confirmed.
$(document).ready(function()
{
var edited = false,
accordion_me = $('.accordion-me');
// activate the accordion, but with an empty event
accordion_me.accordion({
autoHeight: false,
navigation: true,
event: ''
});
// here's the new accordion event
$('.accordion-me h3').click(function()
{
// find the index of the event being called
var i = $('.accordion-me h3').index(this);
// if we have unsaved changes and do not confirm, stop accordion execution
if (edited && !confirm('You have unsaved changes. Do you want to navigate away?'))
{
return false;
}
// continue with the accordion execution. Activate the requested event index.
accordion_me.accordion('activate', i);
return false;
});
});
If your accordion is collapsible (as mine is) your accordion will still work as it did before.
Also, if you only have 1 accordion, I would recommend using an id to call it instead of the .accordion-me class, which will save some overhead.
If you still need to use a class to call it, put an html tag before it, i.e. div.accordion-me.
You have to bind it to the click event on the anchor tag. For example, if your header links are:
header 1
code would be (also in the document.ready function)
$('.accordionHeaderLink').click(function(){
if (!confirm("You have unsaved changes. Do you want to navigate away?")) {
return false;
}
});