How to focus the last Element in a JQuery UI Autocomplete - javascript

I use JQuery Ui Autocomplete and position the suggestion box above the input field as shown in the image below. When I use autoFocus: true I can set a focus on the first element of the list.
Now, I want that the last element of the list is in focus (i.e., the element which is the closest to the input field). How can I do that? How can I select the last element in the list?
Javascript:
$input.autocomplete({
source: someUrl,
minLength: 2,
autoFocus: true,
position: { my : "left bottom", at: "left top", collision: "none" }
}); // end autocomplete

$input.autocomplete(someUrl, {
matchContains: true, minChars: 1, scroll:true, autoFill: false, scrollHeight: 240,
formatItem: function (row, i, max, term) {
return row.display;
},
formatResult: function (row) {
return row.value;
},
displayPosition: "left"
});

Related

Magnific popup does not work on second page of Datatables

I have created a datatables and add an image column into datatables. When i click image, i would like to image open at popup. It is work on for first page of datatable, however when i passed to second page, it doesn't work. Also i put alert() to test second page event and alert() works, but popup does not.
Please check my snippets: https://jsfiddle.net/f08qdeq2/20/
How can i solve this problem, any ideas? Thank You
$(document).ready(function() {
var table = $('#datatable').dataTable({
aLengthMenu: [
[1, 2],
[1, 2]
],
iDisplayLength: 1
});
});
$(this.document).ready(function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
});
});
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
//$('.image-popup-no-margins').magnificPopup({
//Some Working code here
//});
})
You should use fnDrawCallback for initialize your popup. try this...
$(document).ready(function() {
var table = $('#datatable').dataTable({
aLengthMenu: [
[1, 2],
[1, 2]
],
iDisplayLength: 1,
"fnDrawCallback": function () {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
});
}
});
});
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
})
Result : https://jsfiddle.net/cmedina/f08qdeq2/21/
just adding this will work for normal click event, based on this you can do anything with model(pop-up).
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
})

qtip will not disappear when i will click the another qtip

I used the qtip2 jquery plugin. The first qtip will appear when i will click the menu.the second qtip will appear when the mouse enter the first qtip. I set the first qtip is disappear when i will click the outside of the first qtip.But first qtip will not disappear when i will click the second qtip.
first Qtip:
hide = {
fixed: true,
delay: 300,
}
Actual result:first qtip is disappear when i will click the outside of the first qtip and click the second qtip itself.
Expected Result:first qtip will disappear when i will click the outside of the first qtip. but first qtip will not disappear when i will click the second qtip.
Note:The second qtip is fully placed the outside of the first qtip.
my code is:
_this.qtip({
style: {
classes: 'Details',
tip: {
corner: 'right center'
}
},
content:{
text:"HAI"
},
show: {
ready: true
},
hide: {
fixed: true,
when: 'unfocus',
},
position: {
my: 'right center',
at: 'center left',
adjust: {
x: -8,
y: 0
}
},
events: {
render: function(event, api){
$(this, api.elements.content).on("click", function(){
$('.tip-studio-right-menu').qtip("show");
});
},
hide: function(event, api){
api.destroy();
}
}
});

Datatables I can't call an onclick event after I paginate?

I am using http://datatables.net/
The demo table on their homepage resembles pretty much the exact same thing that i'm using (pagination, specifically), except each row has an area to click:
<%= Post.title %>
This link opens a jquery UI modal dialog which displays some information which is ajax requested.
Part 1 (solved), see part 2 below
I'm trying to run an onclick event which works normally on page one, but as soon as i go to page 2 (or any others) it stops working. I checked the source to make sure it wasnt doing anything funny in all the code is infact there (all the rows, even the ones hidden by the pagination)
Any ideas?
$(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: false,
maxHeight: 600,
width: 650,
modal: true,
beforeClose: function close() {
$('#dialog').html('');
}
});
$('.show-post').click(function() {
clickLink(this);
return false;
});
});
Thanks to those who answered my question! I fixed that issue.
Part 2
my next 'issue' id like to get to work is... I'm using the left and right arrow keys to allow them to 'scan' to the next or previous row, and display the information. This is as opposed to closing it and then having to click the next one.
I'd like to make it so when you get to the bottom of page one, or top of page two, hidding next/previous respectively will automatically load that page, go to the top (or bottom), then open that dialog for that row on the other page.
heres my click function (i know its kind of probably not structured the best... im new to jquery)
$(document).ready(function() {
oTable = $('#posts').dataTable({
"bJQueryUI": true,
"iDisplayLength": 400,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
});
$(this).keydown(function(e) {
var id = $("#dialog").attr("data-id");
currentPost = $("#posts tr[data-id=" + id + "]");
if (e.keyCode == 39 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).blur()
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var next = currentPost.next().find(".show-post");
clickLink(next);
} else if (e.keyCode == 37 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var prev = currentPost.prev().find(".show-post");
clickLink(prev)
}
});
});
heres the actual click function
function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');
/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");
$('#dialog').attr("data-id", id);
$('#dialog').load('/show-post/' + id, function() {
$.ajax({
type: "POST",
url: "/checkstatus/" + id,
dataType: "html",
error: function(data){
$("#dialog").fadeOut("fast", function() {
$("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
});
}
});
/* Set Visited */
$(post).parent().parent().removeClass("visited").addClass("visited");
$('#dialog').dialog({
title: post.html(),
beforeClose: function close() {
$(post).parent().parent().find("td.sorting_1").removeClass("current");
$(post).parent().parent().removeClass("current");
},
buttons: {
"Email 1": function() {
$.ajax({
type: "POST",
url: "/get-email/" + id + "/" + "1",
dataType: "html",
success: function(data) {
window.location.href = data + "&subject=" + post.html();
}
});
},
}
});
$('#dialog').dialog('open');
});
return false;
};
The example on the link you provided appears to be adding/removing DOM elements, meaning that elements on subsequent pages probably are not in the DOM on page load. Have you tried using event delegation?
$(<root element>).delegate('.show-post', 'click', function() {
clickLink(this);
return false;
});
Where <root element> can be document but should be set to an ancestor element that is always in the DOM.
.delegate():
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Source: http://api.jquery.com/delegate
UPDATE
Note that .delegate() is an alias of .on() now, so if you're using jQuery 1.7+ I would just use .on() right from the get-go. Almost the same syntax except the selector and event are swapped: $(<root element>).on('click', '.show-post', function() { ... });
Source: Thanks Greg Pettit, Excellent Comment
Below Code is working Perfectly. When you click the pagination button 'drawCallback' class Call some function after table load.
$("#YourTableID").dataTable({
bJQueryUI: false,
bFilter: false,
bSearchable: false,
bInfo: false,
bAutoWidth: false,
bDestroy: true,
"oLanguage": {
"sEmptyTable": "No Records Found"
},
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": 5,
aaData: arrv,
aoColumns: [{
sTitle: "Select",
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
sTitle: "Course name"
}, {
sTitle: "Level"
}, {
sTitle: "Study Mode"
}, {
sTitle: "Entry Year"
}, {
sTitle: "Point of Entry"
}, {
sTitle: "Awarding qualification"
}],
drawCallback: function () {
//Some function...
},
select: {
style: 'os',
background: 'color:gray',
selector: 'td:first-child'
},
order: [[1, 'asc']],
});
As #scrappedcola pointed out in the comments, your click handler is lost after pagination. There is a drawCallback function for DataTables you can implement which will fire after the table is "re-drawn" (hence drawCallback). Here is an example:
$('#someId').DataTable({
lengthMenu: [ 25, 50, 100, 200 ],
order: [[ 0, 'asc' ]],
processing: true,
serverSide: true,
stateSave: true,
responsive: true,
bDestroy: true,
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
],
drawCallback: function() {
var api = this.api();
api.$('#someBtnId').click(function() {
// do some click handler stuff
});
}
});

How do I access the triggering element using QTip?

I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.
I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.
Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,

Something like setCell for form edit in JqGrid

Ok, I've been looking for a answer in alot of #Oleg 's answers but I couldn't find anything. I have this grid, where a can edit in line, in some fields, I'm working with autocomplete and when I select some item, I use setCell, to write the value in another field. My column model is something like this...
{ name: 'Label', index: 'Label', width: 100, align: 'Center', sorttype: "string",
editable: true, editrules: { required: true },
editoptions: {
dataInit: function (elem) {
$(elem).autocomplete({
autoFocus: true,
source: function (request, response) {
PageMethods.ObtLabels(request.term, function (data) {
var tiposCliente = (typeof data) == 'string' ?
eval('(' + data + ')') : data;
response(tiposCliente);
}, fnLlamadaError);
},
minLength: 1,
select: function (event, ui) {
var rowid = $('#pendientes').getGridParam('selrow');
**jQuery('#pendientes').setCell(rowid, 'LabelId', ui.item.id);**
}
});
}
}
},
this work fine when edit and add inline but, when I want to add or edit a row with the Form, I can not write the value in another field.
I don't know if my question is clear. I just want to write something in the "X" field, depending the opcion I chose in the "Y" field. All this using the Form.
If someone can help me it would be great.
Thanks a lot !
UPDATE AND SOLUTION:
I Just add the next line to my code:
$('input#LabelId').val(ui.item.id);
And its work, with that I write in the LAbelId the selected item's value
in the end el code for my column with autocomplete is something like this:
{ name: 'Label', index: 'Label', width: 100, align: 'Center', sorttype: "string",
editable: true, editrules: { required: true },
editoptions: {
dataInit: function (elem) {
$(elem).autocomplete({
autoFocus: true,
source: function (request, response) {
PageMethods.ObtLabels(request.term, function (data) {
var tiposCliente = (typeof data) == 'string' ?
eval('(' + data + ')') : data;
response(tiposCliente);
}, fnLlamadaError);
},
minLength: 1,
select: function (event, ui) {
var rowid = $('#pendientes').getGridParam('selrow');
jQuery('#pendientes').setCell(rowid, 'LabelId', ui.item.id);
**$('input#LabelId').val(ui.item.id);**
}
});
}
}
},
Ok, I found the answer, I just Add the next line...
$('input#ClienteProveedor').val(ui.item.id);
this write the ui.item.id to the "Y" field that I wanted.

Categories