I'm using this code to save inline edited data with Datatabled Editor.
// Activate an inline edit on click of a table cell
$(document).on( 'click', '#dataTablesEditor tbody tr:not(.dtrg-group) td:not(:first-child)', function (e) {
editor.inline( table.cell( this ).index(), {
onBlur: 'submit'
} );
} );
onBlur is useful when editing a cell. But when changing a select in a cell i'd like to submit also.
So how can i add something like: When editing a cell = onblur: submit, when selecting an option in a select = select: submit ?
Related
I have a multiple select with a filter. Filtering works properly, but when you select a filtered item it does not change to the selected state (there is no tick in the box of the selected item).
I followed the instructions of the offical JQuery Mobile page. The only difference is that they do not use a multiple select. Is there a workaround to have the filter functionality with multiple select boxes?
JQuery Mobile filterable select
My select:
<form>
<div class="ui-field-contain">
<label for="title-filter-menu">Placeholder:</label>
<select id="title-filter-menu" multi data-native-menu="false" class="filterable-select">
<option>Select fruit...</option>
<option value="orange">Orange</option>
<option value="apple">Apple</option>
<option value="peach">Peach</option>
<option value="lemon">Lemon</option>
</select>
</div>
</form>
JS
( function( $ ) {
function pageIsSelectmenuDialog( page ) {
var isDialog = false,
id = page && page.attr( "id" );
$( ".filterable-select" ).each( function() {
if ( $( this ).attr( "id" ) + "-dialog" === id ) {
isDialog = true;
return false;
}
});
return isDialog;
}
$.mobile.document
// Upon creation of the select menu, we want to make use of the fact that the ID of the
// listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
// We retrieve the listview and insert a search input before it.
.on( "selectmenucreate", ".filterable-select", function( event ) {
var input,
selectmenu = $( event.target ),
list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
form = list.jqmData( "filter-form" );
// We store the generated form in a variable attached to the popup so we avoid creating a
// second form/input field when the listview is destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
list
.before( form )
.jqmData( "filter-form", form ) ;
form.jqmData( "listview", list );
}
// Instantiate a filterable widget on the newly created selectmenu widget and indicate that
// the generated input form element is to be used for the filtering.
selectmenu
.filterable({
input: input,
children: "> option[value]"
})
// Rebuild the custom select menu's list items to reflect the results of the filtering
// done on the select menu.
.on( "filterablefilter", function() {
selectmenu.selectmenu( "refresh" );
});
})
// The custom select list may show up as either a popup or a dialog, depending on how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on( "pagecontainerbeforeshow", function( event, data ) {
var listview, form;
// We only handle the appearance of a dialog generated by a filterable selectmenu
if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
listview = data.toPage.find( "ul" );
form = listview.jqmData( "filter-form" );
// Attach a reference to the listview as a data item to the dialog, because during the
// pagecontainerhide handler below the selectmenu widget will already have returned the
// listview to the popup, so we won't be able to find it inside the dialog with a selector.
data.toPage.jqmData( "listview", listview );
// Place the form before the listview in the dialog.
listview.before( form );
})
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on( "pagecontainerhide", function( event, data ) {
var listview, form;
// We only handle the disappearance of a dialog generated by a filterable selectmenu
if ( !pageIsSelectmenuDialog( data.prevPage ) ) {
return;
}
listview = data.prevPage.jqmData( "listview" ),
form = listview.jqmData( "filter-form" );
// Put the form back in the popup. It goes ahead of the listview.
listview.before( form );
});
})( jQuery );
CSS
.ui-selectmenu.ui-popup .ui-input-search {
margin-left: .5em;
margin-right: .5em;
}
.ui-selectmenu.ui-dialog .ui-content {
padding-top: 0;
}
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
margin-top: 0;
}
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
border-top-width: 1px;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
border-bottom-width: 1px;
}
I found out, that the right option is selected, but the shown selected state in the filtered list is wrong.
If you have the options
a1
b1
c2
d2
with an filter "1" you get
a1
b1
you can correctly select each of them.
If you filter "2"
you get
c2
d2
if you select c2 (which is the first option of the selected list and the third of the original list) jquerymobile tries to show selected state on the !third! option of the !filtered list". thats the bug.
However, with the basic filtered select example ist works (first one in http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/)
Problem here: The filter bar (search input) is above the select Header (Closing icon + Label).
I've seen many questions posted on this topic but none of the answers/suggestions seemed to work for me. I'm fairly new to JQuery so some assistance will be much appreciated!
I've got a table with links. For some reason I can only open the dialog box for the first record (I can do this multiple times). It doesn't work for any other records.
Here's my code:
$(document).ready(function() {
var dlg=$('#ticketDetails').dialog({
title: 'Ticket Details',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:850,
height:700
});
$('#view').click(function(e) {
//testing with static record
dlg.load('displayRecord.php?id=215', function(){
dlg.dialog('open');
});
});
});
all rows in the table has the following table link:
echo '<td>View </td>';
The div to display the dialog:
<div id="ticketDetails"> </div>
I also tried sticking alert('1'); into the $('#view').click function which does not fire for other records.
In your table, each row has the same id, "view". An id is supposed to be unique for a single element on a page, so you should change this to a class:
<td>View</td>
and change your script accordingly:
$('.view').click(function(e) { ... });
Inside the event handler, you can use the event variable e to get the element that was clicked, using its target property:
$('.view').click(function(e) {
alert( $(e.target).text() );
});
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 am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.
When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.
How can I override this and have the focus set to 'ID' field when opened?
here the open function is called after the dialog box open happens.
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourText').focus();
}
});
To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
Source code to create a dialog with two buttons and set focus on a button
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog" ).dialog({
modal: true,
minHeight:200,
minWidth:190,
buttons: {
Delete: function() {
// do something
},
Cancel: function() {
$( this ).dialog("close");
}
}
});
//to set focus on cancel button
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
});
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("");
}
}
});
});