We Keep Coding

How to call an div's attributes value using a function if there are many div's with the same function?

I have the following code:
function openCanviewer() {
var cid = $(this).data('cid');
alert(cid);
}
And the HTML:
<div onclick="openCanviewer();" data-cid="ID OF CAN FROM DATABASE"></div>
My problem is that when I click the element with the onclick function, which I have many of because they get inserted from the database, the alert is just showing "undefined" instead of the contents of the data-cid attribute. Does someone have any idea what I have done wrong, or what I am missing here?

To capture the exact element, pass this from the element's click event handler
function openCanviewer(element) {
var cid = $(element).data('cid');
alert(cid);
}
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE"></div>
^^^ you have a typo here
Snippet
function openCanviewer(element) {
var cid = $(element).data('cid');
alert(cid);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE">Click</div>

$('#mi').click(function() {
var cid = $(this).data('cid');
alert(cid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mi" data-cid="ID OF CAN FROM DATABASE">hello</div>

In general you shouldn't use inline events like onclick="openCanviewer();", you should always keep js, css and html separate.
For your problem you could use delegate event listening:
function openCanviewer() {
var cid = $(this).data('cid');
alert(cid);
}
$(document).on('click', '[data-cid]', openCanviewer)

Get span value with jquery

I have tested every solution I have found on Internet, but none of them works.
I have this HTML:
<h4>Códigos disponibles:<span id="codesQuantity">#Model.ExternalCodesForThisProduct</span></h4>
And this Javascript:
$('#eCodesFrm').on('submit', function (e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var availableCodes = $("#codesQuantity");
var totalCodesUsed = 0;
alert(availableCodes);
$('#eCodesFrm *').filter(':input').each(function () {
if (this.name.match(/.Quantity$/)) {
totalCodesUsed = totalCodesUsed + parseInt(this.value, 10);
}
});
But availableCodes is [object Object].
What am I doing wrong?

If you need the inner element try .html(). As long as it's plain text in there there shouldn't be a problem.

To get the text inside the <span> use .text():
jQuery("#codesQuantity").text() //or $("#codesQuantity").text() if $ is jQuery in your code.

The problem here is that you're assigning a jQuery object to your variable, and not the content of the element. To extract the text inside the <span>, you should use either .html() or .text(), and do this instead:
var availableCodes = $("#codesQuantity").text();

Custom JS/CSS select alternative without jquery

I am trying to make a custom select just like this, but without jquery (I just dont want to import a whole new library for one single thing). I made it until this, but I dont know how I can make the selection with regular JS. How can I select something from the list?

If you just want to show the selected item in the dropdown,
You need to wrap the text to be displayed inside a <span> as follows
<div class="label"><span>Select Element</span><b class="button">▾</b>
</div>
Then you can change it's innterHTML to display the selected item using the following js:
var dd = document.querySelector('.label span');
var options = document.querySelectorAll('div.hidden ul li');
for (var i = 0; i < options.length; i++) {
options[i].onclick = select;
}
function show() {
var selectbox = document.getElementById("options");
if (selectbox.className == "hidden") {
selectbox.setAttribute("class", "visible");
} else {
selectbox.setAttribute("class", "hidden");
}
}
function select() {
dd.innerHTML = this.innerHTML;
}
Demo

Listen to clicks on your div#options. Demo
function choose(ev, el) {
var options = el, target = ev.target,
value = ev.target.innerHTML;
options.setAttribute('class', 'hidden');
options.parentElement.querySelector('.label').innerHTML = value;
}
<div id="options" class="hidden" onclick='choose (event, this);'>
Side notes. I don't recommend to use inline handlers. Use addEventListener instead.

You need to define an onclick handler of your li elements. Either in HTML, or in JS by looping through children of div container with li elements http://jsfiddle.net/rWU5t/2/
If you want fancy item highlights on mouse hover, you also need to define onmouseover and onmouseout handlers.

remove extra space after adding text with jquery

My html markup is looking like this : <div id="somediv"> [whitespace] text</div> and I'm adding this value like inside an input element like this:
jQuery('.votefilters span a:first').on('click', function(event) {
jQuery('input[name="search"]').val(jQuery('.myo-poll-bar.firstoption').text());
jQuery('input[name="search"]').keyup();
});
This works fine but the problem is that is adding the value with the whitespaces and I don't want this.
I've found this jquery method jQuery.trim() which seems to remove all the whitespaces but I don't know how can I use it inside my actual function.
Can someone give me some suggestions on how achieve this ?

Chain the method to the text
jQuery('.votefilters span a:first').on('click', function(event) {
jQuery('input[name="search"]').val(jQuery('.myo-poll-bar.firstoption').text().trim());
jQuery('input[name="search"]').keyup();
});

Use trim(). Like:
jQuery('.votefilters span a:first').on('click', function(event) {
jQuery('input[name="search"]').val(jQuery('.myo-poll-bar.firstoption').text().trim());
jQuery('input[name="search"]').keyup();
});

I recommend you "cache" your jQuery calls, so I did it by using oSearch. (Line 1)
then to answer your jQuery.trim question... do it like this
var oSearch = jQuery('input[name="search"]');
jQuery('.votefilters span a:first').on('click', function(event) {
var text = jQuery('.myo-poll-bar.firstoption').text();
text = jQuery.trim( text );
oSearch.val( text );
oSearch.keyup();
});

jQuery.trim('yourtext') similar to this:
jQuery('.votefilters span a:first').on('click', function (event) {
var $input = jQuery('input[name="search"]');
var newText = jQuery('.myo-poll-bar.firstoption').text();
var trimmedText = jQuery.trim(newText);
$input.val(trimmedText);
$input.keyup();
});
DEMO - Using jQuery.trim();

Select2 Dynamic elements not reacting to event

I am using Select2 which works great. However I am using below code to create new dynamic select2 drop down but they do not react/open when clicking on them.
var relationshipcounter = 0;
$('#AddMoreRelationships').click(function () {
var $relationship = $('.relationship'); // div containing select2 dropdown
var $clone = $relationship.eq(0).clone();
$clone[0].id = 'id_' + ++relationshipcounter;
$relationship.eq(-1).after($clone);
$relationship.find('select').trigger('change'); // not working
});
Screenshot:
JSFIDDLE:
http://jsfiddle.net/pHSdP/133/

I had this exact problem and, of course, the first thing I tried was a deep copy with data:
el.clone(true,true);
Which did not work. Instead the best method I found was:
el=other_el.clone()_etc; // cloning the old row
el.find('.select2-container').remove();
el.find('select').select2({width: 268});
el in both of these snippets is the div row that contains the select and so the Select2 element.
Essentially what I do in the second snippet is remove the "old" select2 which will always have the class of .select2-container and then recreate it on all found select elements within my new row.

You need to call clone with the true argument to copy over events and data as well. Otherwise only the element gets cloned, not the events that are bound to it.
$relationship.eq(0).clone(true);
Docs:http://api.jquery.com/clone/

Ok so issue is resolved, fiddle:
http://jsfiddle.net/WrSxV/1/
// add another select2
var counter = 0;
$('#addmore').click(function(){
var $relationship = $('.relationship');
var $clone = $("#RelationshipType").clone();
$clone[0].id = 'id_' + ++counter;
$clone.show();
$relationship.eq(-1).after($clone);
$clone.select2({ "width" : "200px" });// convert normal select to select2
//$('body').select2().on('change', 'select', function(){
// alert(this.id);
//}).trigger('change');
return false;
});

After cloning your object you have to reassign event for em:
var $clone = $relationship.eq(0).clone();
$clone.on("click", function_name);

Use .on to bind dynamically inserted elements to events like
$('body').on('click','#AddMoreRelationships',function () {
});