Select username everywhere with selector - javascript

I'm using selectable() from jQuery it works just the way i want it.
But i want to go to the next step, i want it to select the message too inside the main chat.
So the text of the selected nickname will highlight too in the main chat.
JsFiddle http://jsfiddle.net/56SkH/13/
UPDATE
What i wanna to do is that when Nickname is selected from users that the channelmessage automaticly is being selected from the users.

$(function() {
$('#users').selectable({
selected: function(event, ui) {
var user = ui.selected.id.toLowerCase();
$('.channelmessage.'+user).addClass('ui-selected');
},
unselected: function(event, ui) {
$('.channelmessage').removeClass('ui-selected');
},
});
});
DEMO: http://jsfiddle.net/56SkH/23/

Try this - On click of each name corresponding message also selected using 'stop' property of selectable().
$(function () {
$("#users").selectable({
stop: function () {
$("#users li").each(function (key) {
$("#Nickname" +(key+1)+ "_message").css({"background":"white","color":"black"});
});
$(".ui-selected", this).each(function (key) {
var index = $( "#users li" ).index( this );
$("#Nickname" +(index + 1)+ "_message").css({"background":"#F39814","color":"white"});
});
}
});
});

It's easy to add a dummy class to each chat message, and the selector will be more efficient than searching for a name string.
$(function() {
$( '#users').selectable({
filter: "li",
selecting: function( event, ui ) {
$(".ui-selected").removeClass("ui-selected");
$('.channelmessage span.message.' + ui.selecting.id).addClass("ui-selected");
}
});
});
Here you have a working JSFiddle sample:
http://jsfiddle.net/56SkH/21/

You can force the selection on the element by adding the class ui-selected and using the selected event:
$(function () {
$('#users').selectable({
selected: function (event, ui) {
$(".channelmessage span.nickname.ui-selected").removeClass("ui-selected");
$(".channelmessage span.nickname:contains('" + ui.selected.id + "')").addClass("ui-selected");
}
});
});
In the example I use the span content as contains selctor, by I have modified a bit the HTML markup like:
<p class="channelmessage"> <span class="nickname">Nickname2</span><span>:</span>
<span class="message">Message</span>
</p>
Demo: http://jsfiddle.net/IrvinDominin/LnnLT/

Related

jQuery UI Sortable Widget dynamically added lists not triggering events

What I have is have a two sortable list, where one is populated with a set of items. Users should be able to sort between these lists.
They should also be able to create new lists which they can also add the inital items. So the sortable elements are static but the sortable lists are dynamic.
The sortable events are triggered for the initial two lists and work fine. However the problem is with the dynamically added lists. They get added no problem and you can sort items into them. The problem is that the none of the events are triggered such as 'receive' or 'activate', so when I drag an element to one of the new lists I want to get the id of the list, but it never triggers any of those events.
Here is a simple fiddle of it
JS Fiddle
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function(event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log('receiving id :' + receivingID);
}}).disableSelection();
This never seems to run on the dynamically added lists
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable"
,
activate: function(event, ui) {
console.log("activated list" + id);
}}
).disableSelection(); }
This is what is run when the user adds another list.
Here is an update to your JS Fiddle with the problem resolved. LINK!
The $(".connectedSortable").sortable(...) chunk needs to be run at the end of the $('#add_new_list').click(...) function. The .sortable(...) code adds sortable to all existing items but not future items.
The changes I've made wrap the .sortable(...) in a function called refreshHooks() which is run on page load and again every time "Add New List" is clicked.
$(document).ready(function () {
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable",
activate: function (event, ui) {
console.log("activated list" + id);
}}
).disableSelection();
}
var list_counter = 2;
$('#add_new_list').click(function () {
$('#add_new_list').before($(
'<ul id="list' + list_counter + '"' +
' class="connectedSortable"></ul>'
));
var lists = {};
lists.list_id = ['list' + list_counter];
makeSortable(lists.list_id);
list_counter++;
refreshHooks();
});
function refreshHooks() {
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function (event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log(receivingID);
},
activate: function (event, ui) {
console.log("activated list");
}
}).disableSelection();
}
refreshHooks();
});

Get the title of a selectable item in jQuery

I have a list of selectable buttons, whose names are being dynamically generated by reading from a JSON file. Every time a button is clicked, I want the get its title, i.e. row["name"]. Here's my relevant code and the JSON:
<head>
<script>
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
var selectableObj = {
selected: function(event, ui){
}
}
$(function() {
$( "#selectable" ).selectable(selectableObj);
});
</script>
</head>
<body>
</body>
The JSON data:
{
"data": [
{
"name": "ABC",
"visited" : "Yes"
},
{
"name": "DEF",
"visited" : "Yes"
},
{
"name": "GHI",
"locked": "No"
},
],
}
This works, in that I get a list of selectables in the format:
<ol id="selectable">
<li class="ui-widget-content">ABC</li>
<li class="ui-widget-content">DEF</li>
<li class="ui-widget-content">GHI</li>
</ol>
When I click on, say, the first button, I want to get the value "ABC". I don't know how to do this. I read about .text(), but cannot understand to use it. Can anyone help please?
EDIT - Based on some comments, I changed my code like this, but it doesn't work:
<script>
$(function() {
$( "#selectable" ).selectable();
});
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
</script>
I think this is what you looking for
selected: function() {
$( ".ui-selected", this ).each(function() {
alert($(this).text());
});
}
});
DEMO
$('#selectable').on('click', 'li', function(evt){
var text = $(this).text();
console.log(text);
});
The explanation is of how this works is that it attaches a click event to the parent of the list item, which is #selectable in the code you provided. Binding an event to the parent element attaches one event to the DOM in total instead of attaching an event for every list item, so it is very efficient. This concept is known as event delegation.
The function that appears inside of on() uses the $(this) selector, which makes sure you are getting the text of the item that has been clicked upon only.
You can do this:
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/
EDIT:
Please try this way instead:
$('body').on('click', '.ui-widget-content', function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/1/

How do I get a value where a drag-able element dropped?

I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.
At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});
Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.
You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/

How to get current tab title which i named in Jquery Tabs UI

I'm using http://jqueryui.com/demos/tabs/#manipulation. I want to get an title of current selected tab which I earlier named (e.g. from a href). How to get it?
I tried:
$(ui.tab).attr('href')
Alternative way to get tab title:
var selected = $("#tabs").tabs( "option", "selected" );
var selectedTabTitle = $($("#tabs li")[selected]).text();
From the jquery docs,
var selectedTabTitle = null;
$( ".selector" ).tabs({
select: function(event, ui) {
selectedTabTitle = $(ui.tab).text();
alert(selectedTabTitle);
}
});
Use following in case of jQuery 1.9+,
var currentTabTitle = $('div[id="mytabs"] ul .ui-tabs-active > a').attr("href");
Just another version:
$("#tabsId .ui-state-active > a").html()
i guess jquery was modified because now i was able to fetch tab name using:
$(function () {
$( "#tabs" ).tabs({
activate : function (event,ui) {
selectedTabTitle = ui.newTab[0].innerText;
alert(selectedTabTitle);
}
});
});
Thanks I was struggling with this code.
Now I've used thiscode in my program. Working like this.
$('#tabs').click('tabsselect', function (event, ui) {
var selectedTab = $("#tabs").tabs('option','selected');
alert("selectedTab===>" + $($("#tabs li")[selectedTab]).text());
});

jquery autocomplete get selected item text

I am wondering how to grab the selected item's text value on jquery autocomplete.
I have initialised jquery as following :
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
}
});
});
And I have created a function function AutoCompleteSelectHandler(event, ui) { }.
Inside this function I want to some extra handling to feed data into correct textboxes but I can't figure out how to grab the text value of the selected item.
I did google a bit and tried examples but I can't seem to get it working.
Any help will be much appreciated.
Thanks a lot advance.
The ui parameter has an item property with the selected text
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
alert(selectedObj.value);
}
source: http://jqueryui.com/demos/autocomplete/#event-select go to tab "Events" and then event "Select"
// list of clients
$( "#client" ).autocomplete({
source: "lib/getClientList.php",
minLength: 2,
select: function(event, ui) {
alert(ui.item.value);
}
})
;
The ui.item.value is the reference that jquery utilizes to assign a value to the input
You don't need to apply an anonymous function as a wrap, you can directly pass the function ref.
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: AutoCompleteSelectHandler
});
});
Within that method, you can either access this or event.target to get the current value, both values are referencing the input element:
function AutoCompleteSelectHandler(event, ui) {
alert( $(event.target).val() );
alert( $(this).val() );
// alert( this.value );
}
You just grab the value from the input in the same way you would if the user had typed it in themself:
$('input#autocomplete').val()

Categories

Resources