Develop Reference

Get a list of checked checkboxes that also has a specific data-attribute value

I have a table of data containing a checkbox that the user can select to either export the record or edit the record. For editing the checkbox has a data attribute that shows whether the specific set of data is editable (based on user-permissions).
I am trying to get a list of the checkbox values where the checkbox is checked AND the data attribute has a value "True".
In my view model I have the field:
public bool ShortageIsEditable {get;set;}
This is set in the view model mapper to either true or false depending on the status of the record and the permissions of the user.
In my view I have a table that has the following checkbox with data attribute for each record:
#(Html.Kendo().Grid(item.Shortages)
.Name(string.Format("ShortagesGrid_{0}", item.Id))
.Columns(columns =>
{
columns.Template(GetViewLink)
.Title("View")
.Width(38);
columns.Template(o => "<input type=\"checkbox\" name=\"selectedRequestId\" " + (o.IsSelected ? "checked=\"checked\"" : "") + "class=\"myCssCheckAllCheckBox\" value=\"" + o.ShortageNo + "\" data-iseditable=\"" + o.ShortageIsEditable + "\"/>")
.Width(30);
columns.Bound(o => o.ShortageNo)
.Title("Shortage #")
.Width(120);
...
When the user selected some records for edit (checked the checkboxes) and presses the Edit button, the following javascript/JQuery function is executed:
function submitGridSelectedItemsForEdit() {
$('#gridExportForm').attr('action', '/Requests/Shortage/MultiEditShortages');
$('#gridExportForm').attr('method', 'GET');
var chkdlist = $('input[name="selectedRequestId"]:checked');
var newlist = chkdlist.filter(function (el) {
return el.data("iseditable") === "True";
});
newlist.submit();
This will always crash on the line "return el.data("iseditable") === "True";".
I have also tried using the following, but this crashes on submitting the newlist array:
function submitGridSelectedItemsForEdit() {
$('#gridExportForm').attr('action', '/Requests/Shortage/MultiEditShortages');
$('#gridExportForm').attr('method', 'GET');
var chkdlist = $('input[name="selectedRequestId"]:checked');
var newlist = [];
for (var chk in chkdlist)
{
if (chk.data("isEditable") == true) {
newlist.push(chk);
}
}
if (newlist.length == 0) {
alert("Please select at least 1 request to Edit.");
}
else {
newlist.submit();
}
}
What is the easiest way to get the list of objects that is both checked and has a data-attribute value of "True"?

el in filter() callback is the dom element, not a jQuery object. LAso it is not the first argument of the callback it is the second.
So to use jQuery methods you need to wrap el in $()
var newlist = chkdlist.filter(function (_,el) {
return $(el).data("iseditable") === "True";
});
Or filter based on the attribute value as selector
var newlist = chkdlist.filter('[data-iseditable="True"]')

Change selected text of a dropdown without changing the text in the option?

How to change the selected text of the dropdown without changing the text in the option? For ex: if dropdown has code and description both but on select i only wants to display the code and remove the description but description should be present in the dropdown.
Populating data in the dropdown:
$.each(jtc12_2_2_reasoncode1List, function(i, item) {
$('#jtc12_2_reasonForFailure1').append($('<option>', {
value : item.Code,
text : item.Code + " " + item.Description
}));
});
Change the text of selected option:
var jtc12_2_2_reasonCode1Code = $("#jtc12_2_reasonForFailure1 :selected").val();
var jtc12_2_2_reasonCode1Desc = _.filter(e.data.jtc12_2_2_reasonCode1List, function(item) {
return item.Code === jtc12_2_2_reasonCode1Code;
});
jtc12_2_2_reasonCode1Desc = jtc12_2_2_reasonCode1Desc[0].Description;
$("#jtc12_2_reasonForFailure1 option[value = " + jtc12_2_2_reasonCode1Code + "]").text(jtc12_2_2_reasonCode1Code);

One way to achieve this is to add a new option at runtime and select that (the newly added) value instead of the selected value. Then the selected value can be removed on dropdown's click event.
Assuming the code and description are separated by a colon (:) refer the following code.
var onSelect = false;
$('select').click(function (e) {
if ($(this).val() !== '' && !onSelect) {
$(this).find('option:selected').remove();
} else {
onSelect = false;
}
});
$('select').change(function (e) {
var selectedVal = $(this).val();
var newVal = selectedVal.split(':')[0];
$(this).append($('<option>', {
value: newVal,
text: newVal
}));
$(this).val(newVal);
$(this).find('option:selected').hide();
onSelect = true;
});
jsFiddle

JQuery set select box value to selected

Please help i am doing this to use in my mobile with jquery mobile
var obj = jQuery.parseJSON(finalresult);
//alert(obj);
var dept = '2';
$(document).ready(function () {
//$("#opsContactId").empty();
$.each(obj, function (k, v) {
var $opt = $("<option/>");
$opt.attr("value", k);
//alert(k);
//alert(v);
//var value1=v;
if (k == dept) {
//$opt.attr("selected","selected");
//alert("in if");
$("#opsContactId").val(k);
//document.getElementById("opsContactId").value=k;
// $('#opsContactId').selectmenu('refresh', true);
}
$opt.text(v);
$opt.appendTo($("#opsContactId"));
});
});
not able to set an option to be selected by dafault

As others as stated, jQuery's .prop() would be the most suitable answer here as jQuery Docs mention themselves:
"The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value."
To further your on your example, jQuery allows for method 'chaining' which returns the jQuery object after the method has completed, thus you can add another method directly after it.
<select id="opsContactId">
</select>
<script>
$(document).ready(function() {
var tmp = [ 1, 2, 3, 4, 5 ],
dept = 2;
$.each( tmp, function( k, v ) {
$("<option/>").attr("value", k)
.text( "Value - " + v)
.appendTo( $("#opsContactId") )
.prop( 'selected', ( k == dept ? 'selected' : '' ));
});
});
</script>
Fiddle: http://jsfiddle.net/twdgC/
Later I forgot you mentioned the jQuery mobile aspect of your question, which changes the dynamic of the question a little bit. The snippet above is run after the page has loaded (Thus, all the jQuery mobile attachments have already been set/made), which would happen to give you the result of (below)
Fiddle: http://jsfiddle.net/5ksG8/
This obviously isn't helpful when trying to construct an <select> list, thus we'll need to append the snippet above with:
$("#opsContactId").selectmenu('refresh', true );
After the snippet has run, thus it 'reloads' the entire list, finally providing you with (below)
Fiddle: http://jsfiddle.net/YxVg6/
You were doing this in your original snippet, the issue was - you were executing it within the loop (And it was commented out!).

Would something like this not be easier?
Would something like this not be easier?
var selected = "selected"; // work this out
var text = "Option Text"; // work this out
var value = "Option Value"; // work this out
$("#opsContactId").append('<option value="' + value + '" '+ selected + '>' + text + '</option>');

jsBin demo
if you have a match you'll need to add the attribute selected. however I don't know how your object looks like...
var obj = {"1":"one","2":"two","3":"three","4":"four"}; // let's say that's how it looks
var dept = '2';
$(function () {
var $sel = $("#opsContactId");
$.each(obj, function (k, v) {
var $opt = $("<option/>", {value:k, text:v}).appendTo( $sel );
if (k == dept) $opt.prop({selected:true});
});
});

reset values of not selected fields of dropdown

I have a dropbox that when selected it displays its respective fields
in first image you can see there is A person without an ID so when selected it displays
something like:
if you see I added 12
Now if i change my mind and select the other option (person with ID) one field is displayed like:
I added 9999
That is ok, but now if I change my mind again and return to other selected option the values are still there like:
I would like to clean them... How can I accomplish that?
It does not matter to fill all respective fields again, I want to reset values in that case if select
person without ID, delete the 9999, on the other hand, if i select person with Id, i want to reset the vakue 12
please take a look at my fiddle
some of the jquery code is:
//function available
function validate(id, msg) {
var obj = $('#' + id);
if(obj.val() == '0' || obj.val() == ''){
$("#" + id + "_field_box .form-error").html(msg)
return true;
}
return false;
}
$(function () {
$('#has_id').show();
$('#select_person').change(function () {
$('.persons').hide();
if ($('#select_person').val() == 'typeA') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
$("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
$("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
$("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
$("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
}
});
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
var validation = function(){
var err = 0;
err += validate('select_person', "select person.");
err += validate('has_id', "Select whether it has an ID or not.");
if(err == 0){
alert('continue');
}else{
alert('error');
}
};

Simply make this change:
$('#has_id').change(function () {
$('.persons input').val('');
$('.persons').hide();
$('#' + $(this).val()).show();
});
New fiddle: http://jsfiddle.net/6m27M/
This simply clears out all the values any time a change is made to the #has_id dropdown.

JavaScript back button to display previous list

I want create a web application that display a list of items. Suppose I have displayed a list view (say listobject1) of 3 items. when clicked on any of them I get new list view (say listobject2) which its value is according to listobject1. When again I click one of them I get another view. Now when I click back button i want to go back to previous list view i.e. when I'm now on listobject2 and again when back button is pressed I want to show listobject1. Can anybody tell me how I can do this in JavaScript?
Edit
I'm still study about the stuff but I can't solve this problem yet. In order to clarify my problem now, here's my code:
$(document).ready(function() {
$("#result").hide();
$("input[name='indexsearch']").live("click", function() {
$("#result").show();
$("#result").empty();
loading_img();
var $textInput = $("[name='valueLiteral']").val();
$.getJSON("get_onto", {
"input" : $textInput
}, function(json) {
if(json.length > 0 ) {
var arrayPredicate = [];
var arrayObject = [];
var arraySubject = [];
$.each(json, function(index, value) {
arraySubject[index] = value.subject;
arrayPredicate[index] = value.predicate;
if(value.objectGeneral != null) {
arrayObject[index] = value.objectGeneral;
} else {
arrayObject[index] = value.objectLiteral;
}
}
);
var stmt = [];
//concat all related array into string (create triple statement)
$.each(arrayPredicate, function(k,v){
stmt[k] = "<span class='subject' id="+arraySubject[k]+">"
+ arraySubject[k] + "</span> " + " -> " + v + " : "+
//change object from text to be button form
"<button class = 'searchAgain-button' name = 'searchMore' \n\
value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br> <br>";
});
stmt = stmt.sort();
$.each(stmt, function(k,v){
$("#result").append(v);
});
} else {
var $noresult = "No Result : Please enter a query";
$("#result").append($noresult);
}
});
});
$("button").live("click", function() {
$("#result").show();
$("#result").empty();
loading_img();
var $textInput = $(this).attr("Value");
//var $textInput = "G53SQM";
$.getJSON("get_onto", {
"input" : $textInput
}, function(json) {
if(json.length > 0 ) {
var arrayPredicate = [];
var arrayObject = [];
var arraySubject = [];
$.each(json, function(index, value) {
arraySubject[index] = value.subject;
arrayPredicate[index] = value.predicate;
if(value.objectGeneral != null) {
arrayObject[index] = value.objectGeneral;
} else {
arrayObject[index] = value.objectLiteral;
}
}
);
var stmt = [];
var searchMore = "searchMore";
//concat all related array into string (create triple statement)
$.each(arrayPredicate, function(k,v){
stmt[k] = "<span class='subject' id="+arraySubject[k]+">" + arraySubject[k] + "</span> " + " -> " + v + " : "+ " <button class = 'searchAgain-button' name = " +searchMore + " value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br><br>";
});
stmt = stmt.sort();
$.each(stmt, function(k,v){
$("#result").append(v);
});
} else {
var $noresult = "No Result : Please enter a query";
$("#result").append($noresult);
}
});
});
At first, user only see one button name "valueLiteral". After user perform 1st search, the result is return in a form of JSON and eventually put in stmt[] to display, which at this state the second button was create as a clickable-result which will automatically take the value of result and do second search if user click the second button.
Now the problem is, I want to add a 3rd HTML button name "back" to make the web display the previous result in stmt[] if user click on the button.
Hope this helps in clarify the problems, I'm still doing a hard work on this stuff since I'm a newbie in JavaScript. Appreciate all helps.

This is what you want almost exactly the way you want it.
You'll have to use history.pushState to push these fake events into the history.
Alternatively, you can use location.hash to store the current object, and update the hash every time you display a new list. Then onhashchange find the hash and display the appropriate list.

See http://jsfiddle.net/cFwME/
var history=[new Array(),new Array()];
history[0].id="#back";
history[1].id="#next";
Array.prototype.last=function(){
return this[this.length-1];
}
$('#list>li:not(:first)').click(function(){
if(!history[0].length || history[0].last().html()!=$('#list').html()){
history[0].push($('#list').clone(true,true));
$(history[0].id).prop('disabled',false);
history[1].length=0;
$(history[1].id).prop('disabled',true);
}
$('#list>li:first').html('This is List '+$(this).index());
});
$('#back').click(getHistory(0));
$('#next').click(getHistory(1));
function getHistory(n){
return function(){
if(!history[n].length){return false;}
history[(n+1)%2].push($('#list').replaceWith(history[n].last()));
history[n].pop();
$(history[(n+1)%2].id).prop('disabled',false);
if(!history[n].length){$(history[n].id).prop('disabled',true);}
}
}

Check out jQuery BBQ - http://benalman.com/projects/jquery-bbq-plugin/