clear table data in a partial view on text box focusout event - c#

I have a partial view (dynamic) which has a select list in one of the columns. I use Jquery to populate this list based on what is entered in a text box.
Anytime a user changes input in that text box, I want to clear the data from the table. Hence I tried the following options:
$("#StudentTable tr>td").detach();
$("#StudentTable tr>td").remove();
$("#StudentTable tr>td").empty();
But I get an error:
'get(...).options' is null or not an object
on this line:
$("#TeachingAssistant").get(0).options.length = 0;
Here, "#TeachingAssistant" is the select list "id" in the partial view.
<td>
<select name="TeachingAssistant" id="TeachingAssistant"></select>
</td>
I suppose it is deleting my the select list and hence not identifying it. How should I approach this? Any other way to clearing table data?
Thanks in advance

$("#StudentTable tr td").html('');
will empty every td on your table, but if you have binded any events in any td content, you may have some problems!
to clear the select options you can use this:
$("#TeachingAssistant option").remove();

Try following jquery code (ver 1.0) to delete the html inside table '#StudentTable':
$("#StudentTable").html("");
OR
$("#StudentTable").empty();
For reference you can visit link : jQuery - html()
For geting the selected valus from dropdown use following code:
$("#TeachingAssistant").val();
For clearing:
$("#TeachingAssistant").val("");
For reference you can visit link : jQuery - Get value

Related

ASP.NET dropdown to combobox

I have a Part Number field displayed as drop down list in my ASP.NET webform.
User will select part number and System will store the respective ID from part table.
Since this is dropdown list, user is not able to type the part number. I want to use a combobox so that user can enter the initial few digits, and then suggestions will pop up like in a dropdown list. Also I want to show error is the entered value by user is not in the database.
I am currently using asp-for and asp-items tag helpers to show data in dropdown.
Is there a way I can get to display combobox instead of dropdown list?
Thanks!
The Answer to above question can be found here:
Link: How to get the values of multiple choose dropdown box
Add the jquery Script from above link. for Select tag, use class as : multiple class="chosen-select" and finally add below script to show default value when input doesn't exist in database.
<script>
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
});
</script>

jQuery selected grid cell not returning html() value

I have a dynamically-created ASP.net gridview. I want to return the contents of the grid cell my user clicks. Everywhere I look, the html() property should do it, but mine keeps coming back 'undefined'.
I'm set up so only the first column responds to clicks. My code:
$('#dgrMainGrid td:nth-child(1)').click(function() {
var barCode = $('this').html();
alert(barCode);
})
I've tried a few hail-Marys based on advice from various sites, but the consensus is that html() should work. I'm wondering if the way I select my cell is wrong - in other words, my 'this' isn't what I think it is.
Any help is appreciated.
EDIT:
Here is a rendered HTML row.
</tr><tr>
<td>TD-00154</td>
<td>IV PRobe</td>
<td>Romex</td>
<td>350 Under</td>
<td>217M01866</td>
</tr><tr>
The selector is not good I think, it must be $(this).html()
Make sure you are calling your JS after the DOM (document object model) has been loaded or mostly you will get undefined when selecting the dgrMainGrid
$(document).ready(function(){
// add your code hear
});
Also, when calling ASP.net GridView by ID use <%= dgrMainGrid.ClientID %> instide of dgrMainGrid as ID is auto generated in HTML.

How to show and Edit (CRUD) datatable in view MVC.4, C#

I am having an object of DataTable which is created by reading some short of files in Controller.
I want to show a dynamic table (data depends, data present in files or not or it may a have column or not) In View using j-query action call after a dropdown selection changed.
also I want a specific column to be in editable mode so I can edit the value and same should be reflected in file after update .
Please suggest me the approach , I have done with data fetch but unable to show in UI and Unable to Edit it ,
Create a partial view with a model containing two lists
ITable
{
IList<IColumn> Columns;
IList<IRow> Rows
}
Create view for this model, either use loop or display template to render the values of table.
Edit Row
With each row provide a hyper-link to edit/delete the row, and let scaffolding create action/view for edit page by using model IRow.
Edit Column
Create a partial view containing textbox and saving functionality(button etc.), with the column identifier (figure it out yourself), and onclick display this partial view over the label.
And on click of save button post server with the value and ID to your action, hide the partial view contents from page, update label or refresh the page. (handle errors as per your project)

MVC3 Dropdown List in grid column, get selected value

I have a column in a grid that contains dropdown list.
The row also has a link which takes me to an action method.
I need the selected value of the dropdown list in that row and pass it to the method.
I have used jquery in the past to get the selected value of a dropdown list...but not when there are multiple drop down lists.
Can you give me some ideas on how I could resolve this?
It sounds like you're trying to write
$(this).closest('tr').find('select.SomeClass').val()
This code will get the <tr> containing this, then find a select in the row.

Display Clicked Item with Knockoutjs

I am trying to display information about the selected item in a list as well as highlight the row that is selected. This is what I have:
http://jsfiddle.net/blankasaurus/qUydu/6/
1) When I try to set the CurrentDisplayThing = item it doesn't do what I want it to do (which is update the Display div with the selected item). I also tried $.extend(CurrentDisplayThing, item); Am I going to have to set each property individually or something? I have about 30 of them on my real project.
2) The other thing i wanted to figure out is how to go about highlighting the row that I just clicked the proper way using Knockout.
PS: For what I am actually doing I am using the mapping plug-in and both Things and CurrentDisplayThing are coming from my .NET model I pass in. I am assuming what I have in JS Fiddle mirrors the way mapping would set this up?
Here is a fiddle that solves both problems.
http://jsfiddle.net/johnpapa/6FCEe/
1) The selected item property is actually an observable (which is a function). So the value must be passed into the observable function like this:
self.model.CurrentDisplayThing(item);
2) Highlighting the row can be done through the css binding in Knockout. The css binding accepts an object with the name of the css class (ex: selected) and an expression (ex: isSelected). In the example below, when isSelected is true, the class will be applied, otherwise it is removed.
<tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">
Check the fiddle out for the full example.
You can't just assign Knockout observables using code like
CurrentDisplayThing = item
And you can't $.extend them either, because in the end that does assignments too.
Instead you have to use the function syntax:
self.model.CurrentDisplayThing(item);
Similarly you have to use the function syntax when accessing:
self.model.CurrentDisplayThing().ID
Working example: http://jsfiddle.net/HUjau/1/

Categories

Resources