I'm using jQuery to add elements to a specified element. So a user selects options from a drop down menu and it's appended to a div. My jQuery is:
$('#datacombo').on('change', function () {
var selecteddata = $("#datacombo").val().toString();
$('#datadisplay').append("<p>"+ selecteddata + "</p>"); });
my HTML is simple a div:
<div id="datadisplay"></div>
I'm wanting to use ALL the 'selected data' at a later point so i want to add the selected items to a variable array.
I've searched on here and tried these:
How do I gather dropdown values into array with jQuery?
But couldnt get it to work, any suggestions?
Just declare array as global variable. And then push elements to it.
var selectedDatas = new Array();
$('#datacombo').on('change', function () {
var selecteddata = $("#datacombo").val().toString();
selectedDatas.push(selecteddata);
$('#datadisplay').append("<p>"+ selecteddata + "</p>");
});
Related
I'm trying to add the text from all divs Title Attributes to an array but I can't seem to select the right thing.
I need the title because it will contain the string that I need to use.
Here are three divs with different titles
<div class = 'test' title='title1'>Hello</div>
<div class = 'test' title='title2'>goodbye</div>
<div class = 'test' title='title2'>goodbye</div>
Here is my Jquery so far.
$(document).ready(function() {
$array = $('[title][title!=]').each(function(){
$(this).attr("title").makeArray;})
alert($array)
});
The alert just says [Object object]
In my example I'm trying to select create an array that contains [Title1, Title2, Title3].
Can anyone help me do this?
********************************UPDATE************************************
Thanks the first one worked perfectly. I really appreciate it.
var array = $.map($('[title][title!=""]'), function(el) { return el.title });
FIDDLE
Selects all elements that has a title attribute that is not empty, and maps the titles to an array
var theArray = []; // set an empty array to a variable outside of scope
$('.test').each(function() { // loop through all the .test divs
var theTitle = $(this).attr('title'); // selects the text of the title for the current .test element
theArray.push(theTitle); // this adds the text of the current title to the array
});
console.log(theArray); // just to test and make sure it worked, remove once verify
I'd suggest:
var titles = $('.test').map(function(){
return this.title;
}).get();
References:
get().
map().
I have a TableSorted table, and in each TD element are five SPAN elements. Four are always hidden, but upon clicking a div outside the table, certain spans are hidden dependent on which div is clicked.
I have the table sorting fine, but what I need is for the textExtraction to grab a different SPAN, depending on the value of the div which has been selected.
I've tried the following to no avail:
textExtraction:function(node){
var filter=$("div.career a.sel").text();
if(filter=="a"){var theindex=0;}
if(filter=="b"){var theindex=1;}
if(filter=="c"){var theindex=2;}
if(filter=="d"){var theindex=3;}
if(filter=="e"){var theindex=4;}
return $(node).find("span").eq(theindex).text();
}
What is the best way to achieve this?
The textExtraction function is only called when tablesorter is initialized or updated. Try triggering an update after the selection has changed.
var indexes = 'abcde'.split(''),
// Is this a select box?
$sel = $("div.career a.sel").on('change', function(){
$('table').trigger('update');
});
$('table').tablesorter({
textExtraction: function(node){
// if this is a select, get val(), not text()
var filter = $sel.val(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Update: for a link, try this:
var indexes = 'abcde'.split(''),
$careers = $("div.career a").on('click',function(){
var searcher = $(this).attr("rel");
$("div.career a").removeClass("sel");
$(this).addClass("sel");
$("td.stat span").hide();
$("td.stat span.career_" + searcher).show();
});
$('table').tablesorter({
textExtraction: function(node){
// find selected
var filter = $careers.filter('.sel').text(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Note: Don't use live() in jQuery version 1.9+, it was removed.
Hi im working on javascript chat and i want to append data to conversation that it belongs to
i have function to create new window and im setting a data attribute to each chat div
newWindow: function(name, id) {
if(!pushChatToArray(removeWhiteSpace(name))) return;
var div = htmlStructure(removeWhiteSpace(name));
setName(div, name);
setDataAttribute(div,"open","active");
setDataAttribute(div, "id", id);
$("body").append(div);
setCoordinates(div);
},
im creating new windows like this
chatbox.newWindow("USERNAME", "28");
all i want is select the specific chat div by the data atribute id
this code im using when im writing somebody that i have focused,so i can get the id by selecting the div like this :
var id = $(this).closest(".chat").data("id");
but i want to find chat with specific id like this
var chatid = $("body").find(".chat[data-id=1]");
Thank you for help
Try this:
var chatid = $('.chat').filter(function () {
return $(this).data('id') == 1;
});
I think you can use as below
var chatid = $(".chat").find("[data-id='" + current + "']");
Also, I find more tip in
jQuery how to find an element based on a data-attribute value?
You should use attr("data-id") than data("id")
I want to have on my html-site an combobox like on the following img. I want to get the selected values and print in out. How can I create this comboBox?? I have tried the Google API Visualization CategoryFilter Control. But you can not customize the google control.
Thank you
I just mocked up a combo-box like you described: http://jsfiddle.net/twwGM/
Basically, you need to use JS to capture the onchange event of the select box, and then append its value to some target area with specific styling by generating an HTML string from your function. Keep styles out of the JS and instead style it through the use of a CSS class.
HTML Markup:
<form>
<select id="selector">
<option>Magic</option>
<option>Canaries</option>
<option>Unicorns</option>
</select>
</form>
<div id="target-area"></div>
JS Code
(function () {
document.getElementById("selector").addEventListener("change", function () {
var val = this.options[this.selectedIndex].value;
var genId = val + "-close";
if (!document.getElementById(genId)) {
var htmlstr = "<div class='pasted-option'>" + val + "<span id='" + genId + "'>x</span></div>";
var targetArea = document.getElementById("target-area");
targetArea.innerHTML += htmlstr;
var closeButton = document.getElementById(genId);
closeButton.addEventListener("click", function () {
var parent = this.parentNode;
parent.parentNode.removeChild(parent);
});
}
});
}(window));
As you can see within the code, we also generate an id for the span based on the item's name so that we can make a call to it later for removal from the list. It also gives us the ability to check and make certain the value doesn't already exist within the list.
For example I selected (checked) 2 rows from second page than go to first page and select 3 rows. I want get information from 5 selected rows when I stay at first page.
$('tr.row_selected') - not working
Thanks.
Upd.
I created handler somthing like this:
$('#example').find('tr td.sel-checkbox').live("click", function () {
/*code here*/
});
But right now when click event is hadle the row from table is hidding. I think it may be sorting or grouping operation of DataTables. Any idea what I must do with this?
When a checkbox gets selected, store the row information you want in a global object as a Key-Value pair
I don't remember specifically how i did it before but the syntax was something like
$('input[type=checkbox]').click(function()
{
var row = $(this).parent(); //this or something like it, you want the TR element, it's just a matter of how far up you need to go
var columns = row.children(); //these are the td elements
var id = columns[0].val(); //since these are TDs, you may need to go down another element to get to the actual value
if (!this.checked) //becomes checked (not sure may be the other way around, don't remember when this event will get fired)
{
var val1 = columns[1].val();
var val2 = columns[2].val();
myCheckValues[id] =[val1,val2]; //Add the data to your global object which should be declared on document ready
}
else delete myCheckValues[id];
});
When you submit, get the selected rows from your object:
for (var i = 0; i < myCheckValues.length; i++)
...
Sorry, haven't done JS in a long time so code as is might not work but you get the idea.
$('#example').find('tr td.sel-checkbox').live("click", function () {
var data = oTable.fnGetData(this);
// get key and data value from data object
var isSelected = $(this).hasClass('row_selected');
if(isSelected) {
myCheckValues[key] = value;
checkedCount++;
} else {
delete myCheckValues[key];
checkedCount--;
}
});
.....
On submit
if(checkedCount > 0) {
for(var ArrVal in myCheckValues) {
var values = myCheckValues[ArrVal]; // manipulate with checked rows values data
}
}