Develop Reference

Data is returned as undefined

I have this sortable function in which I want to be able to add users to a group. When I drag the user from the user-table to the group-table, I want to able to check if that ID already exists in the group-table, and if it does I want to respond with a error-message. However, when I try to loop trou and get the ID's from the group-table, I'm getting a undefined value.
HTML-code:
<div class="userContainer">
<div id="userDiv">
<ul class="userList dragable" ></ul>
</div>
<div id="groupDiv">
<select id="DropDown"></select>
<input id="btnGetGroups" class="btn btn-success" type="button"
value="Hämta grupper" />
<select id="DropDownGroups"></select>
<input id="btnShowGroups" class="btn btn-success" type="button"
value="Visa grupp" />
<ul class="usersOfGroupList dragable"></ul>
</div>
</div>
Here is the code for filling the group-table with current users:
$('#btnShowGroups').click(function () {
var e = document.getElementById("DropDownGroups");
groupId = e.options[e.selectedIndex].value;
$('.usersOfGroupList').empty();
$.getJSON("mylinkgoeshere" + groupId + "", function (result) {
$.each(result, function (i, value) {
$('.usersOfGroupList').append($("<li id='userElement' data-userId='' ></li>").data('userId', value.Id).html(value.FirstName + " " + value.LastName));
$(".usersOfGroupList").addClass("addBorder");
});
});
});
As you can see I'm using 'userId' as key in the data-property here.
The sortable-code looks like this:
$(".dragable").sortable({
connectWith: ".usersOfGroupList",
remove: function (e, ui) {
var $this = $(this);
var childs = $this.find('li');
if (childs.length === 0) {
$this.text("Nothing");
}
},
receive: function (e, ui) {
var array = [];
var $this = $(this);
var children = $this.find('li');
for (var i = 0; i < children.length; i++) {
var specificId = children[i].item.data('userId');
array.push(specificId);
console.log(array);
};
In the receive-property, I'm trying to get the current userIDs by looping trough all the li-elements and then push the ID's into a array, but it will only return undefined. I've debugged and the li-elements are there, but it gives me this error-message:
Uncaught TypeError: Cannot read property 'data' of undefined
at HTMLUListElement.receive

Use jquery to get elements name of values

I need to get all text of value, then use json to send the value to insert all of price to the database, but i had the problem, i can't get the text of all value where input text name='price'.
here this is HTML code:
<input type='text' id='price1' name='price[]'/>
<input type='text' id='price2' name='price[]'/>
<button type='button' id='btn'/>
and this is JS code:
$('#btn').click(function (e) {
var myprice = [];
myprice = $("*[name='price']").val();
$.post(
"index.php",
{
type: "insert",
price: myprice,
}
).done(function (data) {
console.log(data);
})
});

You can use .map() to get all the values:
var myprice = $('[name="price[]"]').map(function(i,v) {
return v.value;
}).get().join(',');
//result: "value1,value2..."
DEMO
Or $.map():
var myprice = $.map($('[name="price[]"]'), function(v,i) {
return v.value;
}).join(',');
DEMO

You cannot get values once, you need to iterate as you need multiple input values.
and use the correct name, change your html:
<input type='text' id='price1' name='price'/>
<input type='text' id='price2' name='price'/>
and code:
var myprice = [];
for(var i=0; i < $("*[name='price']").length; i++){
myprice.push($("*[name='price']:eq("+i+")").val());
}

You can loop through your items (no brackets needed, no change to your HTML) and add them to the array easily -
$('#btn').click(function (e) {
e.preventDefault();
var myprice = [];
$("*[name='price']").each(function() {
myprice.push( $(this).val() );
});
console.log(myprice); // e.g., ["56", "42"]
});
Here is an EXAMPLE

The name is price[], not price.

get correct output for correct click

I want to put the value from the input into the div depending upon the key that is pressed.
What is wrong with the code and how to correct it.
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
$('button').click(function() {
var k = this.id.substr(this.id.length -1);
var mp = $('#mp'+k).value;
$('#out').html (mp);
});
http://jsfiddle.net/ftE36/1/

You should either use Vanilla JS:
document.getElementById('mp'+k).value;
Or jQuery:
$("#mp"+k).val();
Avoid mix-and-match ;)

As i understand, i think you want something like this:
$('button').click(function(e) {
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
http://jsfiddle.net/jogesh_pi/RM4UQ/

try something like
$(document).ready(function () {
$("#mp1").keypress(function () {
$("#out").html($(this).val());
});
});

Please try the code:
html:
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
js:
$('button').click(function(e) {
//var id = e.target.id;
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
Demo
Hope it should helpful for you. Please try and let me know. Thanks.

is there any way findout duplicate id name in the page using jquery

my script is :
$('document').ready(function () {
var position = 0;
var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data[position].id).text(data[position].id);
$("#container").append(newdiv);
position++;position %= data.length;
});
});
My html is:
<html>
<body>
<button id="add">Add new div</button>
<div id="container"><div id="user3"></div></div>
</body>
</html>
when click a button i am appending new divs with some id name here before insert div i want to check all div id names if anything matches i don't want to append that div
my jsfiddle is here

$("#add").click(function() {
...
$.each(data, function(index, value) {
$("<div />").attr('id', value.id).text(value.id).appendTo("#container");
});
});
Please read the jQuery Cookbook. It'll help with the... headaches.

use array.length as the new id?
$('document').ready(function () { var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data.length).text(data.length); $("#container").append(newdiv);
var newData = {};
newData.id = 'user'+data.length;
data[data.length] = newData});
});
Thanks thiefmaster ;)

Convert javascript function to jQuery

How do I convert this javascript selected to jQuery? I need to select a button class rather than an ID, and I understand the easiest way to do this is jQuery.
var playButton1 = document.getElementById("playButton1");
playButton1.onclick = function() {
var ta = document.getElementById("playButton1");
document['player'].receiveText1(ta.value);
ta.value = ""
};

Try the following. You didn't specify the new class name so I assumed it was "playButton".
$(document).ready(function() {
$('.playButton').click(function() {
document['player'].receiveText1(this.value);
this.value = "";
});
});

var playButton1 = $("#playButton1");
playButton1.onclick = function() {
var ta = playButton1.val();
document['player'].receiveText1(ta);
playButton1.val('');
};

$('#playButton1').click(function(){
document['player'].receiveText1($('playerButton1').val());
$('playerButton1').val('');
});

var playButton1 = $("playButton1");
playButton1.click(function() {
var ta = $("playButton1");
document['player'].receiveText1(ta.val());
ta.val("");
});

<button class="playButton" value="1">Play 1</button>
<button class="playButton" value="2">Play 2</button>
<script type="text/javascript">
$(function(){
$(".playButton").click(function(){
document['player'].receiveText1($(this).val());
});
});
</script>

$('#Class').click(function(e){
document['player'].receiveText1(event.target.value);
event.target.value = ""
});